@eventcatalog/可视化器

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

安装

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

设置

1. 进口CSS(所需)

组件使用Tailwind 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数字 :

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数字 :

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 构建中被清除出,从而产生未被样式的组件.

使用量

基本活动节点

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}
/>

独立使用

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

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 手柄将事件节点包入:

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}
    />
  );
}

节点配置

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

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

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

道具

事件节点方案

事件节点数据

样式

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

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

特征

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