photonics-dhl Mermaid Diagram Generation Skill
Overview
This skill generates Mermaid diagrams for visualizing knowledge structures, workflows, and relationships. Mermaid diagrams are rendered as SVGs and embedded directly in Markdown/ Obsidian.
Mermaid MCP Tools
The following MCP tools are available:
generate_mermaid_diagram- Generate Mermaid diagram as base64 PNG, SVG, or Mermaid code
Diagram Types
| Type | Best For | Mermaid Keyword |
|---|---|---|
| Flowchart | Processes, decision trees | graph |
| Sequence | Interactions, protocols | sequenceDiagram |
| Class | OOP structures | classDiagram |
| State | State machines | stateDiagram |
| ER | Database schemas | erDiagram |
| Gantt | Timelines | gantt |
| Pie | Distributions | pie |
| Mindmap | brainstorming | mindmap |
Common Patterns
Knowledge Tree (Recommended for Optics Research)
graph TD
A[Optics] --> B[Geometric Optics]
A --> C[Wave Optics]
A --> D[Quantum Optics]
B --> B1[Lens Theory]
B --> B2[Mirror Systems]
C --> C1[Interference]
C --> C2[Diffraction]
D --> D1[Photonics]
D --> D2[Quantum Info]
Flowchart for Process
graph LR
A[Input] --> B[Process]
B --> C{Decision}
C -->|Yes| D[Output 1]
C -->|No| E[Output 2]
Sequence Diagram
sequenceDiagram
A->>B: Request
B->>C: Forward
C-->>B: Response
B-->>A: Result
State Diagram
stateDiagram-v2
[*] --> State1
State1 --> State2: Transition
State2 --> [*]
Usage Guidelines
When to Use Mermaid vs Other Tools
| Use Case | Tool | Why |
|---|---|---|
| Knowledge tree | Mermaid | Free, fast, editable |
| Simple flowchart | Mermaid | Standard, integrated |
| Architecture diagram | diagram-generator | More control |
| Realistic illustration | image-generation | Photorealistic |
| Technical schematic | image-generation | Detailed rendering |
Recommended Parameters
output_type: "svg" # SVG for crisp rendering at any size
theme: "default" # default/base/forest/dark/neutral
backgroundColor: "white" # or transparent
Example Prompts
User: "生成太赫兹知识体系的知识树"
graph TD
A["THz Technology"] --> B["THz Sources"]
A --> C["THz Detection"]
A --> D["THz TDS"]
A --> E["THz Imaging"]
B --> B1["PCA"]
B --> B2["Optical Rectification"]
B --> B3["QCL"]
C --> C1["PC Sampling"]
C --> C2["EOS"]
D --> D1["Reflection TDS"]
D --> D2["Transmission TDS"]
User: "画一个光电导天线发射太赫兹的流程"
graph LR
A["Femtosecond Laser"] --> B["PCA Antenna"]
B --> C["Photo carriers"]
C --> D["dJ/dt"]
D --> E["THz Pulse"]
style A fill:#f9f,stroke:#333
style E fill:#9f9,stroke:#333
Best Practices
- Use consistent naming -
[Node]for nodes,"Label"for labels - Add styling - Use
stylefor emphasis on key nodes - Keep it simple - Break complex diagrams into smaller ones
- Use appropriate direction -
TD(top-down) for trees,LR(left-right) for flows - Add colors sparingly - for emphasis, not decoration
Integration with Project
- Generate Mermaid code
- Save to Obsidian note with code block:
```mermaid - Or use
generate_mermaid_diagramMCP for rendered image - Save to:
Obsidian-Vault/6️⃣ 工具/visualizations/ - Insert reference:
![[visualizations/diagram.png]]
Error Handling
If Mermaid generation fails:
- Check syntax - common issues with special characters
- Simplify the graph structure
- Remove non-ASCII characters from labels
- Try SVG output instead of base64
- Fall back to text description
Notes
- Mermaid is free and doesn't consume API quota
- For Obsidian, install "Excalidraw" or "Mermaid" plugin for live preview
- Complex diagrams may render better as image-generation
- mindmap syntax is newer - test compatibility