Mermaid live examples¶

Every code block on this page is a live Mermaid diagram rendered in your browser. Copy the source and pass it to generate_uml with diagram_type: "mermaid" to get a server-rendered SVG/PNG (and a Kroki URL you can share).

{
  "name": "generate_uml",
  "arguments": { "diagram_type": "mermaid", "code": "<paste source here>" }
}

Prompts, Sequential Thinking, and server-rendered SVG¶

Use natural-language prompts first, then have the model produce Mermaid source and call generate_uml with "output_format": "svg" when you need a static asset, PDF pipeline, or shareable Kroki URL (unlike the in-page diagrams below, which rely on JavaScript).

Optional Sequential Thinking MCP. In clients such as Cursor you can enable a Sequential Thinking server alongside UML-MCP. It is a separate product: use its sequentialthinking tool to step through scope, diagram type, participants, edge cases, then finish with nextThoughtNeeded: false before invoking generate_uml. UML-MCP’s own uml_diagram_with_thinking prompt is different: it is fetched with prompts/get and only affects how the model plans inside the chat.

Named prompts on UML-MCP (see MCP prompts):

Example chat prompts:

Using the mermaid_sequence_api style, draw a sequenceDiagram for OAuth2 authorization code flow:
browser, auth server, resource API, and token storage. Include success and error alt branches.

Gantt chart for a two-sprint release: Sprint 1 backend, Sprint 2 frontend and QA, milestone release.
Use the mermaid_gantt conventions from uml-mcp prompts.

Illustrative Sequential Thinking steps before generating the flowchart in the next section:

1. Diagram type is flowchart (flowchart LR), not sequence.
2. Decision Authenticated? splits login vs dashboard paths.
3. Loop: submit credentials and re-check authentication.
4. Terminal End only after success path.
5. Call validate_uml then generate_uml with diagram_type: "mermaid" and "output_format": "svg".

Direct tools/call for that flowchart (same source as the SVG asset below):

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "generate_uml",
    "arguments": {
      "diagram_type": "mermaid",
      "output_format": "svg",
      "code": "flowchart LR\n    A([Start]) --> B{Authenticated?}\n    B -- yes --> C[Show dashboard]\n    B -- no  --> D[Show login form]\n    D --> E[Submit credentials]\n    E --> B\n    C --> F([End])"
    }
  }
}

Example output (SVG from UML-MCP generate_uml with the same code as the live diagram under Flowchart):

See also Diagram Assistant for how prompts map to tools and uml:// resources.

Flowchart¶

flowchart LR
    A([Start]) --> B{Authenticated?}
    B -- yes --> C[Show dashboard]
    B -- no  --> D[Show login form]
    D --> E[Submit credentials]
    E --> B
    C --> F([End])

Sequence (API call)¶

Same shape as the mermaid_sequence_api prompt and the sequence-style content under uml://examples (key mermaid).

sequenceDiagram
    autonumber
    participant C as Client
    participant A as API
    participant DB as Database
    C->>A: POST /login
    A->>DB: SELECT user WHERE email=?
    DB-->>A: user row
    alt valid password
        A-->>C: 200 + session cookie
    else invalid
        A-->>C: 401 Unauthorized
    end

Class diagram¶

classDiagram
    class Account {
        +String id
        +String owner
        +deposit(amount) bool
        +withdraw(amount) bool
    }
    class Customer {
        +String name
        +String email
    }
    class Transaction {
        +String id
        +Date timestamp
        +float amount
    }
    Customer "1" --> "*" Account
    Account "1" --> "*" Transaction

State diagram¶

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Completed: success
    Processing --> Failed: error
    Failed --> Idle: retry
    Completed --> [*]

Gantt chart¶

Same shape as the mermaid_gantt prompt.

gantt
    title Project plan
    dateFormat  YYYY-MM-DD
    section Design
    Wireframes      :done, des1, 2025-01-05, 5d
    Visual design   :active, des2, after des1, 7d
    section Build
    API             :build1, after des2, 10d
    Frontend        :build2, after des2, 12d
    section Launch
    QA              :qa1, after build1, 4d
    Release         :milestone, m1, after qa1, 0d

Entity-relationship¶

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"
    CUSTOMER {
        string id PK
        string email
    }
    ORDER {
        string id PK
        date created_at
    }

Pie chart¶

pie showData
    title Diagram backends in use
    "Kroki" : 70
    "PlantUML server" : 20
    "Mermaid.ink" : 10

Notes¶

See Diagram Assistant for the matching named prompts (mermaid_sequence_api, mermaid_gantt, convert_class_to_mermaid).