--- name: diagram-generator description: 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. Natural Language Creation: Create new diagrams based on simple text descriptions. Legacy File Support: Read and modify existing .drawio, .mmd (Mermaid), or Excalidraw files. MCP Server Integration: Utilizes a dedicated MCP server (mcp-diagram-generator) to generate files, which minimizes token consumption and ensures consistent output formatting. Automated Configuration: * Default Output Path: Diagrams are saved to diagrams/{format}/ within the project directory. Customization: Supports custom file paths and automatic directory creation. version： 1.1.1 ---

Diagram Generator

Overview

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.

> Contact Information If you encounter any issues, please contact AlkaidY at [email protected].

Prerequisites Check

IMPORTANT: This skill requires the mcp-diagram-generator MCP server to be installed and configured.

Quick Verification

Before using this skill, verify the MCP server is available by checking if you can access these tools:

• mcp__mcp-diagram-generator__get_config
• mcp__mcp-diagram-generator__generate_diagram
• mcp__mcp-diagram-generator__init_config

If these tools are NOT available, you need to configure the MCP server first (see below).

Installation & Configuration

Option 1: Using npx (Recommended - Auto-downloads the package)

Add the following to your Claude Code configuration file:

• Global config (~/.claude.json) for all projects, or
• Project config (.claude.json) for specific project

{
  "mcpServers": {
    "mcp-diagram-generator": {
      "command": "npx",
      "args": ["-y", "mcp-diagram-generator"]
    }
  }
}

After adding this configuration:

1. Restart Claude Code
2. The MCP server will auto-download via npx on first use
3. No manual installation needed

Option 2: Local Development (For developers)

If you're developing the MCP server locally:

{
  "mcpServers": {
    "mcp-diagram-generator": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-diagram-generator/dist/index.js"]
    }
  }
}

Verification Steps

After configuration, verify it works:

1. Check configuration: Call get_config() tool
2. If successful, you'll see current paths and initialization status
3. If the tool doesn't exist, check your configuration file syntax

Common Issues

Issue: "Tool not found" error

• Solution: MCP server not configured. Follow installation steps above.

Issue: Configuration looks correct but tools still not available

• Solution: Restart Claude Code to reload MCP server configuration

Quick Start

First Time Use

On first use, the MCP server will automatically:

1. Create default configuration file (.diagram-config.json)
2. Create default output directories if they don't exist
3. Use sensible defaults: diagrams/{format}/

You can customize paths at any time using the init_config tool.

Basic Usage

Simple example - just provide diagram spec, let the server handle the rest:

User: "创建一个网络拓扑图"

Skill will:

1. Generate JSON spec
2. Call generate_diagram with only diagram_spec parameter
3. Server auto-creates directories and saves to diagrams/{format}/{title}-{date}.{ext}

Workflow

Step 1: Understand Requirements

Extract from user's natural language:

• Diagram type: flowchart, sequence diagram, class diagram, ER diagram, mindmap, architecture diagram, network topology
• Content: nodes, relationships, nested structure (for network topology)
• Style/theme: if mentioned (e.g., "clean style", "detailed")
• Output preferences: specific filename? custom path?

Step 2: Choose Format

Use format-selection-guide.md to decide:

| Format | Best For | |--------|----------| | drawio | Complex diagrams, network topology with nested containers, fine-grained styling, manual editing | | mermaid | Quick generation, code-friendly, version control, documentation | | excalidraw | Hand-drawn style, creative/diagrammatic flexibility, informal sketches |

Step 3: Generate Structured JSON

Create a JSON description following the JSON Schema. Key structure:

{
  "format": "drawio",
  "title": "diagram name",
  "elements": [
    {
      "id": "unique-id",
      "type": "container|node|edge",
      "name": "display name",
      "level": "environment|datacenter|zone|device", // for network topology
      "style": {...},
      "geometry": {...},
      "children": [...] // for nested containers
    }
  ]
}

Important: Use unique IDs for all elements. For nested structures, maintain parent-child relationships.

Step 4: Call MCP Server

Option A: Use defaults (recommended)

{
  "diagram_spec": <the JSON object created above>
  // output_path is optional - server will use configured default
  // filename is optional - server will auto-generate based on title and date
}

The MCP server will:

• Validate the JSON schema
• Generate the appropriate XML/JSON/markdown
• Auto-create output directories if needed
• Save to configured default path (e.g., diagrams/drawio/network-topology-2025-02-03.drawio)

Option B: Specify custom path

{
  "diagram_spec": <the JSON object>,
  "output_path": "custom/path/to/diagram.drawio",
  "filename": "my-custom-name" // optional, overrides auto-generated filename
}

Option C: Just provide filename, use default directory

{
  "diagram_spec": <the JSON object>,
  "filename": "my-diagram.drawio"
  // Saves to diagrams/{format}/my-diagram.drawio
}

Step 5: Editing Existing Diagrams

1. Read the existing file to understand structure
2. Parse the diagram (use MCP tool if available, or read raw file)
3. Modify the JSON description based on user's change request
4. Generate new diagram (overwrite or create new file)

Configuration Management

Initialize Configuration

Initialize with defaults:

Call: init_config()
Result: Creates .diagram-config.json with default paths

Initialize with custom paths:

Call: init_config({
  paths: {
    drawio: "output/diagrams/drawio",
    mermaid: "output/diagrams/mermaid",
    excalidraw: "output/diagrams/excalidraw"
  }
})

View Current Configuration

Call: get_config()
Returns: Current paths and initialization status

Update Single Path

Call: set_output_path({
  format: "drawio",
  path: "custom/drawio-path"
})

Supported Diagram Types

Flowchart

• Simple process flows, decision trees
• Use mermaid for quick output
• Use drawio for complex layouts with multiple branches

Sequence Diagram

• Show interactions over time between components
• mermaid recommended (native support)
• Use drawio if custom styling needed

Class Diagram

• Show classes, methods, relationships
• mermaid recommended (compact, standard UML)
• drawio for detailed diagrams with many classes

ER Diagram

• Database schema, entity relationships
• mermaid recommended
• drawio for complex schemas with many relationships

Mindmap

• Hierarchical ideas, brainstorming
• mermaid recommended (native support)
• excalidraw for creative/hand-drawn style

Architecture Diagram

• System architecture, component relationships
• drawio recommended for complex systems
• mermaid for high-level overviews

...