Mermaid diagrams
3 min
Mermaid diagrams 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.
```mermaid
sequenceDiagram
A->>B: message
```Examples
The following example creates a sequence diagram that illustrates an API request flow.
```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.
```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]
```Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.