小刀流程图

# pnpm（推荐）
pnpm add xiaodao-flowchart

# npm
npm install xiaodao-flowchart

# yarn
yarn add xiaodao-flowchart

import FlowchartContainer from 'xiaodao-flowchart'
import 'xiaodao-flowchart/style.css'

# 克隆仓库
git clone https://github.com/xiaodaozhi/xiaodao-flowchart.git
cd xiaodao-flowchart

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

<template>
  <FlowchartContainer
    v-model="data"
    theme="light"
    locale="zh-CN"
    :width="800"
    :height="600"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FlowchartContainer from 'xiaodao-flowchart'
import 'xiaodao-flowchart/style.css'
import type { FlowchartData } from 'xiaodao-flowchart'

const data = ref<FlowchartData>({
  nodes: [
    { id: 'n1', type: 'rectangle', x: 80, y: 80, width: 160, height: 60, label: '开始' },
    { id: 'n2', type: 'diamond', x: 80, y: 220, width: 160, height: 80, label: '判断?' },
  ],
  edges: [
    { id: 'e1', sourceNodeId: 'n1', sourceAnchor: 'bottom', targetNodeId: 'n2', targetAnchor: 'top' },
  ],
})
</script>

interface FlowchartData {
  nodes: FlowchartNode[]
  edges: FlowchartEdge[]
  freeLines?: FreeLine[]
}

interface FlowchartNode {
  id: string
  type: 'rectangle' | 'diamond' | 'ellipse' | 'parallelogram' | 'text'
  x: number
  y: number
  width: number
  height: number
  label: string
  style?: NodeStyle
}

interface FlowchartEdge {
  id: string
  sourceNodeId: string
  sourceAnchor: 'top' | 'right' | 'bottom' | 'left'
  targetNodeId: string
  targetAnchor: 'top' | 'right' | 'bottom' | 'left'
  label?: string
  style?: EdgeStyle
}

interface FreeLine {
  id: string
  x1: number
  y1: number
  x2: number
  y2: number
  style?: FreeLineStyle
}

interface NodeStyle {
  backgroundColor?: string
  borderColor?: string
  borderWidth?: number
  textColor?: string
  fontSize?: number
  borderRadius?: number
  opacity?: number
}

interface EdgeStyle {
  strokeColor?: string
  strokeWidth?: number
  cornerRadius?: number
}

interface FreeLineStyle {
  strokeColor?: string
  strokeWidth?: number
}

import FlowchartContainer from 'xiaodao-flowchart'

import type {
  FlowchartData,
  FlowchartNode,
  FlowchartEdge,
  FreeLine,
  FreeLineStyle,
  NodeType,
  AnchorPosition,
  NodeStyle,
  EdgeStyle,
  SidebarNodeTemplate,
  Theme,
  Locale,
} from 'xiaodao-flowchart'

├── main.ts                            # 演示入口
├── App.vue                            # 演示应用（同时也是 build:demo 的入口）
└── components/
    └── flowchart/
        ├── index.ts                   # 库入口：组件与类型的统一导出（barrel）
        ├── FlowchartContainer.vue     # 根组件：工具栏 + 侧边栏 + 画布 + 事件
        ├── FlowchartCanvas.vue        # SVG 画布：渲染 + 统一指针事件分发
        ├── FlowchartNode.vue          # 节点形状渲染（SVG + foreignObject 标签）
        ├── FlowchartEdge.vue          # 连线正交路由 + 箭头标记
        ├── NodeSidebar.vue            # 侧边栏拖拽源（节点/直线模板）
        ├── NodeActionBar.vue          # 节点取色器
        ├── EdgeActionBar.vue          # 连线 / 自由线取色器
        ├── composables/
        │   ├── useFlowchartContext.ts  # theme / locale / mobile 的 provide/inject 键
        │   ├── useFlowchartModel.ts    # v-model 存储、不可变提交、历史记录
        │   ├── useFlowchartI18n.ts     # i18n 文案映射（zh-CN / en-US）
        │   ├── useCanvasPanZoom.ts      # 平移/缩放数学、滚轮处理、屏幕<->世界坐标
        │   ├── useEdgeDrawing.ts        # 连线拖拽状态机
        │   ├── useSelection.ts          # 选择状态
        │   ├── useDragFromSidebar.ts    # 侧边栏节点拖拽创建
        │   └── useKeyboard.ts           # 键盘快捷键
        ├── style/
        │   └── theme.css                # CSS 自定义属性（60+ 个 --fc-* 变量）
        └── utils/
            ├── anchorUtils.ts          # 锚点几何
            ├── geometry.ts             # 网格吸附与点运算
            ├── colorUtils.ts           # 预设调色板 + 对比度计算
            └── idGenerator.ts          # Id 生成（nanoid）

--fc-bg, --fc-grid-bg, --fc-grid-line, --fc-selection-bg,
--fc-node-fill, --fc-node-border, --fc-node-text,
--fc-edge-stroke, --fc-sidebar-bg, --fc-sidebar-border,
--fc-bar-bg, --fc-toolbar-bg,
/* ... 以及更多 */

<template>
  <div style="--fc-bg: #1a1a2e; --fc-node-text: #e0e0e0;">
    <FlowchartContainer v-model="data" theme="dark" />
  </div>
</template>

# 仅类型检查
pnpm typecheck

# 生产库构建（类型检查 + vite 构建 + 生成 d.ts）
pnpm build

# 演示构建（普通应用构建，输出到 dist-demo）
pnpm build:demo

# 预览生产构建
pnpm preview