diagrams-mcp

描述

diagrams-mcp 是一个 MCP，允许根据文本或 JSON 结构自动生成图表。目前支持：

• 类图 (UML)

• 实体关系图 (ER)

• 通过自然语言生成

• 使用 Mermaid 导出为 SVG

• 专为 MCP 代理设计的集成

其目标是允许代理或用户描述一个系统，并在无需手动编写 Mermaid 的情况下获得相应的图表。

安装

1. 克隆仓库

git clone https://github.com/nacho-mazzoni/diagrams-mcp.git
cd diagrams-mcp

2. 安装依赖

npm install

3. 安装 Mermaid CLI（如果尚未安装）

npm install -g @mermaid-js/mermaid-cli

4. 验证安装

mmdc -h

使用

此 MCP 旨在与代理协同工作。推荐流程如下：

1. 要求代理分析项目代码。

2. 请求代理生成包含以下内容的 JSON：

   • 检测到的类

   • 实体

   • 属性

   • 关系

   • 所做的更改

3. 将该 JSON 直接传递给 MCP。

4. MCP 自动生成相应的图表。

这使得图表可以根据代码的实际状态或代理引入的更改来构建，而无需手动编写 Mermaid。

该 MCP 接受：

• 代理生成的结构化 JSON

• 描述模型的自然语言文本

• 用于更新现有图表的部分数据

与代理集成

用户可以按照此流程将 diagrams-mcp 集成到其代理中：

1. 用户请求代理分析代码或描述系统。

2. 代理生成包含实体、类、属性和关系的结构化 JSON。

3. 代理将该 JSON 发送给 MCP。

4. diagrams-mcp 自动生成图表。

5. 代理将生成的 SVG 返回给用户。

概念流程：

Usuario -> Agente -> JSON -> diagrams-mcp -> SVG -> Usuario

这使得图表能够反映代码的实际状态或代理所做的更改。

代理生成的 JSON 示例

{
  "entities": [
    { "name": "Usuario", "attributes": ["id", "nombre"] },
    { "name": "Pedido", "attributes": ["id", "fecha"] }
  ],
  "relations": [
    {
      "from": "Usuario",
      "to": "Pedido",
      "fromCard": "1",
      "toCard": "1..*",
      "label": "realiza"
    }
  ]
}

该 JSON 直接传递给 MCP 以生成图表。

项目结构

diagrams-mcp
│
├── tools
│   ├── classDiagram.js
│   └── erDiagram.js
│
├── parsers
│   ├── textToClass.js
│   └── textToER.js
│
├── index.js
└── package.json

项目目标

• 与 MCP 代理集成

• 开发过程中自动生成图表

• 支持自然语言

• 未来扩展到更多类型的图表

当前状态

• 具有基数以及主键 (PK) 和外键 (FK) 的 ER 图

• UML 类图

• 文本解析器

• SVG 导出

说明

该 MCP 还支持通过以空行分隔的文本块来定义带有属性、主键 (PK) 和外键 (FK) 的实体，从而允许从结构化描述中生成完整的 ER 图。