mermaid-diagrams
Create diagrams and visualizations using Mermaid syntax. Use when generating flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, or any visual documentation. Triggers on Mermaid, flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, diagram, visu
By hoodini · 400 installs
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams
Source repository · Upstream listing
Mermaid Diagrams
Create diagrams and visualizations using Mermaid markdown syntax.
Quick Reference
Mermaid diagrams are written in markdown code blocks with mermaid as the language identifier.
Flowchart
Flowchart Syntax
Subgraphs
Sequence Diagram
Sequence Diagram Syntax
Class Diagram
Class Diagram Syntax
Entity Relationship Diagram
ER Diagram Cardinality
Gantt Chart
State Diagram
Pie Chart
Git Graph
User Journey
Mindmap
Styling
React Component
Tips
1. Direction : Use TD (top down), LR (left right), BT (bottom top), RL (right left)
2. Comments : Use %% for comments
3. Quotes : Use quotes for labels with special characters: A["Label with (parentheses)"]
4. Line breaks : Use <br/ for multi line labels
Resources
Mermaid Docs : https://mermaid.js.org/
Live Editor : https://mermaid.live
GitHub Support : Mermaid works natively in GitHub markdown