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