slug: diagram-generator name: diagram-generator version: 1.1.7 displayName: Diagram生成器 summary: 通过工具生成与编辑Draw.io/Mermaid/Excalidraw图表,支持网络拓扑/架构/流程图/UML等 summary_zh: 通过工具生成与编辑Draw.io/Mermaid/Excalidraw图表,支持网络拓扑/架构/流程图/UML等 license: MIT description: 通过工具生成与编辑Draw.io/Mermaid/Excalidraw图表,支持网络拓扑/架构/流程图/UML等。支持自动化配置和灵活的参数设置，适支持多种应用场景，提升生产力效果。Use when 需要提升效率、自动化流程、批量处理、工作流优化时使用。不适用于需要人工创意判断的任务。适用于独立开发者、企业团队和自动化工作流场景。 tags: - Creative - 工具 - 效率 - excalidraw - connector - draw - mermaid - references tools: - read - exec - write homepage: '' category: Automation homepage: "https://skillhub.cn/skill/"

核心功能: 本技能提供自动化配置和灵活的参数设置、多种应用场景、时使用等能力。

Diagram Generator

通过 connector-diagram-generator protocol service器将自然语言意图转换为结构化 JSON 规范,生成与编辑 Draw.io、Mermaid、Excalidraw 三种格式的图表文件。支持六类图的专属生成策略与质量校验. 范围外(本技能不做): 手工绘制位图、SVG 矢量编辑、PDF 排版、PPT 幻灯片、3D 建模、动画与交互式可视化.

请求格式

export API_KEY="${API_KEY:?请设置环境变量}"

配置后需重启会话或开启新终端生效。API Key应妥善保管,避免泄露到版本控制系统.

功能能力

必需 connector 工具

生成图表前,验证以下 connector 工具可用: - mcp__mcp-diagram-generator__get_config: 查看当前输出目录配置 - mcp__mcp-diagram-generator__generate_diagram: 提交 JSON 规范生成图表 - mcp__mcp-diagram-generator__init_config: 初始化默认配置 若工具缺失

支持的格式与图类型

格式

• Draw.io: .drawio,适合复杂网络与架构图
• Mermaid: .mmd 或 markdown 内嵌,适合代码仓库文档
• Excalidraw: .excalidraw,适合白板手绘风格

图类型与默认格式

{
  "paths": {
    "drawio": "output/diagrams/drawio",
    "mermaid": "output/diagrams/mermaid",
    "excalidraw": "output/diagrams/excalidraw"
  }
}

查看

初学者指南

1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理

   详细的输入输出格式请参考下方章节说明。

必需 connector 工具(补充)

若工具缺失,需配置 protocol service器并重启 Agent 环境。推荐远程配置:

{
  "protocolServers": {
    "connector-diagram-generator": {
      "command": "npx",
      "args": ["-y", "connector-diagram-generator"]
    }
  }
}

首次使用时服务器会创建 .diagram-config.json 与默认输出目录 diagrams/{format}/.

支持的格式与图类型(补充)

格式(补充)

• Draw.io: .drawio,适合复杂网络与架构图
• Mermaid: .mmd 或 markdown 内嵌,适合代码仓库文档
• Excalidraw: .excalidraw,适合白板手绘风格

图类型与默认格式(补充)

{
  "format": "drawio",
  "diagramType": "architecture",
  "title": "图表标题",
  "elements": [
    {
      "id": "unique-id",
      "type": "container",
      "name": "显示名",
      "level": "environment",
      "geometry": { "x": 0, "y": 0, "width": 800, "height": 600 },
      "children": []
    },
    {
      "type": "edge",
      "source": "source-id",
      "target": "target-id"
    }
  ]
}

通用规则: - elements 必须是数组 - ID 必须唯一 - 边必须为顶层元素,不能放在 children 内 - 边的 source 与 target 必须指向已存在的节点或容器 - style 必须是对象 - 颜色使用 #RRGGBB - Draw.io 无填充节点使用 fillColor: "none"

质量门校验

调用 protocol service器前验证: - 格式与采集答案和 playbook 一致 - diagramType 在支持时显式声明 - 布局方向反映在坐标或生成器专属字段 - 复杂 Draw.io 与 Excalidraw 图表提供显式 geometry - 容器层级合法 - 边为顶层元素 - 文本与连接器规则符合所选格式 生成后检查保存文件,确认格式专属属性存在。protocol service器代码变更时,运行 npm run test:diagrams.

调用 connector 工具生成

来源于7w4.net。

调用 generate_diagram,传入 diagram_spec 与可选 filename 或 output_path:

{
  "diagram_spec": "<规范对象>",
  "filename": "architecture-overview.drawio"
}

服务器校验 schema、创建缺失目录、未提供输出路径时写入配置的默认目录.

配置助手(补充)

查看配置: get_config() 更新单格式路径:

{
  "format": "drawio",
  "path": "custom/drawio-path"
}

适用范围

