What diagram types does this skill support?

Mermaid supports class diagrams, sequence diagrams, flowcharts, entity relationship diagrams, C4 architecture diagrams, state diagrams, git graphs, Gantt charts, and pie/bar charts.

Can I use Mermaid diagrams in GitHub or GitLab?

Yes. GitHub and GitLab automatically render Mermaid diagrams in Markdown files without additional configuration.

How do I export Mermaid diagrams as images?

You can use the Mermaid Live Editor for online export, the Mermaid CLI (`mmdc` command), or Docker to convert `.mmd` files to PNG or SVG.

Does this skill cover styling and theming?

Yes. The skill includes configuration options for themes (default, forest, dark, neutral, base), layout algorithms (dagre, elk), and visual appearance (classic or hand-drawn look).

mermaid-diagrams by softaworks

Flowcharts

Flowcharts visualize processes, algorithms, decision trees, and user journeys. They show step-by-step progression through a system or workflow.

Basic Syntax

flowchart TD
    A --> B

Directions:

TD or TB - Top to Bottom (default)
BT - Bottom to Top
LR - Left to Right
RL - Right to Left

Node Shapes

Rectangle (default)

flowchart LR
    A[Process step]

Rounded Rectangle

flowchart LR
    B([Rounded process])

Stadium/Pill Shape

flowchart LR
    C(Start or End)

Subroutine (Double Border)

flowchart LR
    D[[Subroutine]]

Cylindrical (Database)

flowchart LR
    E[(Database)]

Circle

flowchart LR
    F((Circle node))

Asymmetric/Flag

flowchart LR
    G>Flag node]

Rhombus (Decision)

flowchart LR
    H{Decision?}

Hexagon

flowchart LR
    I{{Hexagon}}

Parallelogram (Input/Output)

flowchart LR
    J[/Input or Output/]
    K[\Alternative IO\]

Trapezoid

flowchart LR
    L[/Trapezoid\]
    M[\Alt trapezoid/]

Connections

Basic Arrow

flowchart LR
    A --> B

Open Link (No Arrow)

flowchart LR
    A --- B

Text on Links

flowchart LR
    A -->|Label text| B
    C ---|"Text with spaces"| D

Dotted Links

flowchart LR
    A -.-> B
    C -.- D
    E -.Label.-> F

Thick Links

flowchart LR
    A ==> B
    C === D
    E ==Label==> F

Chaining

flowchart LR
    A --> B --> C --> D
    E --> F & G --> H

Multi-directional

flowchart LR
    A --> B & C & D
    B & C & D --> E

Subgraphs

Group related nodes:

flowchart TB
    A[Start]
    
    subgraph Processing
        B[Step 1]
        C[Step 2]
        D[Step 3]
    end
    
    E[End]
    
    A --> B
    D --> E

Nested Subgraphs

flowchart TB
    subgraph Outer
        A[Node A]
        
        subgraph Inner
            B[Node B]
            C[Node C]
        end
    end

Subgraph Direction

flowchart LR
    subgraph one
        direction TB
        A1 --> A2
    end
    
    subgraph two
        direction TB
        B1 --> B2
    end
    
    one --> two

Styling

Individual Node Styling

flowchart LR
    A[Normal]
    B[Styled]
    
    style B fill:#ff6b6b,stroke:#333,stroke-width:4px,color:#fff

Class-based Styling

flowchart LR
    A[Node 1]:::className
    B[Node 2]:::className
    C[Node 3]
    
    classDef className fill:#f9f,stroke:#333,stroke-width:2px

Link Styling

flowchart LR
    A --> B
    linkStyle 0 stroke:#ff3,stroke-width:4px,color:red

Comprehensive Example: User Registration Flow

flowchart TD
    Start([User visits registration page]) --> Form[Show registration form]
    Form --> Input[User enters details]
    Input --> Validate{Valid input?}
    
    Validate -->|No| ShowError[Show validation errors]
    ShowError --> Form
    
    Validate -->|Yes| CheckEmail{Email exists?}
    
    CheckEmail -->|Yes| EmailError[Show 'Email already registered']
    EmailError --> Form
    
    CheckEmail -->|No| CreateAccount[Create user account]
    CreateAccount --> Hash[Hash password]
    Hash --> SaveDB[(Save to database)]
    SaveDB --> GenerateToken[Generate verification token]
    GenerateToken --> SendEmail[Send verification email]
    SendEmail --> ShowSuccess[Show success message]
    ShowSuccess --> End([Redirect to login])
    
    style Start fill:#90EE90,stroke:#333,stroke-width:2px
    style End fill:#90EE90,stroke:#333,stroke-width:2px
    style CreateAccount fill:#87CEEB,stroke:#333,stroke-width:2px
    style SaveDB fill:#FFD700,stroke:#333,stroke-width:2px

Algorithm Example: Binary Search

flowchart TD
    Start([Start Binary Search]) --> Init[Set low = 0, high = array.length - 1]
    Init --> Check{low <= high?}
    
    Check -->|No| NotFound[Return -1: Not found]
    NotFound --> End([End])
    
    Check -->|Yes| CalcMid[mid = low + (high - low) / 2]
    CalcMid --> Compare{array[mid] == target?}
    
    Compare -->|Yes| Found[Return mid: Found]
    Found --> End
    
    Compare -->|No| CheckLess{array[mid] < target?}
    
    CheckLess -->|Yes| MoveLow[low = mid + 1]
    MoveLow --> Check
    
    CheckLess -->|No| MoveHigh[high = mid - 1]
    MoveHigh --> Check
    
    style Start fill:#90EE90
    style End fill:#90EE90
    style Found fill:#FFD700
    style NotFound fill:#FF6B6B

CI/CD Pipeline

