Diagram Generator

Diagram Generator Skill

Overview

This skill generates professional technical diagrams in multiple formats: DrawIO (XML-based), Mermaid, and Excalidraw (hand-drawn style). Choose the format based on use case needs.

Diagram Generator MCP Tools

The following MCP tools are available:

• generate_diagram - Generate diagram from structured JSON spec
• get_config - Get current diagram configuration
• set_output_path - Set default output path
• validate_diagram_spec - Validate diagram specification

Supported Formats

Diagram Specification Structure

{
  "format": "drawio",
  "elements": [
    {
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "width": 200,
      "height": 100,
      "label": "Process",
      "style": "fillColor=#f3f3f3;strokeColor=#363636"
    },
    {
      "type": "arrow",
      "from": "node1",
      "to": "node2",
      "style": "endArrow=classic"
    }
  ],
  "theme": {
    "background": "#ffffff",
    "primary": "#0070c0"
  }
}

Element Types

Basic Shapes

• rectangle - Rounded rectangle
• ellipse - Circle/oval
• diamond - Decision rhombus
• parallelogram - Data/process
• cylinder - Database
• hexagon - Preparation

Connectors

• arrow - Directed arrow
• line - Simple line
• dashed_arrow - Dashed connector

Text

• text - Standalone text label

Usage Guidelines

When to Use Each Format

Recommended Parameters

format: "drawio"              # or "mermaid", "excalidraw"
output_path: "Obsidian-Vault/6️⃣ 工具/visualizations/"

Example Diagrams

Optical System Architecture (DrawIO)

{
  "format": "drawio",
  "elements": [
    {
      "type": "rectangle",
      "id": "laser",
      "x": 50,
      "y": 100,
      "width": 80,
      "height": 60,
      "label": "Ti:Sapphire\nLaser",
      "style": "fillColor=#e1e1e1;strokeColor=#000000"
    },
    {
      "type": "rectangle",
      "id": "pca",
      "x": 200,
      "y": 100,
      "width": 80,
      "height": 60,
      "label": "PCA\nEmitter",
      "style": "fillColor=#f3f3f3;strokeColor=#000000"
    },
    {
      "type": "arrow",
      "from": "laser",
      "to": "pca",
      "label": "Pump",
      "style": "endArrow=classic;strokeColor=#ff0000"
    }
  ]
}

Research Workflow (Excalidraw)

{
  "format": "excalidraw",
  "elements": [
    {
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "width": 150,
      "height": 80,
      "label": "Literature Review"
    }
  ]
}

Best Practices

1. Use DrawIO for technical precision - Coordinates, styles, exact shapes
2. Use Excalidraw for collaborative brainstorming - Hand-drawn aesthetic
3. Validate specs - Use validate_diagram_spec before generation
4. Set output path - Configure once, reuse for consistency
5. Combine with Mermaid - For complex diagrams, use Mermaid for parts

Integration with Project

1. Generate diagram with generate_diagram
2. Save to: Obsidian-Vault/6️⃣ 工具/visualizations/
3. Filename: {type}_{topic}_{date}.{format}
4. Insert in Obsidian:
   • DrawIO/Mermaid: ```mermaid or link to .drawio
   • Excalidraw: ![[visualizations/diagram.excalidraw]]
5. Run sync script if needed

Error Handling

If diagram generation fails:

1. Validate spec with validate_diagram_spec
2. Check element types are supported
3. Verify coordinates are valid numbers
4. Simplify - reduce number of elements
5. Try different format

Notes

• DrawIO files can be edited in draw.io app or VS Code extension
• Excalidraw supports collaboration
• For simple diagrams, Mermaid skill may be faster
• diagram-generator MCP can also output Mermaid format