Agent skill · design visual · aiskillstore
mermaid-diagramming
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.
Why this skill is useful
Provides specific Mermaid syntax and examples tailored for Obsidian that enhance the AI's ability to create structured diagrams.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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. ⚠️ 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, milestones Timeline timeline Priority matrix, 2D positioning Quadrant Chart quadrantChart Flow visualization, proportional bands Sankey Diagram sankey-beta Numerical data visualization XY Chart xychart-beta Precise element positioning, layouts Block Diagram block-beta Cloud services, service relationships Architecture architecture-beta --- Quick Start Examples Flowchart Key syntax: Direction: TD (top-down), LR (left-right), BT, RL Shapes: [rect], (rounded), {diamond}, [(cylinder)], ((circle)) Arrows: -->, -.-> (dotted), ==> (thick) Labels: --> text or -- text --> For details: flowchart.md --- Sequence Diagram Key syntax: Arrows: ->> (sync), -->> (response), -) (asy …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/mermaid-diagramming