[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MVCWED274JYJ2X4F0N9VPY":3,"skill-same:01M6MVCWED274JYJ2X4F0N9VPY":74},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":14,"categories":15,"keywords":21,"publishedAt":25,"linkOnly":26,"markdownContent":27,"markdownBody":28,"frontMatter":29,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":6,"ownerHtmlUrl":35,"ownerBlogUrl":6,"ownerDescription":36,"updatedAt":37,"install":38,"resources":51},"01M6MVCWED274JYJ2X4F0N9VPY","diagram-generator",null,"Kernel8901\u002Fai-agent-skills-classification","Kernel8901","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F72647553?v=4","01M6KV388J2H5PNC8D8P940BJD","01M6KV38CS5B3AY63RKZB410YM",7,"MIT","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002FPDF及文件\u002Fdiagram-generator\u002FSKILL.md",[16],{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[22,23,24],"diagram","diagram generator","generator","2026-11-10 10:12:30",false,"---\nname: diagram-generator\ndescription: Generate and edit various types of diagrams (including draw.io, Mermaid, and Excalidraw). This tool supports common diagram types such as flowcharts, sequence diagrams, class diagrams, Entity-Relationship (ER) diagrams, mind maps, architecture diagrams, and network topologies.\nNatural Language Creation: Create new diagrams based on simple text descriptions.\nLegacy File Support: Read and modify existing .drawio, .mmd (Mermaid), or Excalidraw files.\nMCP Server Integration: Utilizes a dedicated MCP server (mcp-diagram-generator) to generate files, which minimizes token consumption and ensures consistent output formatting.\nAutomated Configuration: * Default Output Path: Diagrams are saved to diagrams\u002F{format}\u002F within the project directory.\nCustomization: Supports custom file paths and automatic directory creation.\nversion： 1.1.1\n---\n\n# Diagram Generator\n\n## Overview\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\n> **Contact Information** If you encounter any issues, please contact **AlkaidY** at [tccio2023@gmail.com](mailto:tccio2023@gmail.com).\n\n## Prerequisites Check\n\n**IMPORTANT**: This skill requires the `mcp-diagram-generator` MCP server to be installed and configured.\n\n### Quick Verification\n\nBefore using this skill, verify the MCP server is available by checking if you can access these tools:\n- `mcp__mcp-diagram-generator__get_config`\n- `mcp__mcp-diagram-generator__generate_diagram`\n- `mcp__mcp-diagram-generator__init_config`\n\nIf these tools are **NOT available**, you need to configure the MCP server first (see below).\n\n### Installation & Configuration\n\n**Option 1: Using npx (Recommended - Auto-downloads the package)**\n\nAdd the following to your Claude Code configuration file:\n\n- **Global config** (`~\u002F.claude.json`) for all projects, or\n- **Project config** (`.claude.json`) for specific project\n\n```json\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:\n1. Restart Claude Code\n2. The MCP server will auto-download via npx on first use\n3. No manual installation needed\n\n**Option 2: Local Development (For developers)**\n\nIf you're developing the MCP server locally:\n\n```json\n{\n  \"mcpServers\": {\n    \"mcp-diagram-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"\u002Fabsolute\u002Fpath\u002Fto\u002Fmcp-diagram-generator\u002Fdist\u002Findex.js\"]\n    }\n  }\n}\n```\n\n### Verification Steps\n\nAfter configuration, verify it works:\n\n1. Check configuration: Call `get_config()` tool\n2. If successful, you'll see current paths and initialization status\n3. If the tool doesn't exist, check your configuration file syntax\n\n### Common Issues\n\n**Issue**: \"Tool not found\" error\n- **Solution**: MCP server not configured. Follow installation steps above.\n\n**Issue**: Configuration looks correct but tools still not available\n- **Solution**: Restart Claude Code to reload MCP server configuration\n\n## Quick Start\n\n### First Time Use\n\nOn first use, the MCP server will automatically:\n1. Create default configuration file (`.diagram-config.json`)\n2. Create default output directories if they don't exist\n3. Use sensible defaults: `diagrams\u002F{format}\u002F`\n\nYou can customize paths at any time using the `init_config` tool.\n\n### Basic Usage\n\n**Simple example** - just provide diagram spec, let the server handle the rest:\n\n```\nUser: \"创建一个网络拓扑图\"\n```\n\nSkill will:\n1. Generate JSON spec\n2. Call `generate_diagram` with only `diagram_spec` parameter\n3. Server auto-creates directories and saves to `diagrams\u002F{format}\u002F{title}-{date}.{ext}`\n\n## Workflow\n\n### Step 1: Understand Requirements\n\nExtract from user's natural language:\n- **Diagram type**: flowchart, sequence diagram, class diagram, ER diagram, mindmap, architecture diagram, network topology\n- **Content**: nodes, relationships, nested structure (for network topology)\n- **Style\u002Ftheme**: if mentioned (e.g., \"clean style\", \"detailed\")\n- **Output preferences**: specific filename? custom path?\n\n### Step 2: Choose Format\n\nUse [format-selection-guide.md](references\u002Fformat-selection-guide.md) to decide:\n\n| Format | Best For |\n|--------|----------|\n| **drawio** | Complex diagrams, network topology with nested containers, fine-grained styling, manual editing |\n| **mermaid** | Quick generation, code-friendly, version control, documentation |\n| **excalidraw** | Hand-drawn style, creative\u002Fdiagrammatic flexibility, informal sketches |\n\n### Step 3: Generate Structured JSON\n\nCreate a JSON description following the [JSON Schema](references\u002Fjson-schema-guide.md). Key structure:\n\n```json\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\", \u002F\u002F for network topology\n      \"style\": {...},\n      \"geometry\": {...},\n      \"children\": [...] \u002F\u002F for nested containers\n    }\n  ]\n}\n```\n\n**Important**: Use unique IDs for all elements. For nested structures, maintain parent-child relationships.\n\n### Step 4: Call MCP Server\n\n**Option A: Use defaults (recommended)**\n\n```json\n{\n  \"diagram_spec\": \u003Cthe JSON object created above>\n  \u002F\u002F output_path is optional - server will use configured default\n  \u002F\u002F filename is optional - server will auto-generate based on title and date\n}\n```\n\nThe MCP server will:\n- Validate the JSON schema\n- Generate the appropriate XML\u002FJSON\u002Fmarkdown\n- Auto-create output directories if needed\n- Save to configured default path (e.g., `diagrams\u002Fdrawio\u002Fnetwork-topology-2025-02-03.drawio`)\n\n**Option B: Specify custom path**\n\n```json\n{\n  \"diagram_spec\": \u003Cthe JSON object>,\n  \"output_path\": \"custom\u002Fpath\u002Fto\u002Fdiagram.drawio\",\n  \"filename\": \"my-custom-name\" \u002F\u002F optional, overrides auto-generated filename\n}\n```\n\n**Option C: Just provide filename, use default directory**\n\n```json\n{\n  \"diagram_spec\": \u003Cthe JSON object>,\n  \"filename\": \"my-diagram.drawio\"\n  \u002F\u002F Saves to diagrams\u002F{format}\u002Fmy-diagram.drawio\n}\n```\n\n### Step 5: Editing Existing Diagrams\n\n1. **Read the existing file** to understand structure\n2. **Parse** the diagram (use MCP tool if available, or read raw file)\n3. **Modify** the JSON description based on user's change request\n4. **Generate** new diagram (overwrite or create new file)\n\n## Configuration Management\n\n### Initialize Configuration\n\n**Initialize with defaults:**\n```\nCall: init_config()\nResult: Creates .diagram-config.json with default paths\n```\n\n**Initialize with custom paths:**\n```\nCall: init_config({\n  paths: {\n    drawio: \"output\u002Fdiagrams\u002Fdrawio\",\n    mermaid: \"output\u002Fdiagrams\u002Fmermaid\",\n    excalidraw: \"output\u002Fdiagrams\u002Fexcalidraw\"\n  }\n})\n```\n\n### View Current Configuration\n\n```\nCall: get_config()\nReturns: Current paths and initialization status\n```\n\n### Update Single Path\n\n```\nCall: set_output_path({\n  format: \"drawio\",\n  path: \"custom\u002Fdrawio-path\"\n})\n```\n\n## Supported Diagram Types\n\n### Flowchart\n- Simple process flows, decision trees\n- Use **mermaid** for quick output\n- Use **drawio** for complex layouts with multiple branches\n\n### Sequence Diagram\n- Show interactions over time between components\n- **mermaid** recommended (native support)\n- Use **drawio** if custom styling needed\n\n### Class Diagram\n- Show classes, methods, relationships\n- **mermaid** recommended (compact, standard UML)\n- **drawio** for detailed diagrams with many classes\n\n### ER Diagram\n- Database schema, entity relationships\n- **mermaid** recommended\n- **drawio** for complex schemas with many relationships\n\n### Mindmap\n- Hierarchical ideas, brainstorming\n- **mermaid** recommended (native support)\n- **excalidraw** for creative\u002Fhand-drawn style\n\n### Architecture Diagram\n- System architecture, component relationships\n- **drawio** recommended for complex systems\n- **mermaid** for high-level overviews\n\n### Network Topology\n- Network environments, datacenters, zones, devices\n- **Must use drawio** (4-layer nesting: environment → datacenter → zone → device)\n- See [network-topology-examples.md](references\u002Fnetwork-topology-examples.md) for patterns\n\n## Network Topology Special Notes\n\nNetwork topology diagrams require a 4-level hierarchical structure:\n\n```\nEnvironment (level=\"environment\")\n  └── Datacenter (level=\"datacenter\")\n        └── Zone (level=\"zone\")\n              └── Device (type=\"node\")\n```\n\n**Style conventions**:\n- **Environment**: `fillColor: #e1d5e7`, `strokeColor: #9673a6` (purple)\n- **Datacenter**: `fillColor: #d5e8d4`, `strokeColor: #82b366` (green)\n- **Zone**: `fillColor: #fff2cc`, `strokeColor: #d6b656` (yellow)\n- **Device**: Based on device type (router, switch, firewall, etc.)\n\n**Device types and styles**:\n- Router: `strokeColor: #607D8B` (blue-gray)\n- Switch: `strokeColor: #4CAF50` (green)\n- Firewall: `strokeColor: #F44336` (red)\n- PC\u002FServer: `strokeColor: #607D8B` (blue-gray)\n\n## Common Patterns\n\n### Pattern 1: Simple Flowchart (Mermaid)\n\nUser: \"画一个用户登录流程图，包含登录验证、重定向、错误处理\"\n\nGenerate JSON:\n```json\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: \u003Cabove JSON>,\n  format: \"mermaid\"\n  \u002F\u002F No output_path needed - auto-saves to diagrams\u002Fmermaid\u002F\n})\n```\n\n### Pattern 2: Network Topology (Drawio)\n\nUser: \"创建一个网络拓扑图，包含省中心机房（上联区、汇聚区、终端区），连接到生产网\"\n\nGenerate JSON with nested containers (see [json-schema-guide.md](references\u002Fjson-schema-guide.md) for details).\n\nCall MCP:\n```\ngenerate_diagram({\n  diagram_spec: \u003Cnetwork topology JSON>,\n  filename: \"省中心网络拓扑\" \u002F\u002F Optional, for custom filename\n})\n```\n\n## Resources\n\n### references\u002F\n- **format-selection-guide.md**: When to use drawio vs mermaid vs excalidraw\n- **json-schema-guide.md**: Complete JSON schema with examples for all diagram types\n- **network-topology-examples.md**: Example JSON for network topology patterns\n\n### assets\u002F\n- No templates needed - MCP server handles all generation\n\n### scripts\u002F\n- Not used - all generation delegated to MCP server\n\n## Troubleshooting\n\n### MCP Server Setup\n\nIf `mcp-diagram-generator` is not available, you need to install it.\n\n**Option 1: Using npx (Recommended)**\n\nAdd to your Claude Code\u002FOpenCode settings:\n\n```json\n{\n  \"mcpServers\": {\n    \"diagram-generator\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-diagram-generator\"]\n    }\n  }\n}\n```\n\n**Option 2: Local Development**\n\n1. Install dependencies: `cd mcp-diagram-generator && npm install`\n2. Build: `npm run build`\n3. Configure with local path:\n```json\n{\n  \"mcpServers\": {\n    \"diagram-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"\u002Fabsolute\u002Fpath\u002Fto\u002Fmcp-diagram-generator\u002Fdist\u002Findex.js\"]\n    }\n  }\n}\n```\n\n### Invalid JSON Schema\n\nIf MCP server returns validation error:\n1. Check [json-schema-guide.md](references\u002Fjson-schema-guide.md)\n2. Verify all required fields are present\n3. Ensure all IDs are unique\n4. Check parent-child relationships\n\n### Directory Not Found\n\n**Old behavior**: Error if directory doesn't exist\n**New behavior**: Directory is created automatically ✅\n\nIf you still see directory errors:\n1. Check write permissions for the project directory\n2. Verify configuration with `get_config()`\n3. Reinitialize with `init_config()`\n\n### Wrong File Extension\n\nThe server automatically uses the correct extension based on format:\n- drawio → `.drawio`\n- mermaid → `.md`\n- excalidraw → `.excalidraw`\n\nYou don't need to specify extension in filename parameter.\n\n### Nested Container Issues (Network Topology)\n\n- Verify `level` field matches hierarchy (environment\u002Fdatacenter\u002Fzone)\n- Check `parent` IDs are correct in child elements\n- Ensure geometry coordinates are relative to parent container\n\n## Best Practices\n\n### 1. Use Default Paths\n\nLet the server manage output paths for consistency:\n\n```json\n{\n  \"diagram_spec\": \u003Cspec>\n  \u002F\u002F Don't specify output_path unless necessary\n}\n```\n\n### 2. Provide Descriptive Titles\n\nTitles are used for auto-generated filenames:\n\n```json\n{\n  \"title\": \"生产环境网络拓扑-亦庄与西五环\",\n  \u002F\u002F Generates: 生产环境网络拓扑-亦庄与西五环-2025-02-03.drawio\n}\n```\n\n### 3. Use Configuration for Custom Paths\n\nInstead of specifying output_path every time, configure once:\n\n```\nFirst time: init_config({ paths: { drawio: \"custom\u002Fpath\" } })\nAfter that: Just use generate_diagram() without output_path\n```\n\n### 4. Check Configuration When Troubleshooting\n\n```\nget_config() \u002F\u002F Shows all paths and status\n```\n","# Diagram Generator\n\n## Overview\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\n> **Contact Information** If you encounter any issues, please contact **AlkaidY** at [tccio2023@gmail.com](mailto:tccio2023@gmail.com).\n\n## Prerequisites Check\n\n**IMPORTANT**: This skill requires the `mcp-diagram-generator` MCP server to be installed and configured.\n\n### Quick Verification\n\nBefore using this skill, verify the MCP server is available by checking if you can access these tools:\n- `mcp__mcp-diagram-generator__get_config`\n- `mcp__mcp-diagram-generator__generate_diagram`\n- `mcp__mcp-diagram-generator__init_config`\n\nIf these tools are **NOT available**, you need to configure the MCP server first (see below).\n\n### Installation & Configuration\n\n**Option 1: Using npx (Recommended - Auto-downloads the package)**\n\nAdd the following to your Claude Code configuration file:\n\n- **Global config** (`~\u002F.claude.json`) for all projects, or\n- **Project config** (`.claude.json`) for specific project\n\n```json\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:\n1. Restart Claude Code\n2. The MCP server will auto-download via npx on first use\n3. No manual installation needed\n\n**Option 2: Local Development (For developers)**\n\nIf you're developing the MCP server locally:\n\n```json\n{\n  \"mcpServers\": {\n    \"mcp-diagram-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"\u002Fabsolute\u002Fpath\u002Fto\u002Fmcp-diagram-generator\u002Fdist\u002Findex.js\"]\n    }\n  }\n}\n```\n\n### Verification Steps\n\nAfter configuration, verify it works:\n\n1. Check configuration: Call `get_config()` tool\n2. If successful, you'll see current paths and initialization status\n3. If the tool doesn't exist, check your configuration file syntax\n\n### Common Issues\n\n**Issue**: \"Tool not found\" error\n- **Solution**: MCP server not configured. Follow installation steps above.\n\n**Issue**: Configuration looks correct but tools still not available\n- **Solution**: Restart Claude Code to reload MCP server configuration\n\n## Quick Start\n\n### First Time Use\n\nOn first use, the MCP server will automatically:\n1. Create default configuration file (`.diagram-config.json`)\n2. Create default output directories if they don't exist\n3. Use sensible defaults: `diagrams\u002F{format}\u002F`\n\nYou can customize paths at any time using the `init_config` tool.\n\n### Basic Usage\n\n**Simple example** - just provide diagram spec, let the server handle the rest:\n\n```\nUser: \"创建一个网络拓扑图\"\n```\n\nSkill will:\n1. Generate JSON spec\n2. Call `generate_diagram` with only `diagram_spec` parameter\n3. Server auto-creates directories and saves to `diagrams\u002F{format}\u002F{title}-{date}.{ext}`\n\n## Workflow\n\n### Step 1: Understand Requirements\n\nExtract from user's natural language:\n- **Diagram type**: flowchart, sequence diagram, class diagram, ER diagram, mindmap, architecture diagram, network topology\n- **Content**: nodes, relationships, nested structure (for network topology)\n- **Style\u002Ftheme**: if mentioned (e.g., \"clean style\", \"detailed\")\n- **Output preferences**: specific filename? custom path?\n\n### Step 2: Choose Format\n\nUse [format-selection-guide.md](references\u002Fformat-selection-guide.md) to decide:\n\n| Format | Best For |\n|--------|----------|\n| **drawio** | Complex diagrams, network topology with nested containers, fine-grained styling, manual editing |\n| **mermaid** | Quick generation, code-friendly, version control, documentation |\n| **excalidraw** | Hand-drawn style, creative\u002Fdiagrammatic flexibility, informal sketches |\n\n### Step 3: Generate Structured JSON\n\nCreate a JSON description following the [JSON Schema](references\u002Fjson-schema-guide.md). Key structure:\n\n```json\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\", \u002F\u002F for network topology\n      \"style\": {...},\n      \"geometry\": {...},\n      \"children\": [...] \u002F\u002F for nested containers\n    }\n  ]\n}\n```\n\n**Important**: Use unique IDs for all elements. For nested structures, maintain parent-child relationships.\n\n### Step 4: Call MCP Server\n\n**Option A: Use defaults (recommended)**\n\n```json\n{\n  \"diagram_spec\": \u003Cthe JSON object created above>\n  \u002F\u002F output_path is optional - server will use configured default\n  \u002F\u002F filename is optional - server will auto-generate based on title and date\n}\n```\n\nThe MCP server will:\n- Validate the JSON schema\n- Generate the appropriate XML\u002FJSON\u002Fmarkdown\n- Auto-create output directories if needed\n- Save to configured default path (e.g., `diagrams\u002Fdrawio\u002Fnetwork-topology-2025-02-03.drawio`)\n\n**Option B: Specify custom path**\n\n```json\n{\n  \"diagram_spec\": \u003Cthe JSON object>,\n  \"output_path\": \"custom\u002Fpath\u002Fto\u002Fdiagram.drawio\",\n  \"filename\": \"my-custom-name\" \u002F\u002F optional, overrides auto-generated filename\n}\n```\n\n**Option C: Just provide filename, use default directory**\n\n```json\n{\n  \"diagram_spec\": \u003Cthe JSON object>,\n  \"filename\": \"my-diagram.drawio\"\n  \u002F\u002F Saves to diagrams\u002F{format}\u002Fmy-diagram.drawio\n}\n```\n\n### Step 5: Editing Existing Diagrams\n\n1. **Read the existing file** to understand structure\n2. **Parse** the diagram (use MCP tool if available, or read raw file)\n3. **Modify** the JSON description based on user's change request\n4. **Generate** new diagram (overwrite or create new file)\n\n## Configuration Management\n\n### Initialize Configuration\n\n**Initialize with defaults:**\n```\nCall: init_config()\nResult: Creates .diagram-config.json with default paths\n```\n\n**Initialize with custom paths:**\n```\nCall: init_config({\n  paths: {\n    drawio: \"output\u002Fdiagrams\u002Fdrawio\",\n    mermaid: \"output\u002Fdiagrams\u002Fmermaid\",\n    excalidraw: \"output\u002Fdiagrams\u002Fexcalidraw\"\n  }\n})\n```\n\n### View Current Configuration\n\n```\nCall: get_config()\nReturns: Current paths and initialization status\n```\n\n### Update Single Path\n\n```\nCall: set_output_path({\n  format: \"drawio\",\n  path: \"custom\u002Fdrawio-path\"\n})\n```\n\n## Supported Diagram Types\n\n### Flowchart\n- Simple process flows, decision trees\n- Use **mermaid** for quick output\n- Use **drawio** for complex layouts with multiple branches\n\n### Sequence Diagram\n- Show interactions over time between components\n- **mermaid** recommended (native support)\n- Use **drawio** if custom styling needed\n\n### Class Diagram\n- Show classes, methods, relationships\n- **mermaid** recommended (compact, standard UML)\n- **drawio** for detailed diagrams with many classes\n\n### ER Diagram\n- Database schema, entity relationships\n- **mermaid** recommended\n- **drawio** for complex schemas with many relationships\n\n### Mindmap\n- Hierarchical ideas, brainstorming\n- **mermaid** recommended (native support)\n- **excalidraw** for creative\u002Fhand-drawn style\n\n### Architecture Diagram\n- System architecture, component relationships\n- **drawio** recommended for complex systems\n- **mermaid** for high-level overviews\n\n### Network Topology\n- Network environments, datacenters, zones, devices\n- **Must use drawio** (4-layer nesting: environment → datacenter → zone → device)\n- See [network-topology-examples.md](references\u002Fnetwork-topology-examples.md) for patterns\n\n## Network Topology Special Notes\n\nNetwork topology diagrams require a 4-level hierarchical structure:\n\n```\nEnvironment (level=\"environment\")\n  └── Datacenter (level=\"datacenter\")\n        └── Zone (level=\"zone\")\n              └── Device (type=\"node\")\n```\n\n**Style conventions**:\n- **Environment**: `fillColor: #e1d5e7`, `strokeColor: #9673a6` (purple)\n- **Datacenter**: `fillColor: #d5e8d4`, `strokeColor: #82b366` (green)\n- **Zone**: `fillColor: #fff2cc`, `strokeColor: #d6b656` (yellow)\n- **Device**: Based on device type (router, switch, firewall, etc.)\n\n**Device types and styles**:\n- Router: `strokeColor: #607D8B` (blue-gray)\n- Switch: `strokeColor: #4CAF50` (green)\n- Firewall: `strokeColor: #F44336` (red)\n- PC\u002FServer: `strokeColor: #607D8B` (blue-gray)\n\n## Common Patterns\n\n### Pattern 1: Simple Flowchart (Mermaid)\n\nUser: \"画一个用户登录流程图，包含登录验证、重定向、错误处理\"\n\nGenerate JSON:\n```json\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: \u003Cabove JSON>,\n  format: \"mermaid\"\n  \u002F\u002F No output_path needed - auto-saves to diagrams\u002Fmermaid\u002F\n})\n```\n\n### Pattern 2: Network Topology (Drawio)\n\nUser: \"创建一个网络拓扑图，包含省中心机房（上联区、汇聚区、终端区），连接到生产网\"\n\nGenerate JSON with nested containers (see [json-schema-guide.md](references\u002Fjson-schema-guide.md) for details).\n\nCall MCP:\n```\ngenerate_diagram({\n  diagram_spec: \u003Cnetwork topology JSON>,\n  filename: \"省中心网络拓扑\" \u002F\u002F Optional, for custom filename\n})\n```\n\n## Resources\n\n### references\u002F\n- **format-selection-guide.md**: When to use drawio vs mermaid vs excalidraw\n- **json-schema-guide.md**: Complete JSON schema with examples for all diagram types\n- **network-topology-examples.md**: Example JSON for network topology patterns\n\n### assets\u002F\n- No templates needed - MCP server handles all generation\n\n### scripts\u002F\n- Not used - all generation delegated to MCP server\n\n## Troubleshooting\n\n### MCP Server Setup\n\nIf `mcp-diagram-generator` is not available, you need to install it.\n\n**Option 1: Using npx (Recommended)**\n\nAdd to your Claude Code\u002FOpenCode settings:\n\n```json\n{\n  \"mcpServers\": {\n    \"diagram-generator\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-diagram-generator\"]\n    }\n  }\n}\n```\n\n**Option 2: Local Development**\n\n1. Install dependencies: `cd mcp-diagram-generator && npm install`\n2. Build: `npm run build`\n3. Configure with local path:\n```json\n{\n  \"mcpServers\": {\n    \"diagram-generator\": {\n      \"command\": \"node\",\n      \"args\": [\"\u002Fabsolute\u002Fpath\u002Fto\u002Fmcp-diagram-generator\u002Fdist\u002Findex.js\"]\n    }\n  }\n}\n```\n\n### Invalid JSON Schema\n\nIf MCP server returns validation error:\n1. Check [json-schema-guide.md](references\u002Fjson-schema-guide.md)\n2. Verify all required fields are present\n3. Ensure all IDs are unique\n4. Check parent-child relationships\n\n### Directory Not Found\n\n**Old behavior**: Error if directory doesn't exist\n**New behavior**: Directory is created automatically ✅\n\nIf you still see directory errors:\n1. Check write permissions for the project directory\n2. Verify configuration with `get_config()`\n3. Reinitialize with `init_config()`\n\n### Wrong File Extension\n\nThe server automatically uses the correct extension based on format:\n- drawio → `.drawio`\n- mermaid → `.md`\n- excalidraw → `.excalidraw`\n\nYou don't need to specify extension in filename parameter.\n\n### Nested Container Issues (Network Topology)\n\n- Verify `level` field matches hierarchy (environment\u002Fdatacenter\u002Fzone)\n- Check `parent` IDs are correct in child elements\n- Ensure geometry coordinates are relative to parent container\n\n## Best Practices\n\n### 1. Use Default Paths\n\nLet the server manage output paths for consistency:\n\n```json\n{\n  \"diagram_spec\": \u003Cspec>\n  \u002F\u002F Don't specify output_path unless necessary\n}\n```\n\n### 2. Provide Descriptive Titles\n\nTitles are used for auto-generated filenames:\n\n```json\n{\n  \"title\": \"生产环境网络拓扑-亦庄与西五环\",\n  \u002F\u002F Generates: 生产环境网络拓扑-亦庄与西五环-2025-02-03.drawio\n}\n```\n\n### 3. Use Configuration for Custom Paths\n\nInstead of specifying output_path every time, configure once:\n\n```\nFirst time: init_config({ paths: { drawio: \"custom\u002Fpath\" } })\nAfter that: Just use generate_diagram() without output_path\n```\n\n### 4. Check Configuration When Troubleshooting\n\n```\nget_config() \u002F\u002F Shows all paths and status\n```\n",{},"main","f4cb2d49f7667e79ef7804f50396d5aaffdf1f56","PDF及文件\u002Fdiagram-generator",1,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification","https:\u002F\u002Fgithub.com\u002FKernel8901","a little little little dobe in life but science geek","2026-04-05 16:43:56",{"source":7,"skillName":5,"commands":39,"prompt":49,"zipAvailable":50},[40,43,46],{"tool":41,"command":42},"npx","npx skills add Kernel8901\u002Fai-agent-skills-classification --skill diagram-generator",{"tool":44,"command":45},"bunx","bunx skills add Kernel8901\u002Fai-agent-skills-classification --skill diagram-generator",{"tool":47,"command":48},"pnpm","pnpm dlx skills add Kernel8901\u002Fai-agent-skills-classification --skill diagram-generator","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002FPDF及文件\u002Fdiagram-generator\u002FSKILL.md",true,[52,58,62,66,70],{"path":53,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":56,"sourceHtmlUrl":57},"_meta.json","REFERENCE","参考文档",644,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002FPDF及文件\u002Fdiagram-generator\u002F_meta.json",{"path":59,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":60,"sourceHtmlUrl":61},"package.json",134,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002FPDF及文件\u002Fdiagram-generator\u002Fpackage.json",{"path":63,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":64,"sourceHtmlUrl":65},"references\u002Fformat-selection-guide.md",5023,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002FPDF及文件\u002Fdiagram-generator\u002Freferences\u002Fformat-selection-guide.md",{"path":67,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":68,"sourceHtmlUrl":69},"references\u002Fjson-schema-guide.md",11969,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002FPDF及文件\u002Fdiagram-generator\u002Freferences\u002Fjson-schema-guide.md",{"path":71,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002Fnetwork-topology-examples.md",15261,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002FPDF及文件\u002Fdiagram-generator\u002Freferences\u002Fnetwork-topology-examples.md",[75,99,131,142,152,182],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":25},"01M6Q5R6WZ06RRB9RQTW54B34B","zyfai","Earn yield on any Ethereum wallet on Base, Arbitrum, and Plasma. Use when a user wants passive DeFi yield on their funds. Deploys a non-custodial subaccount (Safe) linked to their EOA, enables automated yield optimization, and lets them deposit\u002Fwithdraw anytime.","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fzyfai-sdk\u002FSKILL.md",[],[77,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98],"safe","ethereum","defi","Optimization","user","use","Wallet","base","deposit","withdraw","yield","arbitrum","non-custodial","passive","defi yield","earn","yield optimization",{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":113,"publishedAt":25},"01M6Q5R337B5JSNER4P4YS03TN","zerion-api","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fzerion-api\u002FSKILL.md",[104,107,108],{"categoryNo":105,"categoryName":106,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},{"categoryNo":109,"categoryName":110,"taxonomyType":111,"taxonomyTypeDesc":112},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[114,115,116,117,118,119,120,84,121,88,122,123,124,125,126,127,128,129,130],"api","zerion api","zerion","MCP","mcp server","server","blockchain","transactions","crypto wallet","crypto","evm","solana","query","across","positions","token","prices",{"skillNo":132,"name":133,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":139,"publishedAt":25},"01M6Q5QZFYTDAZMZ27BN5VZXAR","zerion-api-skill","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fzerion-api-skill\u002FSKILL.md",[136,137,138],{"categoryNo":105,"categoryName":106,"taxonomyType":19,"taxonomyTypeDesc":20},{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},{"categoryNo":109,"categoryName":110,"taxonomyType":111,"taxonomyTypeDesc":112},[114,140,141,115,116,117,118,119,120,84,121,88,123,124,125,126,127,128,129,130],"api skill","zerion api skill",{"skillNo":143,"name":144,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":150,"publishedAt":25},"01M6Q5QW17QW98RA3FE45E4RD8","zerion-api-mcp","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fzerion-api-mcp\u002FSKILL.md",[147,148,149],{"categoryNo":105,"categoryName":106,"taxonomyType":19,"taxonomyTypeDesc":20},{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},{"categoryNo":109,"categoryName":110,"taxonomyType":111,"taxonomyTypeDesc":112},[117,114,151,115,116,118,119,84,121,88,122,123,124,125,126,127,128,129,130],"zerion api mcp",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":161,"publishedAt":25},"01M6Q5QQYZB7A501BDEQWKGSJT","yahoo-finance-forex","Fetches real-time FOREX news and market data from Yahoo Finance for major currency pairs (EUR\u002FUSD, GBP\u002FUSD, USD\u002FJPY, etc.). Analyzes sentiment and provides trading context.","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fyahoo-finance-forex\u002FSKILL.md",[158],{"categoryNo":159,"categoryName":160,"taxonomyType":111,"taxonomyTypeDesc":112},"01JBSEEDCAT000000000000040","财务",[162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181],"finance","yahoo finance","forex","yahoo","yahoo finance forex","github","https","sentiment","real-time","python3","install","Market","usd","news","time","currency","gbp","pip","market data","for",{"skillNo":183,"name":184,"nameZh":6,"description":185,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":186,"categories":187,"keywords":189,"publishedAt":25},"01M6Q5QM6VS84WZVM7BKXXPF32","yahoo-finance","This skill should be used when the user asks to \"get stock prices\", \"check stock quotes\", \"look up earnings\", \"get financial data\", \"find trending stocks\", or needs stock market data from Yahoo Finance.","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fyahoo-finance-cli\u002FSKILL.md",[188],{"categoryNo":159,"categoryName":160,"taxonomyType":111,"taxonomyTypeDesc":112},[162,163,165,190,191,192,193,194,195,173,196,197,198,199,200,201,202,203,130,180],"cli","homebrew","find","check","brew","up","local","get","stock","link","trending","sf","quotes","ln"]