AI导哈

流程图工具

一个类似Figma的工具，用于创建流程图和系统图，支持单用户本地优先的JSON文件存储。

  • by Ckrest
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Ckrest/diagram-tool

使用说明

图表工具

一个类似Figma的工具，用于创建流程图和系统图。单用户，本地优先，JSON文件存储。

特性

  • 可视化图表编辑器：在无限画布上创建和编辑节点和边
  • 多个节点形状：矩形、椭圆形、菱形、药丸
  • 节点属性：标签、颜色、类型、标签、描述
  • 边缘连接：单击并拖动以连接节点
  • 文件操作：新建、打开、保存、另存为JSON格式
  • 取消/重做：通过Ctrl+Z/Ctrl+Y提供完整的历史记录支持
  • 实时更新：通过MCP实现人工智能集成的WebSocket同步

建筑

┌─────────────────┐     HTTP/WS      ┌─────────────────┐
│    Frontend     │◄────────────────►│    Backend      │
│  React + TS     │                  │    FastAPI      │
│  localhost:5173 │                  │  localhost:8765 │
└─────────────────┘                  └────────┬────────┘
                                              │
                                     ┌────────▼────────┐
                                     │   JSON Files    │
                                     │  (diagrams/*.json)
                                     └─────────────────┘

快速开始

# Start both backend and frontend
./start.sh

# Or start separately:
./start-backend.sh   # Terminal 1
./start-frontend.sh  # Terminal 2

然后打开http://localhost:5173在您的浏览器中。

键盘快捷键

快捷方式 操作
Ctrl+N 新建图表
Ctrl+O 打开图表
Ctrl+S 保存
Ctrl+Shift+S 另存为
Ctrl+Z 撤消
Ctrl+Y/Ctrl+Shift+Z 重做
删除 删除所选节点/边
Escape 取消连接
双击 添加新节点

图表JSON格式

{
  "id": "diagram-uuid",
  "name": "My Diagram",
  "nodes": [
    {
      "id": "n1",
      "label": "Service A",
      "type": "component",
      "shape": "rectangle",
      "color": "#3478f6",
      "x": 100,
      "y": 100,
      "width": 150,
      "height": 80,
      "tags": ["backend"],
      "description": "Main service"
    }
  ],
  "edges": [
    {
      "id": "e1",
      "from": "n1",
      "to": "n2",
      "label": "API call"
    }
  ],
  "metadata": {
    "created_at": "2024-01-01T00:00:00",
    "updated_at": "2024-01-01T00:00:00"
  }
}

API终点

图表

  • GET /api/diagram -获取当前图表状态
  • PATCH /api/diagram -更新图表名称
  • POST /api/diagram/new -创建新图表
  • POST /api/diagram/open -从文件打开图表
  • POST /api/diagram/save -将图表保存到文件

节点

  • POST /api/nodes -创建节点
  • GET /api/nodes/{id} -获取节点
  • PATCH /api/nodes/{id} -更新节点
  • DELETE /api/nodes/{id} -删除节点

边缘

  • POST /api/edges -创建边
  • GET /api/edges/{id} -获得优势
  • PATCH /api/edges/{id} -更新边缘
  • DELETE /api/edges/{id} -删除边

取消/重做

  • POST /api/undo -撤消上次操作
  • POST /api/redo -重做上次未执行的操作

双向通信

  • ws://localhost:8765/ws -实时更新

MCP集成

后端可以与MCP（模型上下文协议）服务器集成，允许AI代理创建和修改图表。人工智能的编辑通过相同的API进行，并通过WebSocket广播到前端进行实时显示。

发展

后端

cd src/backend
python -m venv venv
source venv/bin/activate
pip install -e ../..
python main.py

前端

cd frontend
npm install
npm run dev

技术栈

  • 后端：Python 3.11+、FastAPI、Pydantic、WebSockets
  • 前端：React 18、TypeScript、Vite
  • 存储：JSON文件（本地文件系统）

相关 MCP