{
  "format": "drawio",
  "diagramType": "architecture",
  "title": "电商系统架构",
  "elements": [
    {
      "id": "gateway-tier",
      "type": "container",
      "name": "接入层",
      "geometry": { "x": 0, "y": 0, "width": 800, "height": 120 },
      "children": [
        { "id": "api-gw", "type": "node", "name": "API Gateway" },
        { "id": "lb", "type": "node", "name": "Load Balancer" }
      ]
    },
    {
      "id": "service-tier",
      "type": "container",
      "name": "服务层",
      "geometry": { "x": 0, "y": 140, "width": 800, "height": 200 },
      "children": [
        { "id": "user-svc", "type": "node", "name": "用户服务" },
        { "id": "order-svc", "type": "node", "name": "订单服务" },
        { "id": "payment-svc", "type": "node", "name": "支付服务" }
      ]
    },
    { "type": "edge", "source": "api-gw", "target": "user-svc" },
    { "type": "edge", "source": "api-gw", "target": "order-svc" },
    { "type": "edge", "source": "order-svc", "target": "payment-svc" }
  ]
}

调用生成: { "diagram_spec": "<上述规范>", "filename": "ecommerce-arch.drawio" } 输出: diagrams/drawio/ecommerce-arch.drawio 文件路径 说明: 容器分层反映接入层与服务层,边为顶层元素连接跨层节点。垂直布局适合 PPT 横屏展示,显式 geometry 确保层级间距可控.

案例二： 跨部门报销审批泳道图

场景: 财务团队需要规范报销审批流程,涉及员工、直属主管、财务、出纳四个角色 读取 references/playbook-swimlane.md,确定: 图类型=泳道,格式=Draw.io,方向=水平. 构建规范(节选):

{
  "format": "drawio",
  "diagramType": "swimlane",
  "title": "报销审批流程",
  "elements": [
    { "id": "lane-employee", "type": "swimlane", "name": "员工", "geometry": { "x": 0, "y": 0, "width": 1200, "height": 150 } },
    { "id": "lane-manager", "type": "swimlane", "name": "主管", "geometry": { "x": 0, "y": 150, "width": 1200, "height": 150 } },
    { "id": "lane-finance", "type": "swimlane", "name": "财务", "geometry": { "x": 0, "y": 300, "width": 1200, "height": 150 } },
    { "id": "lane-cashier", "type": "swimlane", "name": "出纳", "geometry": { "x": 0, "y": 450, "width": 1200, "height": 150 } },
    { "id": "submit", "type": "node", "name": "提交报销单", "parent": "lane-employee" },
    { "id": "approve-1", "type": "node", "name": "主管审批", "parent": "lane-manager" },
    { "id": "approve-2", "type": "node", "name": "财务复核", "parent": "lane-finance" },
    { "id": "pay", "type": "node", "name": "打款", "parent": "lane-cashier" },
    { "type": "edge", "source": "submit", "target": "approve-1" },
    { "type": "edge", "source": "approve-1", "target": "approve-2" },
    { "type": "edge", "source": "approve-2", "target": "pay" }
  ]
}

输出: diagrams/drawio/expense-approval.drawio 文件路径 说明: 水平泳道清晰呈现跨部门交接,每条 lane 的 geometry 控制纵向位置,边跨 lane 连接体现流转方向.

案例三： 用户登录时序图嵌入文档

场景: 文档团队需要在 markdown 文档中嵌入用户登录时序图,要求可直接在代码仓库渲染 读取 references/playbook-uml.md,确定: 图类型=时序,格式=Mermaid,方向=自动. 构建规范:

{
  "format": "mermaid",
  "diagramType": "sequence",
  "title": "用户登录时序",
  "elements": [
    { "id": "user", "type": "actor", "name": "用户" },
    { "id": "client", "type": "participant", "name": "前端" },
    { "id": "auth", "type": "participant", "name": "鉴权服务" },
    { "id": "db", "type": "participant", "name": "数据库" },
    { "type": "message", "source": "user", "target": "client", "label": "输入账号密码" },
    { "type": "message", "source": "client", "target": "auth", "label": "POST /login" },
    { "type": "message", "source": "auth", "target": "db", "label": "查询用户" },
    { "type": "message", "source": "db", "target": "auth", "label": "返回用户记录" },
    { "type": "message", "source": "auth", "target": "client", "label": "返回 JWT" }
  ]
}

输出: diagrams/mermaid/user-login.mmd 文件路径,内容可直接复制到 markdown 代码块渲染 说明: Mermaid 时序图代码仓库友好,actor/participant/message 类型映射 Mermaid 语法,生成后可直接嵌入 markdown 代码块.

错误处理策略

{
  "success": true,
  "data": {
    "result": "Diagram生成器处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "diagram-generator"
    }
  },
  "execution_log": [
    "解析输入参数",
    "执行核心处理",
    "格式化输出结果"
  ],
  "error": null
}

问题处理指引

依赖说明

运行环境

• Agent 平台: 支持SKILL.md的任意AI Agent
• 操作系统: Windows / macOS / Linux

可用性分类

• 分类: MD（纯Markdown指令，通过自然语言驱动Agent完成操作）
• 说明: 基于Markdown的AI Skill，通过自然语言指令驱动Agent完成操作。

这是一款实用的图表生成工具，支持多种常见格式和图表类型，文档配有详细案例和错误处理说明，新手也能快速上手。优点是功能覆盖全面、指引清晰；不足之处是文档有些冗余重复，部分说明不够准确，效率提升的数据可能过于乐观。质量中规中矩，适合需要频繁制作图表的用户使用。