# @eventcatalog/visualizer 中文文档

规范地址：https://npmcn.com/package/%40eventcatalog/visualizer/

版本：0\.0\.6
npm 元数据更新时间：2025-09-18T17:52:41.880Z
中文译文更新时间：2026-11-14T02:53:06.401Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40eventcatalog/visualizer
原文对照：https://npmcn.com/package/%40eventcatalog/visualizer/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：537 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2025-08-11T09:41:36.158Z
- 最新版本发布：2025-09-18T17:52:41.688Z
- 近 30 天下载量：2470（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

事件Catalog 视觉器和工作室的反光节点和可视化器组件

## 安装

```sh
npm install @eventcatalog/visualizer
```

也可以使用：`pnpm add @eventcatalog/visualizer`、`yarn add @eventcatalog/visualizer`、`bun add @eventcatalog/visualizer`

## README

# @eventcatalog/可视化器

用于可视化事件Catalog节点的反应组件,为ReactFlow所建.

## 安装

```bash
npm install @eventcatalog/visualizer
# or
pnpm add @eventcatalog/visualizer
```

## 设置

### 1\. 进口CSS(所需)

组件使用Tailwind CSS类. 在您的 CSS 主文件中导入 CSS 文件 :

```css
/* In your main CSS file (e.g., globals.css, index.css) */
@import '@eventcatalog/visualizer/dist/styles.css';
```

### 2\. 配置尾风( 需要适当的样式)

可视化器组件使用Tailwind CSS课程. 您必须配置您的构建系统以包含这些类 :

#### 对于 Tailwind CSS v4(后CSS):

将可视化软件包添加到您的 `postcss.config.js`数字 :

```js
export default {
  plugins: {
    "@tailwindcss/postcss": {
      content: [
        // ... your existing paths
        './node_modules/@eventcatalog/visualizer/dist/**/*.{js,mjs}',
        './node_modules/@eventcatalog/visualizer/src/**/*.{js,ts,jsx,tsx}',
      ],
    },
  },
};
```

#### 用于 Tailwind CSS v3( Config 文件) :

将可视化软件包添加到您的 `content` 路径进入 `tailwind.config.js`数字 :

```js
module.exports = {
  content: [
    // ... your existing paths
    './node_modules/@eventcatalog/visualizer/dist/**/*.{js,mjs}',
    './node_modules/@eventcatalog/visualizer/src/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of config
}
```

**重要吗**:没有这种配置,可视化组件使用的Tailwind类会从您的 CSS 构建中被清除出,从而产生未被样式的组件.

## 使用量

### 基本活动节点

```tsx
import { EventNode } from '@eventcatalog/visualizer';

// Use as standalone component
<EventNode
  id="event-1"
  data={{
    name: "User Registered",
    version: "1.0.0",
    summary: "Fired when a user registers for the first time",
    mode: "full",
    owners: ["team-auth", "team-users"],
    sends: ["user-profile-updated"],
    receives: ["user-registration-request"]
  }}
  selected={false}
/>
```

### 独立使用

事件节点是一个纯视觉组件,可以在任何地方使用:

```tsx
import { EventNode } from '@eventcatalog/visualizer';

<EventNode
  id="event-1"
  data={{
    name: "User Registered",
    version: "1.0.0",
    summary: "Fired when a user registers for the first time",
    mode: "full",
  }}
  selected={false}
/>
```

### 用回放调试

对于 ReactFlow 集成,请用 ReactFlow 手柄将事件节点包入:

```tsx
import { ReactFlow, Handle, Position } from '@xyflow/react';
import { EventNode } from '@eventcatalog/visualizer';

// Create a ReactFlow node wrapper
function ReactFlowEventNode(props) {
  const { id, data, selected } = props;
  return (
    <>
      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
      <EventNode id={id} data={data} selected={selected} />
    </>
  );
}

const nodeTypes = {
  event: ReactFlowEventNode,
};

const nodes = [
  {
    id: '1',
    type: 'event',
    position: { x: 100, y: 100 },
    data: {
      name: 'User Registered',
      version: '1.0.0',
      summary: 'Fired when a user registers',
      mode: 'full',
    },
  },
];

export default function MyFlow() {
  return (
    <ReactFlow
      nodes={nodes}
      nodeTypes={nodeTypes}
    />
  );
}
```

## 节点配置

可视化器还导出节点配置 :

```tsx
import { eventConfig } from '@eventcatalog/visualizer';

// Access node metadata
console.log(eventConfig.type); // 'event'
console.log(eventConfig.color); // 'orange'
console.log(eventConfig.icon); // Zap component
```

## 道具

### 事件节点方案

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `id` | `string` | 所需经费 | 节点标识 |
| `data` | `EventNodeData` | 所需经费 | 节点数据 |
| `selected` | `boolean` | `false` | 是否选择了节点 |

### 事件节点数据

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `name` | `string` | 事件名称 |
| `version` | `string` | 事件版本 |
| `summary` | `string` | 事件简介 |
| `mode` | `'simple' | 'full'` | 显示模式 |
| `owners` | `string[]` | 事件所有者 |
| `sends` | `string[]` | 此事件发送的消息 |
| `receives` | `string[]` | 此事件收到的消息 |

## 样式

组件以Tailwind CSS课为样式. 一揽子计划包括:

-   **尾风类**: 组件中使用的所有标准Tailwind公用事业
-   **自定义 CSS**: 最小自定义样式导出于 `dist/styles.css`
-   **响应**: 组件在不同屏幕大小之间工作
-   **可主题**: 容易自定义 Tailwind 的主题系统

## 特征

-   ✅ **纯视觉组件**: 视觉和反应之间的清洁分离Flow关切
-   ✅ **独立使用**: 在 ReactFlow 上下文之外完美工作
-   ✅ **类型脚本**: 带有适当类型的完整类型脚本支持
-   ✅ **自定义样式**: 完成所有需要的 Tailwind 类的 CSS 捆绑
-   ✅ **可配置**: 支持简单和完整的显示模式
-   ✅ **框架不可知论**: 可以为任意流库所包裹(ReactFlow等)
-   ✅ **无依赖**: 没有反应Flow依赖,只是纯反应组件

## 常见问题

### @eventcatalog/visualizer 是什么？

事件Catalog 视觉器和工作室的反光节点和可视化器组件

### 如何安装 @eventcatalog/visualizer？

在项目目录运行 npm install @eventcatalog/visualizer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @eventcatalog/visualizer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @eventcatalog/visualizer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @eventcatalog/visualizer 可以商用吗？

@eventcatalog/visualizer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @eventcatalog/visualizer 的下载量有多少？

根据 npm 官方下载统计，@eventcatalog/visualizer 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,470 次，日均约 82 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @eventcatalog/visualizer 还在维护吗？

最新版本 0\.0\.6 发布于 2025/09/19（1\.2 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/08/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。