# Diagram Generator

> 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.

- Skill: `photonics-dhl/diagram-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add photonics-dhl/diagram-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/photonics-dhl/diagram-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: photonics-dhl (https://skillmd.com/u/photonics-dhl)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/photonics-dhl/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

| 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

```json
{
  "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)

```json
{
  "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)

```json
{
  "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