FCP-DRAWIO
MCP服务器,用于通过意图级命令创建和编辑draw.io图。
它的作用
fcp-drawio允许LLM通过描述他们想要什么而不是如何绘制来构建架构图、流程图和系统图。LLM发送以下高级操作 add svc AuthService theme:blue 和 connect AuthService -> UserDB,fcp-drawio通过ELK将它们渲染成完全样式化的draw.io XML,并自动布局。建立在 FCP 框架。
Multiplayer game backend — 20 nodes, 5 swim lanes, auto-layout (open in draw.io)
快速示例
drawio([
'add svc AuthService theme:blue',
'add db UserDB theme:green near:AuthService dir:right',
'connect AuthService -> UserDB label:queries',
])答复:
+svc AuthService @(200,200 140x60) blue
+db UserDB @(400,200 120x80) green
~AuthService->UserDB "queries" solid
digest: 3s 1e 0g这将生成一个draw.io图,其中包含一个蓝色圆角矩形服务节点、一个绿色数据库圆柱体和它们之间的标记边——所有这些都是自动定位的。
可用的MCP工具
| 工具 | 目的 |
|---|---|
drawio(ops) | 批量突变——添加形状、连接、样式、组、布局 |
drawio_query(q) | 检查图表——地图、列表、描述、连接、查找 |
drawio_session(action) | 生命周期——新建、打开、保存、检查点、撤消、重做 |
drawio_help() | 完整参考卡 |
构件库
| 类型 | 形状 | 用途 |
|---|---|---|
svc | 圆角矩形 | 服务、组件 |
db | 气缸 | 数据库、存储 |
api | Hexagon | API、网关 |
queue | 并行四边形 | 队列、流 |
cloud | 云 | 外部服务 |
actor | 人物 | 用户、人物角色 |
doc | 文档 | 文件、报告 |
box | 矩形 | 通用 |
decision | 钻石 | 决定、条件 |
circle | 椭圆 | 州、事件 |
process | 双边界rect | 预定义进程 |
triangle | 三角形 | 警告,三角形 |
主题
将颜色主题应用于任何形状: blue, green, red, orange, purple, yellow, gray, dark.
安装
需要节点>=22。
npm install @ostk-ai/fcp-drawioMCP客户端配置
{
"mcpServers": {
"drawio": {
"command": "node",
"args": ["node_modules/@ostk-ai/fcp-drawio/dist/index.js"]
}
}
}建筑
4层架构:
MCP Server (Intent Layer)
src/server/ -- Parses op strings, resolves refs, dispatches
|
Semantic Model (Domain Brain)
src/model/ -- In-memory entity graph, event sourcing
|
Layout (ELK)
Auto-layout via elkjs -- flow:TB, flow:LR, near/dir positioning
|
Serialization (XML)
src/serialization/ -- Semantic model mxGraphModel XML支持模块:
src/parser/--操作字符串解析器src/lib/--组件库、主题、模板、draw.io CLI集成
看 docs/examples/ 例如图表(包括 多人游戏后端)以及 docs/ 用于设计文件。
发展
npm install
npm run build # tsc
npm test # vitest, 465 tests
npm run test:watch
npm run dev # tsc --watch许可证
麻省理工学院