flowchart LR
    subgraph Development
        Commit[Developer commits code] --> Push[Push to repository]
    end
    
    subgraph CI
        Push --> Trigger[Trigger CI pipeline]
        Trigger --> Checkout[Checkout code]
        Checkout --> Install[Install dependencies]
        Install --> Lint[Run linters]
        Lint --> Test[Run tests]
        Test --> Build[Build application]
    end
    
    subgraph QA
        Build --> DeployStaging[Deploy to staging]
        DeployStaging --> E2E[Run E2E tests]
        E2E --> ManualQA{Manual QA approval?}
    end
    
    subgraph Production
        ManualQA -->|Approved| DeployProd[Deploy to production]
        DeployProd --> HealthCheck{Health check passed?}
        HealthCheck -->|Yes| Success([Deployment successful])
        HealthCheck -->|No| Rollback[Rollback deployment]
        Rollback --> Alert[Alert team]
    end
    
    ManualQA -->|Rejected| FixIssues[Fix issues]
    FixIssues --> Development
    
    Test -->|Failed| NotifyDev[Notify developer]
    NotifyDev --> FixIssues

E-Commerce Checkout Flow

flowchart TD
    Start([User clicks Checkout]) --> Auth{Authenticated?}
    
    Auth -->|No| Login[Redirect to login]
    Login --> Auth
    
    Auth -->|Yes| Cart{Cart empty?}
    Cart -->|Yes| EmptyCart[Show empty cart message]
    EmptyCart --> Browse[Redirect to products]
    
    Cart -->|No| Address[Show shipping address form]
    Address --> ValidateAddr{Valid address?}
    ValidateAddr -->|No| Address
    ValidateAddr -->|Yes| Shipping[Select shipping method]
    
    Shipping --> Payment[Enter payment details]
    Payment --> ValidatePayment{Valid payment info?}
    ValidatePayment -->|No| Payment
    
    ValidatePayment -->|Yes| Review[Show order review]
    Review --> Confirm{Confirm order?}
    
    Confirm -->|No| Edit{Edit what?}
    Edit -->|Address| Address
    Edit -->|Shipping| Shipping
    Edit -->|Payment| Payment
    
    Confirm -->|Yes| ProcessPayment[Process payment]
    ProcessPayment --> PaymentResult{Payment successful?}
    
    PaymentResult -->|No| PaymentError[Show payment error]
    PaymentError --> RetryPayment{Retry?}
    RetryPayment -->|Yes| Payment
    RetryPayment -->|No| Cancel([Order cancelled])
    
    PaymentResult -->|Yes| CreateOrder[(Create order record)]
    CreateOrder --> ReduceStock[Reduce inventory]
    ReduceStock --> SendConfirmation[Send confirmation email]
    SendConfirmation --> Success([Order complete - Show confirmation])
    
    style Start fill:#90EE90
    style Success fill:#90EE90
    style Cancel fill:#FF6B6B
    style CreateOrder fill:#FFD700

Decision Matrix Example

flowchart TD
    Start([Select deployment strategy]) --> Env{Environment?}
    
    Env -->|Development| DevDecision{Automated tests?}
    DevDecision -->|Pass| DevDeploy[Auto-deploy to dev]
    DevDecision -->|Fail| Block[Block deployment]
    
    Env -->|Staging| StageDecision{All checks pass?}
    StageDecision -->|Yes| StageDeploy[Deploy to staging]
    StageDecision -->|No| Block
    
    Env -->|Production| ProdDecision{Change type?}
    
    ProdDecision -->|Hotfix| Urgent{Critical bug?}
    Urgent -->|Yes| FastTrack[Emergency approval + deploy]
    Urgent -->|No| NormalProcess
    
    ProdDecision -->|Feature| NormalProcess{Approval status?}
    NormalProcess -->|Approved| Schedule{Deploy window?}
    NormalProcess -->|Pending| Wait[Wait for approval]
    NormalProcess -->|Rejected| Block
    
    Schedule -->|Now| ImmediateDeploy[Deploy immediately]
    Schedule -->|Scheduled| QueueDeploy[Queue for deploy window]
    
    DevDeploy --> Monitor[Monitor metrics]
    StageDeploy --> Monitor
    FastTrack --> Monitor
    ImmediateDeploy --> Monitor
    QueueDeploy --> Monitor
    
    Monitor --> End([Deployment complete])
    Block --> End
    Wait --> End

Best Practices

Use meaningful labels - Node text should be clear and action-oriented
Consistent node shapes - Same shapes for same types of actions
Decision nodes as diamonds - Standard convention for yes/no decisions
Flow top-to-bottom or left-to-right - Natural reading direction
Start and end nodes - Use stadium/pill shapes to mark entry/exit
Group related steps - Use subgraphs for logical groupings
Color code - Use colors to highlight different types of actions
Minimize crossing lines - Reorganize for clarity
Keep it focused - One process per diagram

Common Patterns

Simple Linear Flow

flowchart LR
    A[Step 1] --> B[Step 2] --> C[Step 3] --> D[Step 4]

Branching Decision

flowchart TD
    A[Input] --> B{Condition?}
    B -->|True| C[Path 1]
    B -->|False| D[Path 2]
    C --> E[Merge]
    D --> E

Loop Pattern

flowchart TD
    A[Initialize] --> B[Process]
    B --> C{Continue?}
    C -->|Yes| B
    C -->|No| D[Exit]

Error Handling

flowchart TD
    A[Try operation] --> B{Success?}
    B -->|Yes| C[Continue]
    B -->|No| D[Handle error]
    D --> E{Retry?}
    E -->|Yes| A
    E -->|No| F[Abort]

/mermaid-diagrams

mermaid-diagramsreferencesflowcharts.md