mermaid-diagramminglisted
Install: claude install-skill aiskillstore/marketplace
# Mermaid Diagramming in Obsidian
Obsidian has built-in Mermaid support. Use fenced code blocks with `mermaid` language identifier.
For common syntax (styling, comments, themes), see [reference.md](reference.md).
## ⚠️ Obsidian-Specific Constraints
**Rendering Differences**: Obsidian's Mermaid version may lag behind mermaid.js releases. Some cutting-edge features may not work.
**Theme Interaction**: Diagram colors adapt to Obsidian theme. Use explicit styles for consistent appearance across themes.
**Performance**: Very large diagrams (50+ nodes) may slow down rendering. Split into multiple diagrams if needed.
**Export**: PDF export converts diagrams to images. For external sharing, capture as PNG/SVG.
**No JavaScript**: Click events and JavaScript callbacks are disabled for security.
---
## Diagram Selection Guide
| Use Case | Diagram Type | Keyword |
|----------|--------------|---------|
| Process flow, decision trees | Flowchart | `flowchart` |
| API calls, message passing | Sequence | `sequenceDiagram` |
| OOP design, relationships | Class | `classDiagram` |
| Project timeline, scheduling | Gantt | `gantt` |
| State machine, lifecycle | State | `stateDiagram-v2` |
| Git branching strategy | Gitgraph | `gitGraph` |
| Brainstorming, hierarchies | Mindmap | `mindmap` |
| Proportions, percentages | Pie Chart | `pie` |
| Database schema, entities | ER Diagram | `erDiagram` |
| User experience steps, satisfaction | User Journey | `journey` |
| Historical events, mile