diagram-generator

name

diagram-generator

description

Advanced diagram generation skill supporting DrawIO, Mermaid, and Excalidraw formats for creating professional technical diagrams. **Trigger when**: User says "生成图表", "DrawIO", "excalidraw", "专业技术图", "architecture diagram", "系统架构图", "wireframe" **Also trigger when**: User wants: - Professional architecture diagrams - UML diagrams with more detail than Mermaid - Interactive diagrams (Excalidraw) - Technical drawings with precise shapes - Network diagrams - UI wireframes **DO NOT trigger for**: Simple flowcharts (use mermaid), photo-realistic images (use image-generation). Make sure to use this skill when the user needs more sophisticated diagrams than Mermaid can provide, or when they specifically request DrawIO/Excalidraw format.

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

Format	Best For	File Extension
DrawIO	Technical diagrams, architecture	.drawio
Mermaid	Flowcharts, simple diagrams	.mmd or embedded
Excalidraw	Hand-drawn style, collaborative	.excalidraw

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

Diagram Type	Format	Example
Architecture	DrawIO	Microservices, network topology
Simple flowchart	Mermaid	Quick process visualization
Brainstorming	Excalidraw	Collaborative sketching
Technical spec	DrawIO	Detailed component diagrams
Presentation	Excalidraw	Hand-drawn aesthetic

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

出版级示意图规范（源自 K-Dense scientific-schematics）

字体与排版

参数	Nature/Science 标准	普通期刊
最小字号	7 pt（final print size）	8 pt
字体族	Arial / Helvetica（sans-serif）	同左
标题字号	8-10 pt bold	10-12 pt
坐标轴标注	7-8 pt，含单位	8-9 pt

线条与颜色

参数	规范
最小线宽	0.5 pt（Nature）；0.75 pt（一般期刊）
常用线宽	1-2 pt（主体），0.5 pt（辅助线/网格）
色彩空间	RGB（屏幕）→ CMYK（印刷时转换）
色盲友好	使用 Okabe-Ito 色板，避免纯红/绿对比
灰度兼容	必须在灰度下可区分（冗余编码：形状+颜色）

分辨率与格式

用途	格式	DPI
LaTeX 论文	PDF / EPS（矢量）	N/A
网页预印本	SVG（矢量）	N/A
光栅备份	PNG / TIFF	≥300 DPI
海报	PDF（矢量）	300 DPI

质量自查清单

• 最终尺寸下字号 ≥ 7 pt（可用 ImageMagick identify -verbose 验证）
• 线宽 ≥ 0.5 pt，无断裂/锯齿
• 色盲模拟通过（Coblis / Color Oracle 工具）
• 灰度打印可区分所有元素
• 所有标注含单位，缩写与正文一致
• 矢量格式优先，避免位图文字

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