← ClaudeAtlas

mermaid-diagramminglisted

Create Mermaid diagrams in Obsidian including flowcharts, sequence diagrams, class diagrams, and more. Use when visualizing processes, system architectures, workflows, or any structured relationships in Obsidian notes.
aiskillstore/marketplace · ★ 329 · AI & Automation · score 79
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