{
  "schemaVersion": "1.0",
  "item": {
    "slug": "diagram-generator",
    "name": "diagram-generator",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/Matthewyin/diagram-generator",
    "canonicalUrl": "https://clawhub.ai/Matthewyin/diagram-generator",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/diagram-generator",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=diagram-generator",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "package.json",
      "SKILL.md",
      "references/format-selection-guide.md",
      "references/json-schema-guide.md",
      "references/network-topology-examples.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T17:22:31.273Z",
      "expiresAt": "2026-05-14T17:22:31.273Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
        "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/diagram-generator"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/diagram-generator",
    "agentPageUrl": "https://openagent3.xyz/skills/diagram-generator/agent",
    "manifestUrl": "https://openagent3.xyz/skills/diagram-generator/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/diagram-generator/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Overview",
        "body": "Generate and edit diagrams in multiple formats (drawio, mermaid, excalidraw) by creating structured JSON descriptions and delegating file generation to the mcp-diagram-generator MCP server.\n\nContact Information If you encounter any issues, please contact AlkaidY at tccio2023@gmail.com."
      },
      {
        "title": "Prerequisites Check",
        "body": "IMPORTANT: This skill requires the mcp-diagram-generator MCP server to be installed and configured."
      },
      {
        "title": "Quick Verification",
        "body": "Before using this skill, verify the MCP server is available by checking if you can access these tools:\n\nmcp__mcp-diagram-generator__get_config\nmcp__mcp-diagram-generator__generate_diagram\nmcp__mcp-diagram-generator__init_config\n\nIf these tools are NOT available, you need to configure the MCP server first (see below)."
      },
      {
        "title": "Installation & Configuration",
        "body": "Option 1: Using npx (Recommended - Auto-downloads the package)\n\nAdd the following to your Claude Code configuration file:\n\nGlobal config (~/.claude.json) for all projects, or\nProject config (.claude.json) for specific project\n\n{\n  \"mcpServers\": {\n    \"mcp-diagram-generator\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-diagram-generator\"]\n    }\n  }\n}\n\nAfter adding this configuration:\n\nRestart Claude Code\nThe MCP server will auto-download via npx on first use\nNo manual installation needed\n\nOption 2: Local Development (For developers)\n\nIf you're developing the MCP server locally:\n\n{\n  \"mcpServers\": {\n    \"mcp-diagram-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"/absolute/path/to/mcp-diagram-generator/dist/index.js\"]\n    }\n  }\n}"
      },
      {
        "title": "Verification Steps",
        "body": "After configuration, verify it works:\n\nCheck configuration: Call get_config() tool\nIf successful, you'll see current paths and initialization status\nIf the tool doesn't exist, check your configuration file syntax"
      },
      {
        "title": "Common Issues",
        "body": "Issue: \"Tool not found\" error\n\nSolution: MCP server not configured. Follow installation steps above.\n\nIssue: Configuration looks correct but tools still not available\n\nSolution: Restart Claude Code to reload MCP server configuration"
      },
      {
        "title": "First Time Use",
        "body": "On first use, the MCP server will automatically:\n\nCreate default configuration file (.diagram-config.json)\nCreate default output directories if they don't exist\nUse sensible defaults: diagrams/{format}/\n\nYou can customize paths at any time using the init_config tool."
      },
      {
        "title": "Basic Usage",
        "body": "Simple example - just provide diagram spec, let the server handle the rest:\n\nUser: \"创建一个网络拓扑图\"\n\nSkill will:\n\nGenerate JSON spec\nCall generate_diagram with only diagram_spec parameter\nServer auto-creates directories and saves to diagrams/{format}/{title}-{date}.{ext}"
      },
      {
        "title": "Step 1: Understand Requirements",
        "body": "Extract from user's natural language:\n\nDiagram type: flowchart, sequence diagram, class diagram, ER diagram, mindmap, architecture diagram, network topology\nContent: nodes, relationships, nested structure (for network topology)\nStyle/theme: if mentioned (e.g., \"clean style\", \"detailed\")\nOutput preferences: specific filename? custom path?"
      },
      {
        "title": "Step 2: Choose Format",
        "body": "Use format-selection-guide.md to decide:\n\nFormatBest FordrawioComplex diagrams, network topology with nested containers, fine-grained styling, manual editingmermaidQuick generation, code-friendly, version control, documentationexcalidrawHand-drawn style, creative/diagrammatic flexibility, informal sketches"
      },
      {
        "title": "Step 3: Generate Structured JSON",
        "body": "Create a JSON description following the JSON Schema. Key structure:\n\n{\n  \"format\": \"drawio\",\n  \"title\": \"diagram name\",\n  \"elements\": [\n    {\n      \"id\": \"unique-id\",\n      \"type\": \"container|node|edge\",\n      \"name\": \"display name\",\n      \"level\": \"environment|datacenter|zone|device\", // for network topology\n      \"style\": {...},\n      \"geometry\": {...},\n      \"children\": [...] // for nested containers\n    }\n  ]\n}\n\nImportant: Use unique IDs for all elements. For nested structures, maintain parent-child relationships."
      },
      {
        "title": "Step 4: Call MCP Server",
        "body": "Option A: Use defaults (recommended)\n\n{\n  \"diagram_spec\": <the JSON object created above>\n  // output_path is optional - server will use configured default\n  // filename is optional - server will auto-generate based on title and date\n}\n\nThe MCP server will:\n\nValidate the JSON schema\nGenerate the appropriate XML/JSON/markdown\nAuto-create output directories if needed\nSave to configured default path (e.g., diagrams/drawio/network-topology-2025-02-03.drawio)\n\nOption B: Specify custom path\n\n{\n  \"diagram_spec\": <the JSON object>,\n  \"output_path\": \"custom/path/to/diagram.drawio\",\n  \"filename\": \"my-custom-name\" // optional, overrides auto-generated filename\n}\n\nOption C: Just provide filename, use default directory\n\n{\n  \"diagram_spec\": <the JSON object>,\n  \"filename\": \"my-diagram.drawio\"\n  // Saves to diagrams/{format}/my-diagram.drawio\n}"
      },
      {
        "title": "Step 5: Editing Existing Diagrams",
        "body": "Read the existing file to understand structure\nParse the diagram (use MCP tool if available, or read raw file)\nModify the JSON description based on user's change request\nGenerate new diagram (overwrite or create new file)"
      },
      {
        "title": "Initialize Configuration",
        "body": "Initialize with defaults:\n\nCall: init_config()\nResult: Creates .diagram-config.json with default paths\n\nInitialize with custom paths:\n\nCall: init_config({\n  paths: {\n    drawio: \"output/diagrams/drawio\",\n    mermaid: \"output/diagrams/mermaid\",\n    excalidraw: \"output/diagrams/excalidraw\"\n  }\n})"
      },
      {
        "title": "View Current Configuration",
        "body": "Call: get_config()\nReturns: Current paths and initialization status"
      },
      {
        "title": "Update Single Path",
        "body": "Call: set_output_path({\n  format: \"drawio\",\n  path: \"custom/drawio-path\"\n})"
      },
      {
        "title": "Flowchart",
        "body": "Simple process flows, decision trees\nUse mermaid for quick output\nUse drawio for complex layouts with multiple branches"
      },
      {
        "title": "Sequence Diagram",
        "body": "Show interactions over time between components\nmermaid recommended (native support)\nUse drawio if custom styling needed"
      },
      {
        "title": "Class Diagram",
        "body": "Show classes, methods, relationships\nmermaid recommended (compact, standard UML)\ndrawio for detailed diagrams with many classes"
      },
      {
        "title": "ER Diagram",
        "body": "Database schema, entity relationships\nmermaid recommended\ndrawio for complex schemas with many relationships"
      },
      {
        "title": "Mindmap",
        "body": "Hierarchical ideas, brainstorming\nmermaid recommended (native support)\nexcalidraw for creative/hand-drawn style"
      },
      {
        "title": "Architecture Diagram",
        "body": "System architecture, component relationships\ndrawio recommended for complex systems\nmermaid for high-level overviews"
      },
      {
        "title": "Network Topology",
        "body": "Network environments, datacenters, zones, devices\nMust use drawio (4-layer nesting: environment → datacenter → zone → device)\nSee network-topology-examples.md for patterns"
      },
      {
        "title": "Network Topology Special Notes",
        "body": "Network topology diagrams require a 4-level hierarchical structure:\n\nEnvironment (level=\"environment\")\n  └── Datacenter (level=\"datacenter\")\n        └── Zone (level=\"zone\")\n              └── Device (type=\"node\")\n\nStyle conventions:\n\nEnvironment: fillColor: #e1d5e7, strokeColor: #9673a6 (purple)\nDatacenter: fillColor: #d5e8d4, strokeColor: #82b366 (green)\nZone: fillColor: #fff2cc, strokeColor: #d6b656 (yellow)\nDevice: Based on device type (router, switch, firewall, etc.)\n\nDevice types and styles:\n\nRouter: strokeColor: #607D8B (blue-gray)\nSwitch: strokeColor: #4CAF50 (green)\nFirewall: strokeColor: #F44336 (red)\nPC/Server: strokeColor: #607D8B (blue-gray)"
      },
      {
        "title": "Pattern 1: Simple Flowchart (Mermaid)",
        "body": "User: \"画一个用户登录流程图，包含登录验证、重定向、错误处理\"\n\nGenerate JSON:\n\n{\n  \"format\": \"mermaid\",\n  \"title\": \"用户登录流程\",\n  \"elements\": [\n    {\"type\": \"node\", \"id\": \"start\", \"name\": \"开始\", \"geometry\": {\"x\": 0, \"y\": 0}},\n    {\"type\": \"node\", \"id\": \"login\", \"name\": \"输入用户名密码\", \"geometry\": {\"x\": 0, \"y\": 100}},\n    {\"type\": \"node\", \"id\": \"validate\", \"name\": \"验证\", \"geometry\": {\"x\": 0, \"y\": 200}},\n    {\"type\": \"node\", \"id\": \"success\", \"name\": \"登录成功\", \"geometry\": {\"x\": -100, \"y\": 300}},\n    {\"type\": \"node\", \"id\": \"error\", \"name\": \"显示错误\", \"geometry\": {\"x\": 100, \"y\": 300}},\n    {\"type\": \"edge\", \"source\": \"start\", \"target\": \"login\"},\n    {\"type\": \"edge\", \"source\": \"login\", \"target\": \"validate\"},\n    {\"type\": \"edge\", \"source\": \"validate\", \"target\": \"success\", \"label\": \"成功\"},\n    {\"type\": \"edge\", \"source\": \"validate\", \"target\": \"error\", \"label\": \"失败\"}\n  ]\n}\n\nCall MCP:\n\ngenerate_diagram({\n  diagram_spec: <above JSON>,\n  format: \"mermaid\"\n  // No output_path needed - auto-saves to diagrams/mermaid/\n})"
      },
      {
        "title": "Pattern 2: Network Topology (Drawio)",
        "body": "User: \"创建一个网络拓扑图，包含省中心机房（上联区、汇聚区、终端区），连接到生产网\"\n\nGenerate JSON with nested containers (see json-schema-guide.md for details).\n\nCall MCP:\n\ngenerate_diagram({\n  diagram_spec: <network topology JSON>,\n  filename: \"省中心网络拓扑\" // Optional, for custom filename\n})"
      },
      {
        "title": "references/",
        "body": "format-selection-guide.md: When to use drawio vs mermaid vs excalidraw\njson-schema-guide.md: Complete JSON schema with examples for all diagram types\nnetwork-topology-examples.md: Example JSON for network topology patterns"
      },
      {
        "title": "assets/",
        "body": "No templates needed - MCP server handles all generation"
      },
      {
        "title": "scripts/",
        "body": "Not used - all generation delegated to MCP server"
      },
      {
        "title": "MCP Server Setup",
        "body": "If mcp-diagram-generator is not available, you need to install it.\n\nOption 1: Using npx (Recommended)\n\nAdd to your Claude Code/OpenCode settings:\n\n{\n  \"mcpServers\": {\n    \"diagram-generator\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-diagram-generator\"]\n    }\n  }\n}\n\nOption 2: Local Development\n\nInstall dependencies: cd mcp-diagram-generator && npm install\nBuild: npm run build\nConfigure with local path:\n\n{\n  \"mcpServers\": {\n    \"diagram-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"/absolute/path/to/mcp-diagram-generator/dist/index.js\"]\n    }\n  }\n}"
      },
      {
        "title": "Invalid JSON Schema",
        "body": "If MCP server returns validation error:\n\nCheck json-schema-guide.md\nVerify all required fields are present\nEnsure all IDs are unique\nCheck parent-child relationships"
      },
      {
        "title": "Directory Not Found",
        "body": "Old behavior: Error if directory doesn't exist\nNew behavior: Directory is created automatically ✅\n\nIf you still see directory errors:\n\nCheck write permissions for the project directory\nVerify configuration with get_config()\nReinitialize with init_config()"
      },
      {
        "title": "Wrong File Extension",
        "body": "The server automatically uses the correct extension based on format:\n\ndrawio → .drawio\nmermaid → .md\nexcalidraw → .excalidraw\n\nYou don't need to specify extension in filename parameter."
      },
      {
        "title": "Nested Container Issues (Network Topology)",
        "body": "Verify level field matches hierarchy (environment/datacenter/zone)\nCheck parent IDs are correct in child elements\nEnsure geometry coordinates are relative to parent container"
      },
      {
        "title": "1. Use Default Paths",
        "body": "Let the server manage output paths for consistency:\n\n{\n  \"diagram_spec\": <spec>\n  // Don't specify output_path unless necessary\n}"
      },
      {
        "title": "2. Provide Descriptive Titles",
        "body": "Titles are used for auto-generated filenames:\n\n{\n  \"title\": \"生产环境网络拓扑-亦庄与西五环\",\n  // Generates: 生产环境网络拓扑-亦庄与西五环-2025-02-03.drawio\n}"
      },
      {
        "title": "3. Use Configuration for Custom Paths",
        "body": "Instead of specifying output_path every time, configure once:\n\nFirst time: init_config({ paths: { drawio: \"custom/path\" } })\nAfter that: Just use generate_diagram() without output_path"
      },
      {
        "title": "4. Check Configuration When Troubleshooting",
        "body": "get_config() // Shows all paths and status"
      }
    ],
    "body": "Diagram Generator\nOverview\n\nGenerate and edit diagrams in multiple formats (drawio, mermaid, excalidraw) by creating structured JSON descriptions and delegating file generation to the mcp-diagram-generator MCP server.\n\nContact Information If you encounter any issues, please contact AlkaidY at tccio2023@gmail.com.\n\nPrerequisites Check\n\nIMPORTANT: This skill requires the mcp-diagram-generator MCP server to be installed and configured.\n\nQuick Verification\n\nBefore using this skill, verify the MCP server is available by checking if you can access these tools:\n\nmcp__mcp-diagram-generator__get_config\nmcp__mcp-diagram-generator__generate_diagram\nmcp__mcp-diagram-generator__init_config\n\nIf these tools are NOT available, you need to configure the MCP server first (see below).\n\nInstallation & Configuration\n\nOption 1: Using npx (Recommended - Auto-downloads the package)\n\nAdd the following to your Claude Code configuration file:\n\nGlobal config (~/.claude.json) for all projects, or\nProject config (.claude.json) for specific project\n{\n  \"mcpServers\": {\n    \"mcp-diagram-generator\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-diagram-generator\"]\n    }\n  }\n}\n\n\nAfter adding this configuration:\n\nRestart Claude Code\nThe MCP server will auto-download via npx on first use\nNo manual installation needed\n\nOption 2: Local Development (For developers)\n\nIf you're developing the MCP server locally:\n\n{\n  \"mcpServers\": {\n    \"mcp-diagram-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"/absolute/path/to/mcp-diagram-generator/dist/index.js\"]\n    }\n  }\n}\n\nVerification Steps\n\nAfter configuration, verify it works:\n\nCheck configuration: Call get_config() tool\nIf successful, you'll see current paths and initialization status\nIf the tool doesn't exist, check your configuration file syntax\nCommon Issues\n\nIssue: \"Tool not found\" error\n\nSolution: MCP server not configured. Follow installation steps above.\n\nIssue: Configuration looks correct but tools still not available\n\nSolution: Restart Claude Code to reload MCP server configuration\nQuick Start\nFirst Time Use\n\nOn first use, the MCP server will automatically:\n\nCreate default configuration file (.diagram-config.json)\nCreate default output directories if they don't exist\nUse sensible defaults: diagrams/{format}/\n\nYou can customize paths at any time using the init_config tool.\n\nBasic Usage\n\nSimple example - just provide diagram spec, let the server handle the rest:\n\nUser: \"创建一个网络拓扑图\"\n\n\nSkill will:\n\nGenerate JSON spec\nCall generate_diagram with only diagram_spec parameter\nServer auto-creates directories and saves to diagrams/{format}/{title}-{date}.{ext}\nWorkflow\nStep 1: Understand Requirements\n\nExtract from user's natural language:\n\nDiagram type: flowchart, sequence diagram, class diagram, ER diagram, mindmap, architecture diagram, network topology\nContent: nodes, relationships, nested structure (for network topology)\nStyle/theme: if mentioned (e.g., \"clean style\", \"detailed\")\nOutput preferences: specific filename? custom path?\nStep 2: Choose Format\n\nUse format-selection-guide.md to decide:\n\nFormat\tBest For\ndrawio\tComplex diagrams, network topology with nested containers, fine-grained styling, manual editing\nmermaid\tQuick generation, code-friendly, version control, documentation\nexcalidraw\tHand-drawn style, creative/diagrammatic flexibility, informal sketches\nStep 3: Generate Structured JSON\n\nCreate a JSON description following the JSON Schema. Key structure:\n\n{\n  \"format\": \"drawio\",\n  \"title\": \"diagram name\",\n  \"elements\": [\n    {\n      \"id\": \"unique-id\",\n      \"type\": \"container|node|edge\",\n      \"name\": \"display name\",\n      \"level\": \"environment|datacenter|zone|device\", // for network topology\n      \"style\": {...},\n      \"geometry\": {...},\n      \"children\": [...] // for nested containers\n    }\n  ]\n}\n\n\nImportant: Use unique IDs for all elements. For nested structures, maintain parent-child relationships.\n\nStep 4: Call MCP Server\n\nOption A: Use defaults (recommended)\n\n{\n  \"diagram_spec\": <the JSON object created above>\n  // output_path is optional - server will use configured default\n  // filename is optional - server will auto-generate based on title and date\n}\n\n\nThe MCP server will:\n\nValidate the JSON schema\nGenerate the appropriate XML/JSON/markdown\nAuto-create output directories if needed\nSave to configured default path (e.g., diagrams/drawio/network-topology-2025-02-03.drawio)\n\nOption B: Specify custom path\n\n{\n  \"diagram_spec\": <the JSON object>,\n  \"output_path\": \"custom/path/to/diagram.drawio\",\n  \"filename\": \"my-custom-name\" // optional, overrides auto-generated filename\n}\n\n\nOption C: Just provide filename, use default directory\n\n{\n  \"diagram_spec\": <the JSON object>,\n  \"filename\": \"my-diagram.drawio\"\n  // Saves to diagrams/{format}/my-diagram.drawio\n}\n\nStep 5: Editing Existing Diagrams\nRead the existing file to understand structure\nParse the diagram (use MCP tool if available, or read raw file)\nModify the JSON description based on user's change request\nGenerate new diagram (overwrite or create new file)\nConfiguration Management\nInitialize Configuration\n\nInitialize with defaults:\n\nCall: init_config()\nResult: Creates .diagram-config.json with default paths\n\n\nInitialize with custom paths:\n\nCall: init_config({\n  paths: {\n    drawio: \"output/diagrams/drawio\",\n    mermaid: \"output/diagrams/mermaid\",\n    excalidraw: \"output/diagrams/excalidraw\"\n  }\n})\n\nView Current Configuration\nCall: get_config()\nReturns: Current paths and initialization status\n\nUpdate Single Path\nCall: set_output_path({\n  format: \"drawio\",\n  path: \"custom/drawio-path\"\n})\n\nSupported Diagram Types\nFlowchart\nSimple process flows, decision trees\nUse mermaid for quick output\nUse drawio for complex layouts with multiple branches\nSequence Diagram\nShow interactions over time between components\nmermaid recommended (native support)\nUse drawio if custom styling needed\nClass Diagram\nShow classes, methods, relationships\nmermaid recommended (compact, standard UML)\ndrawio for detailed diagrams with many classes\nER Diagram\nDatabase schema, entity relationships\nmermaid recommended\ndrawio for complex schemas with many relationships\nMindmap\nHierarchical ideas, brainstorming\nmermaid recommended (native support)\nexcalidraw for creative/hand-drawn style\nArchitecture Diagram\nSystem architecture, component relationships\ndrawio recommended for complex systems\nmermaid for high-level overviews\nNetwork Topology\nNetwork environments, datacenters, zones, devices\nMust use drawio (4-layer nesting: environment → datacenter → zone → device)\nSee network-topology-examples.md for patterns\nNetwork Topology Special Notes\n\nNetwork topology diagrams require a 4-level hierarchical structure:\n\nEnvironment (level=\"environment\")\n  └── Datacenter (level=\"datacenter\")\n        └── Zone (level=\"zone\")\n              └── Device (type=\"node\")\n\n\nStyle conventions:\n\nEnvironment: fillColor: #e1d5e7, strokeColor: #9673a6 (purple)\nDatacenter: fillColor: #d5e8d4, strokeColor: #82b366 (green)\nZone: fillColor: #fff2cc, strokeColor: #d6b656 (yellow)\nDevice: Based on device type (router, switch, firewall, etc.)\n\nDevice types and styles:\n\nRouter: strokeColor: #607D8B (blue-gray)\nSwitch: strokeColor: #4CAF50 (green)\nFirewall: strokeColor: #F44336 (red)\nPC/Server: strokeColor: #607D8B (blue-gray)\nCommon Patterns\nPattern 1: Simple Flowchart (Mermaid)\n\nUser: \"画一个用户登录流程图，包含登录验证、重定向、错误处理\"\n\nGenerate JSON:\n\n{\n  \"format\": \"mermaid\",\n  \"title\": \"用户登录流程\",\n  \"elements\": [\n    {\"type\": \"node\", \"id\": \"start\", \"name\": \"开始\", \"geometry\": {\"x\": 0, \"y\": 0}},\n    {\"type\": \"node\", \"id\": \"login\", \"name\": \"输入用户名密码\", \"geometry\": {\"x\": 0, \"y\": 100}},\n    {\"type\": \"node\", \"id\": \"validate\", \"name\": \"验证\", \"geometry\": {\"x\": 0, \"y\": 200}},\n    {\"type\": \"node\", \"id\": \"success\", \"name\": \"登录成功\", \"geometry\": {\"x\": -100, \"y\": 300}},\n    {\"type\": \"node\", \"id\": \"error\", \"name\": \"显示错误\", \"geometry\": {\"x\": 100, \"y\": 300}},\n    {\"type\": \"edge\", \"source\": \"start\", \"target\": \"login\"},\n    {\"type\": \"edge\", \"source\": \"login\", \"target\": \"validate\"},\n    {\"type\": \"edge\", \"source\": \"validate\", \"target\": \"success\", \"label\": \"成功\"},\n    {\"type\": \"edge\", \"source\": \"validate\", \"target\": \"error\", \"label\": \"失败\"}\n  ]\n}\n\n\nCall MCP:\n\ngenerate_diagram({\n  diagram_spec: <above JSON>,\n  format: \"mermaid\"\n  // No output_path needed - auto-saves to diagrams/mermaid/\n})\n\nPattern 2: Network Topology (Drawio)\n\nUser: \"创建一个网络拓扑图，包含省中心机房（上联区、汇聚区、终端区），连接到生产网\"\n\nGenerate JSON with nested containers (see json-schema-guide.md for details).\n\nCall MCP:\n\ngenerate_diagram({\n  diagram_spec: <network topology JSON>,\n  filename: \"省中心网络拓扑\" // Optional, for custom filename\n})\n\nResources\nreferences/\nformat-selection-guide.md: When to use drawio vs mermaid vs excalidraw\njson-schema-guide.md: Complete JSON schema with examples for all diagram types\nnetwork-topology-examples.md: Example JSON for network topology patterns\nassets/\nNo templates needed - MCP server handles all generation\nscripts/\nNot used - all generation delegated to MCP server\nTroubleshooting\nMCP Server Setup\n\nIf mcp-diagram-generator is not available, you need to install it.\n\nOption 1: Using npx (Recommended)\n\nAdd to your Claude Code/OpenCode settings:\n\n{\n  \"mcpServers\": {\n    \"diagram-generator\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-diagram-generator\"]\n    }\n  }\n}\n\n\nOption 2: Local Development\n\nInstall dependencies: cd mcp-diagram-generator && npm install\nBuild: npm run build\nConfigure with local path:\n{\n  \"mcpServers\": {\n    \"diagram-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"/absolute/path/to/mcp-diagram-generator/dist/index.js\"]\n    }\n  }\n}\n\nInvalid JSON Schema\n\nIf MCP server returns validation error:\n\nCheck json-schema-guide.md\nVerify all required fields are present\nEnsure all IDs are unique\nCheck parent-child relationships\nDirectory Not Found\n\nOld behavior: Error if directory doesn't exist New behavior: Directory is created automatically ✅\n\nIf you still see directory errors:\n\nCheck write permissions for the project directory\nVerify configuration with get_config()\nReinitialize with init_config()\nWrong File Extension\n\nThe server automatically uses the correct extension based on format:\n\ndrawio → .drawio\nmermaid → .md\nexcalidraw → .excalidraw\n\nYou don't need to specify extension in filename parameter.\n\nNested Container Issues (Network Topology)\nVerify level field matches hierarchy (environment/datacenter/zone)\nCheck parent IDs are correct in child elements\nEnsure geometry coordinates are relative to parent container\nBest Practices\n1. Use Default Paths\n\nLet the server manage output paths for consistency:\n\n{\n  \"diagram_spec\": <spec>\n  // Don't specify output_path unless necessary\n}\n\n2. Provide Descriptive Titles\n\nTitles are used for auto-generated filenames:\n\n{\n  \"title\": \"生产环境网络拓扑-亦庄与西五环\",\n  // Generates: 生产环境网络拓扑-亦庄与西五环-2025-02-03.drawio\n}\n\n3. Use Configuration for Custom Paths\n\nInstead of specifying output_path every time, configure once:\n\nFirst time: init_config({ paths: { drawio: \"custom/path\" } })\nAfter that: Just use generate_diagram() without output_path\n\n4. Check Configuration When Troubleshooting\nget_config() // Shows all paths and status"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/Matthewyin/diagram-generator",
    "publisherUrl": "https://clawhub.ai/Matthewyin/diagram-generator",
    "owner": "Matthewyin",
    "version": "1.1.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/diagram-generator",
    "downloadUrl": "https://openagent3.xyz/downloads/diagram-generator",
    "agentUrl": "https://openagent3.xyz/skills/diagram-generator/agent",
    "manifestUrl": "https://openagent3.xyz/skills/diagram-generator/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/diagram-generator/agent.md"
  }
}