Diagram Tool

图表工具

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

Preview

特性

• 可视化图表编辑器：在无限画布上创建和编辑节点和边
• 多个节点形状：矩形、椭圆形、菱形、药丸
• 节点属性：标签、颜色、类型、标签、描述
• 边缘连接：单击并拖动以连接节点
• 文件操作：新建、打开、保存、另存为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在您的浏览器中。

键盘快捷键

图表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文件（本地文件系统）