Claude mermaid skill: 10 diagrams from one prompt

The prompt

Read the refund policy in `docs/refunds.md` and draw it as a Mermaid `flowchart TD`. A request comes in, we check if it's within 30 days; if yes we check whether the item is opened; unopened refunds auto-approve, opened ones go to manual review; outside 30 days we decline with a reason. Use decision nodes for the two checks and label every edge with Yes/No. Wrap it in a ```mermaid fenced block so it renders on GitHub.

What slides.md looks like

flowchart TD
    A[Refund request] --> B{Within 30 days?}
    B -- No --> D[Decline: outside window]
    B -- Yes --> C{Item opened?}
    C -- No --> E[Auto-approve]
    C -- Yes --> F[Manual review]
    F --> G{Approved?}
    G -- Yes --> E
    G -- No --> D

Pairs with

The prompt

Draw the OAuth 2.0 authorization-code flow as a Mermaid `sequenceDiagram`. Participants: Browser, App, AuthServer, API. Browser hits App, App redirects to AuthServer, user authenticates, AuthServer returns a code to App, App exchanges the code for an access token (wrap this exchange in an activation), then App calls API with the bearer token. Use `->>` for requests and `-->>` for responses, and add a Note over the token exchange.

What slides.md looks like

sequenceDiagram
    participant Browser
    participant App
    participant AuthServer
    participant API
    Browser->>App: GET /login
    App-->>Browser: 302 redirect to AuthServer
    Browser->>AuthServer: Authenticate + consent
    AuthServer-->>App: Authorization code
    activate App
    App->>AuthServer: Exchange code for token
    AuthServer-->>App: Access token
    deactivate App
    Note over App,API: Bearer token on every call
    App->>API: GET /me (Authorization: Bearer)
    API-->>App: 200 user profile

Pairs with

The prompt

Read `db/schema.sql` and produce a Mermaid `erDiagram`. Entities: CUSTOMER, ORDER, LINE_ITEM, PRODUCT. A customer places many orders (one-to-many, mandatory order side). An order contains one or more line items. Each line item references exactly one product. Use the crow's-foot notation `||--o{` for one-to-many and `}o--||` where the order side is mandatory. List the primary key and two key columns per entity.

What slides.md looks like

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    LINE_ITEM }o--|| PRODUCT : references
    CUSTOMER {
        int id PK
        string email
    }
    ORDER {
        int id PK
        int customer_id FK
    }
    LINE_ITEM {
        int id PK
        int qty
    }

Pairs with

The prompt

Build a Mermaid `gantt` for a 6-week migration. `dateFormat YYYY-MM-DD`, title 'DB migration'. Section Prep: schema audit (done, 2026-07-06, 3d), backfill script (active, after the audit, 5d). Section Cutover: dry run (after the backfill, 2d), production switch (1d), monitoring window (after the switch, 5d). Mark the schema audit `done` and the backfill `active`. Use `after` for every dependency so shifting one task moves the rest.

What slides.md looks like

gantt
    dateFormat  YYYY-MM-DD
    title DB migration
    section Prep
    Schema audit    :done,   a1, 2026-07-06, 3d
    Backfill script :active, a2, after a1, 5d
    section Cutover
    Dry run         :        a3, after a2, 2d
    Production switch:       a4, after a3, 1d
    Monitoring      :        a5, after a4, 5d

Pairs with

The prompt

Model an order's lifecycle as a Mermaid `stateDiagram-v2`. States: Pending, Paid, Shipped, Delivered, Cancelled. Start at Pending. Pending goes to Paid on payment or Cancelled on timeout. Paid goes to Shipped. Shipped goes to Delivered. Paid and Pending can both reach Cancelled. Delivered and Cancelled are terminal. Use `[*]` for the start and label each transition with the event that triggers it.

What slides.md looks like

stateDiagram-v2
    [*] --> Pending
    Pending --> Paid: payment
    Pending --> Cancelled: timeout
    Paid --> Shipped: fulfil
    Paid --> Cancelled: refund
    Shipped --> Delivered: arrive
    Delivered --> [*]
    Cancelled --> [*]

Pairs with

The prompt

Read `src/billing/*.py` and draw a Mermaid `classDiagram`. Classes: Invoice, LineItem, Customer, PaymentGateway. Invoice is composed of many LineItems (`*--`). Invoice has one Customer (association `-->`). CardGateway and BankGateway both inherit from PaymentGateway (`<|--`). Show each class's public methods with `+` and private fields with `-`. Keep it to the relationships that exist in the code — don't invent any.

What slides.md looks like

classDiagram
    PaymentGateway <|-- CardGateway
    PaymentGateway <|-- BankGateway
    Invoice *-- LineItem
    Invoice --> Customer
    class Invoice {
        -id: str
        +total() Decimal
        +charge(gateway) bool
    }
    class PaymentGateway {
        +authorize(amount) bool
    }

Pairs with

The prompt

Draw a C4-style container view as a Mermaid `flowchart LR`. Three `subgraph` boundaries: 'Edge' (Browser, CDN), 'Services' (API, Auth, Worker), 'Data' (Postgres, Redis, S3). Browser hits CDN then API. API talks to Auth and reads/writes Postgres. Worker reads from Redis and writes to S3. Label the cross-boundary edges with the protocol (HTTPS, gRPC, SQL). Keep each subgraph titled so the boundaries are obvious.

What slides.md looks like

flowchart LR
    subgraph Edge
        Browser --> CDN
    end
    subgraph Services
        API
        Auth
        Worker
    end
    subgraph Data
        Postgres[(Postgres)]
        Redis[(Redis)]
        S3[(S3)]
    end
    CDN -->|HTTPS| API
    API -->|gRPC| Auth
    API -->|SQL| Postgres
    Worker --> Redis
    Worker --> S3

Pairs with

The prompt

Draw our release-branch workflow as a Mermaid `gitGraph`. Start on main with two commits. Branch `develop`, add three commits. Branch `release/1.2` off develop, add a commit (the version bump), then merge `release/1.2` back into main and tag it. Return to develop and add one more commit. Use `commit`, `branch`, `checkout`, and `merge` — the order of operations is the whole point.

What slides.md looks like

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    commit
    branch release/1.2
    commit id: "v1.2 bump"
    checkout main
    merge release/1.2 tag: "v1.2"
    checkout develop
    commit

Pairs with

The prompt

Convert my launch-planning notes in `notes/launch.md` into a Mermaid `mindmap`. Root node 'Launch'. Three branches: 'Product' (feature freeze, QA pass, changelog), 'Marketing' (landing page, email, demo video), 'Ops' (status page, on-call, rollback plan). Children sit one indent deeper than their parent — indentation is the only thing that sets the level, so keep it consistent.

What slides.md looks like

mindmap
  root((Launch))
    Product
      Feature freeze
      QA pass
      Changelog
    Marketing
      Landing page
      Email
      Demo video
    Ops
      Status page
      On-call
      Rollback plan

Pairs with

The prompt

This Mermaid block fails to render with 'Parse error on line 3'. The label has an unescaped paren and `end` is being used as a node ID (it's reserved). Fix both, then add an init directive to apply the `dark` theme and set the primary colour to teal. Return the corrected ```mermaid block and one sentence on what was wrong.

What slides.md looks like

%%{init: {'theme': 'dark', 'themeVariables': {'primaryColor': '#14b8a6'}}}%%
flowchart TD
    A["Start (entry)"] --> B[Process]
    B --> finish[End]
    %% was: end[End]  — 'end' is a reserved
    %%       keyword and cannot be a node id;
    %%       the label paren also needed quotes

Pairs with