AI导哈

AI绘图工具

FossFLOW MCP是一种AI驱动的绘图工具，通过Model Context Protocol（MCP）实现实时AI绘图功能，适用于架构设计和技术绘图场景。

  • by edgyarmati
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 EdGy2k/fossflow-mcp

使用说明

FossFLOW MCP

AI驱动的图表绘制 FossFLOW 通过 模型上下文协议（MCP）.

这能带来什么

┌─────────────────┐     MCP Protocol     ┌──────────────────┐
│ Claude/Cursor   │──────────────────────│   MCP Server     │
│  /AI Agent      │    (stdio)           │  (this repo)     │
└─────────────────┘                       └────────┬─────────┘
                                                   │
                                                   │ WebSocket
                                                   ▼
                                          ┌──────────────────┐
                                          │ WebSocket Bridge │
                                          │  (FossFLOW fork) │
                                          └────────┬─────────┘
                                                   │
                                                   │ WebSocket
                                                   ▼
                                          ┌──────────────────┐
                                          │    FossFLOW      │
                                          │  (React App)     │
                                          └──────────────────┘

通过此设置，您可以说：

“设计一个具有负载均衡器、两个应用服务器和PostgreSQL数据库的三层web架构”

克劳德将实时为您创建图表。

快速开始

1.克隆并启动FossFLOW（启用MCP的分叉）

git clone https://github.com/EdGy2k/fossflow-mcp-fork.git
cd fossflow-mcp-fork
npm install

# Terminal 1: Start WebSocket bridge
node packages/fossflow-backend/websocketServer.js

# Terminal 2: Start FossFLOW
npm run dev

FossFLOW开放时间 http://localhost:3000 使用WebSocket网桥 ws://localhost:3333.

2.配置您的AI客户端

克劳德桌面版

编辑 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）或 %APPDATA%/Claude/claude_desktop_config.json （Windows）：

{
  "mcpServers": {
    "fossflow": {
      "command": "npx",
      "args": ["-y", "fossflow-mcp"]
    }
  }
}

光标

添加到光标设置>MCP：

  • 姓名： fossflow
  • 命令： npx -y fossflow-mcp

3.开始使用AI绘制图表

打开Claude/Cursor并询问：

  • “使用AWS服务创建云架构图”
  • “添加连接到API服务器的数据库节点”
  • “将此图导出为JSON”

可用工具

工具 说明
add_node 添加一个语义图标匹配的节点（例如“aws-lambda”、“数据库”）
connect_nodes 在节点之间绘制箭头
move_node 在网格上重新定位节点
delete_element 删除节点或连接器
undo / redo 历史操作
list_nodes 获取所有具有位置的节点
search_icons 查找可用图标
export_diagram 另存为JSON

语义图标匹配

这 add_node 该工具使用模糊搜索：

"AWS Lambda" → matches aws-lambda icon
"PostgreSQL" → matches postgresql icon
"load balancer" → matches load-balancer icon

可用图标包： isoflow, aws, gcp, azure, kubernetes

存储库结构

fossflow-mcp/
├── src/
│   ├── index.ts           # MCP server entry
│   ├── fossflowClient.ts  # WebSocket client
│   ├── iconMatcher.ts     # Fuzzy icon search
│   └── types.ts           # Type definitions
├── dist/                  # Compiled JavaScript
├── package.json
└── README.md

发展

npm install
npm run build
npm start

集成详细信息

此MCP服务器通过WebSocket网桥连接到FossFLOW。叉子补充道：

  • WebSocket服务器 (websocketServer.js)-连接MCP和FossFLOW
  • McpBridge组件 -处理FossFLOW React应用程序内的操作
  • WebSocket服务 -从浏览器到网桥的客户端连接

原始FossFLOW变化（最小）：

  • Isoflow.tsx：添加 <McpBridge /> 组件
  • App.tsx：添加 useWebSocketIntegration() 钩子
  • package.json：添加 ws 依赖

许可证

麻省理工学院

相关 MCP