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 devFossFLOW开放时间 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：添加 `` 组件App.tsx：添加useWebSocketIntegration()钩子package.json：添加ws依赖
许可证
麻省理工学院