Mermaid Diagrams

This is a comprehensive reference for creating Mermaid diagrams in your Claude conversations. You get syntax guides and working examples for flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and more niche stuff like mindmaps and user journeys. The skill includes a React component implementation if you want to render these in a web app, plus styling options and practical tips about direction modifiers and label formatting. It's basically a cheat sheet that saves you from constantly checking the Mermaid docs. The examples are solid and cover real use cases like API flows and database schemas, not just toy demonstrations.

skills.sh installs: 408
GitHub stars: 296
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hoodini/ai-agents-skills --skill mermaid-diagrams --agent claude-code

Installs into .claude/skills of the current project.

Files

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 TD
    A[Start] --> B{Is it valid?}
    B -->|Yes| C[Process data]
    B -->|No| D[Show error]
    C --> E[Save to database]
    D --> F[Return to input]
    E --> G[End]
    F --> A

Flowchart Syntax

flowchart TD          %% TD = top-down, LR = left-right, RL, BT
    A[Rectangle]      %% Square brackets = rectangle
    B(Rounded)        %% Parentheses = rounded rectangle
    C{Diamond}        %% Curly braces = diamond/decision
    D[[Subroutine]]   %% Double brackets = subroutine
    E[(Database)]     %% Cylinder shape
    F((Circle))       %% Double parentheses = circle
    G>Asymmetric]     %% Flag shape

    A --> B           %% Arrow
    B --- C           %% Line without arrow
    C -.-> D          %% Dotted arrow
    D ==> E           %% Thick arrow
    E --text--> F     %% Arrow with label
    F -->|label| G    %% Alternative label syntax

SKILL.md on GitHub