Mermaid Diagrams
The Mermaid widget renders live diagrams from plain text, no image uploads.
Add a Mermaid diagram
1
Open the widget menu
Type / on any empty line to open the widget menu.
2
Choose Mermaid Diagram
Find and select Mermaid Diagram from the list.
3
Write your diagram code
Write your diagram code in the editor at the top, and the live preview below updates as you type.
Diagram types
Mermaid turns complex logic, data models, and system interactions into clear visuals readers grasp at a glance. Instead of reconstructing a flow from paragraphs of text, a well-placed diagram makes the structure obvious, invaluable for authentication flows, error handling, database relationships, and any multi-step process where order and branching matter.
Each tab below covers one diagram type: what it’s for, a real-world example, and the rendered output.
Mermaid supports many more diagram types than shown here. For the full syntax reference, visit the official Mermaid documentation.
Flowcharts help readers understand how a system decides what to do. Branching logic (request validation, error handling, payment processing) is hard to follow in prose but immediately clear as a flowchart.
graph TD
A([User]) --> B[Send API Request]
B --> C{Auth Token Present?}
C -- No --> D[Return 401 Unauthorized]
C -- Yes --> E{Token Valid?}
E -- No --> F[Return 403 Forbidden]
E -- Yes --> G[Return 200 OK]State diagrams show what an entity looks like at different points in time and what causes it to change. Rather than describing retry logic in prose, a state diagram lets developers see every possible state and the paths between them.
stateDiagram-v2
[*] --> Pending : Event triggered
Pending --> Sending : Worker picks up
Sending --> Delivered : HTTP 2xx
Sending --> Failed : Timeout or error
Failed --> Retrying : Retry policy active
Retrying --> Delivered : Retry succeeds
Retrying --> Dead : Max retries exceeded
Delivered --> [*]
Dead --> [*]Sequence diagrams are useful whenever multiple systems talk to each other. They make the order and direction of communication obvious: who initiates each call, what comes back, and when.
sequenceDiagram
autonumber
participant U as User
participant C as Client App
participant A as Auth Server
U->>C: Click "Login"
C->>A: Redirect to /authorize
A->>U: Show login screen
U->>A: Approve access
A-->>C: Return authorization code
C->>A: POST /token
A-->>C: Return access_token
C-->>U: Logged inER diagrams help onboard developers who need to understand your data model before they can use your API. A single diagram makes relationships and field structures self-evident at a glance.
erDiagram
ORGANIZATION {
string id PK
string name
string plan
}
USER {
string id PK
string org_id FK
string email
string role
}
SUBSCRIPTION {
string id PK
string org_id FK
string status
}
ORGANIZATION ||--o{ USER : "has"
ORGANIZATION ||--|| SUBSCRIPTION : "holds"Interactive controls
When a published Mermaid diagram is clicked, it opens in an interactive view:
- Zoom in / out: use the + and − buttons to zoom, especially useful for large or complex diagrams.
- Pan / move: click and drag anywhere to navigate without losing your zoom level.
These controls keep even detailed, multi-node diagrams fully readable in your published portal; readers are never constrained to a fixed viewport.
On this page
- Mermaid Diagrams