---
title: Mermaid diagrams
slug: docs/0PhU-mermaid-diagrams
docTags: 
createdAt: 2026-06-05T12:56:34.018Z
---

[Mermaid diagrams](docId\:fRhB6aopNdkyYjeQDeJLG)  let you create diagrams and visualizations directly from text. They are useful for documenting workflows, processes, architectures, and interactions without relying on images.

## Syntax

Mermaid diagrams use standard fenced code block syntax.

````markdown
```mermaid
sequenceDiagram
    A->>B: message
```
````

## Examples

The following example creates a sequence diagram that illustrates an API request flow.

````markdown
```mermaid
sequenceDiagram
    autonumber
    participant C as Client
    participant A as API
    participant K as Cache
    participant D as DB

    C->>+A: GET /users/123
    A->>+K: lookup user:123
    alt cache hit
        K-->>A: cached user
    else cache miss
        K-->>A: null
        A->>+D: SELECT * FROM users WHERE id=123
        D-->>-A: user row
        A->>K: SET user:123
    end
    A-->>-C: 200 OK
```
````

The following example creates a flowchart.

````markdown
```mermaid
flowchart TD
    A[Start] --> B{Is config valid?}
    B -->|Yes| C[Load docs]
    B -->|No| D[Show error]
    C --> E[Start server]
    E --> F[Open browser]
    D --> G[Exit]
```
````