Diagram MCP

DiagramMCP-软件开发的动态图生成

一个全面的模型上下文协议（MCP）服务器，用于生成软件开发周期中常用的动态图。此MCP提供了使用Mermaid语法创建流程图、序列图、类图、ER图、甘特图和架构图的工具。

输出示例

Blog Auth Sequence

支持的图表类型

• 流程图 -流程图、决策树、工作流程图
• 序列图 -API交互、系统通信、用户流
• 类别图 -面向对象设计，系统架构
• ER图 -数据库架构、实体关系
• 甘特图 -项目时间表、任务安排
• 架构图 -系统组件、服务交互

关键能力

• ✅ 多个节点形状 -矩形、圆形、菱形、六边形、平行四边形

• ✅ 柔性连接 -带标签的箭头，不同的线型

• ✅ 分层架构 -在逻辑层中组织组件

• ✅ 验证 -语法检查和错误报告

• ✅ 出口支持 生成美人鱼风格代码，可以导出为SVG、PNG、PDF、HTML格式（使用Mermaid CLI或在线美人鱼编辑器）

> ⚠️ 实验特性：文件导出功能是高度实验性的。考虑使用系统的Chrome安装，而不是Puppeteer管理的Chrome，以获得更好的可靠性。

• ✅ 主题支持 -多种视觉主题

安装

1. 安装依赖项：

pip install -r requirements.txt

1. 运行MCP服务器：

python app.py

可用工具

1. create_flowchart

为流程图和决策树生成流程图。

参数：

• title （str）：图表标题
• nodes （列表\[Dict\]）：节点 id, label, shape
• connections （列表\[Dict\]）：与 from, to, label
• direction （str）：流向（TD、LR、BT、RL）
• theme （str）：视觉主题

例子：

create_flowchart(
    title="User Authentication Flow",
    nodes=[
        {"id": "start", "label": "Start", "shape": "circle"},
        {"id": "login", "label": "Login Form", "shape": "rectangle"},
        {"id": "validate", "label": "Valid Credentials?", "shape": "diamond"},
        {"id": "dashboard", "label": "Dashboard", "shape": "rectangle"},
        {"id": "error", "label": "Error Message", "shape": "rectangle"}
    ],
    connections=[
        {"from": "start", "to": "login"},
        {"from": "login", "to": "validate"},
        {"from": "validate", "to": "dashboard", "label": "Yes"},
        {"from": "validate", "to": "error", "label": "No"}
    ],
    direction="TD"
)

2. create_sequence_diagram

为API交互和系统通信生成序列图。

参数：

• title （str）：图表标题
• participants （List\[str\]）：参与者/参与者名单
• interactions （列表\[Dict\]）：与 from, to, message, type

例子：

create_sequence_diagram(
    title="API Authentication Flow",
    participants=["Client", "API", "Database"],
    interactions=[
        {"from": "Client", "to": "API", "message": "POST /login", "type": "arrow"},
        {"from": "API", "to": "Database", "message": "Validate user", "type": "arrow"},
        {"from": "Database", "to": "API", "message": "User data", "type": "dotted"},
        {"from": "API", "to": "Client", "message": "JWT token", "type": "dotted"}
    ]
)

3. create_class_diagram

为面向对象的设计生成UML类图。

参数：

• title （str）：图表标题
• classes （列表\[Dict\]）：带 name, attributes, methods
• relationships （列表\[Dict\]）：与 from, to, type

4. create_er_diagram

为数据库设计生成实体关系图。

参数：

• title （str）：图表标题
• entities （列表\[Dict\]）：实体 name, attributes
• relationships （列表\[Dict\]）：与 from, to, cardinality

5. create_gantt_chart

为项目规划和进度安排生成甘特图。

参数：

• title （str）：图表标题
• sections （列表\[Dict\]）：带有 name 和 tasks

6. create_architecture_diagram

生成显示组件及其交互的系统架构图。

参数：

• title （str）：图表标题
• components （列表\[Dict\]）：组件 id, name, type, layer
• connections （列表\[Dict\]）：与 from, to, protocol
• layers （List\[str\]）：可选图层组织

7. validate_diagram

验证图表语法并提供错误反馈。

参数：

• diagram_code （str）：美人鱼图代码验证
• diagram_type （DiagramType）：用于验证的图表类型

8. export_diagram

获取以各种格式渲染图表的导出说明。

参数：

• diagram_code （str）：美人鱼图代码
• format （str）：导出格式（svg、png、pdf、html）
• theme （str）：要应用的主题

使用示例

创建简单流程图

# Generate a basic decision flowchart
flowchart = create_flowchart(
    title="Bug Triage Process",
    nodes=[
        {"id": "report", "label": "Bug Report", "shape": "rectangle"},
        {"id": "severity", "label": "Critical?", "shape": "diamond"},
        {"id": "hotfix", "label": "Hotfix", "shape": "rectangle"},
        {"id": "backlog", "label": "Add to Backlog", "shape": "rectangle"}
    ],
    connections=[
        {"from": "report", "to": "severity"},
        {"from": "severity", "to": "hotfix", "label": "Yes"},
        {"from": "severity", "to": "backlog", "label": "No"}
    ]
)

创建架构图

# Generate a microservices architecture diagram
architecture = create_architecture_diagram(
    title="E-commerce Microservices",
    components=[
        {"id": "web", "name": "Web App", "type": "frontend", "layer": "Presentation"},
        {"id": "api", "name": "API Gateway", "type": "api", "layer": "API"},
        {"id": "user", "name": "User Service", "type": "service", "layer": "Services"},
        {"id": "order", "name": "Order Service", "type": "service", "layer": "Services"},
        {"id": "db", "name": "Database", "type": "database", "layer": "Data"}
    ],
    connections=[
        {"from": "web", "to": "api", "protocol": "HTTPS"},
        {"from": "api", "to": "user", "protocol": "HTTP"},
        {"from": "api", "to": "order", "protocol": "HTTP"},
        {"from": "user", "to": "db", "protocol": "SQL"},
        {"from": "order", "to": "db", "protocol": "SQL"}
    ],
    layers=["Presentation", "API", "Services", "Data"]
)

渲染图

MCP生成Mermaid语法，可以使用以下方式呈现：

1. Mermaid CLI （适用于SVG/PNG/PDF）：

npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg

1. 在线美人鱼编辑器: https://mermaid.live/

1. VS代码扩展：美人鱼预览

1. HTML集成:

整合

此MCP服务器可以与以下设备集成：

• 克劳德桌面 -添加到MCP配置
• 月中日 -VS Code、Windsurf、Cursor、IntelliJ和MCP插件
• 文档工具 -概念、汇流、GitBook
• CI/CD管道 -从代码自动生成图表

配置

默认情况下，服务器在stdio传输上运行。要与Claude Desktop一起使用，请在MCP配置中添加：

{
  "mcpServers": {
    "diagrammcp": {
      "command": "python",
      "args": ["/path/to/diagramMCP/app.py"]
    }
  }
}

贡献

您可以使用其他图表类型、主题或导出格式扩展此MCP。模块化设计使添加新的图表生成工具变得容易。

许可证

麻省理工学院许可证-您可以自由使用和修改您的项目。