React MindFlow

基于 React 和 AntV G6 的思维导图组件。

特性

• 🎨 支持自定义节点样式
• 🌓 支持亮色/暗色主题
• 📐 支持水平/垂直布局
• 🖱️ 支持节点拖拽
• 🔍 支持画布缩放
• 📦 支持 TypeScript

安装

npm install react-mindflow
# 或
yarn add react-mindflow
# 或
pnpm add react-mindflow

使用

import { MindFlow } from 'react-mindflow';

const data = {
  id: 'root',
  label: '思维导图',
  children: [
    {
      id: '1',
      label: '子节点1',
      children: [
        { id: '1-1', label: '子节点1.1' },
        { id: '1-2', label: '子节点1.2' },
      ],
    },
    {
      id: '2',
      label: '子节点2',
    },
  ],
};

function App() {
  return (
    <MindFlow
      data={data}
      width={800}
      height={600}
      theme="light"
      direction="H"
      onNodeClick={(node) => console.log('点击节点:', node)}
    />
  );
}

API

MindFlow Props

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | data | 思维导图数据 | MindFlowNode | - | | width | 画布宽度 | number | 800 | | height | 画布高度 | number | 600 | | direction | 布局方向 | 'H' | 'V' | 'H' | | theme | 主题 | 'light' | 'dark' | 'light' | | nodePadding | 节点内边距 | number | 16 | | nodeSpacing | 同级节点间距 | number | 50 | | levelSpacing | 层级间距 | number | 100 | | onNodeClick | 节点点击事件 | (node: MindFlowNode) => void | - | | onNodeDoubleClick | 节点双击事件 | (node: MindFlowNode) => void | - | | onNodeContextMenu | 节点右键菜单事件 | (node: MindFlowNode, e: MouseEvent) => void | - |

MindFlowNode

interface MindFlowNode {
  id: string;
  label: string;
  children?: MindFlowNode[];
  style?: {
    fill?: string;
    stroke?: string;
    lineWidth?: number;
    [key: string]: any;
  };
}

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建库文件
pnpm build

# 构建示例
pnpm build:example

License

MIT