ciderpress bundles rspress-plugin-mermaid so any fenced code block with the mermaid language renders as a diagram. No configuration required.
Code
```mermaid
graph LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```Output
Code
```mermaid
sequenceDiagram
participant Client
participant Server
participant DB
Client->>+Server: POST /api/login
Server->>+DB: SELECT user WHERE email = ?
DB-->>-Server: user row
Server-->>-Client: 200 OK { token }
```Output
Code
```mermaid
erDiagram
USER ||--o{ POST : writes
USER ||--o{ COMMENT : authors
POST ||--|{ TAG : has
POST ||--o{ COMMENT : receives
```Output
Code
```mermaid
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Published : approve
Review --> Draft : request changes
Published --> Archived : archive
Archived --> [*]
```Output
Code
```mermaid
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
```Output
Code
```mermaid
gantt
title Release Plan
dateFormat YYYY-MM-DD
section Development
Core features :a1, 2025-01-01, 30d
API integration :a2, after a1, 20d
section Testing
Unit tests :b1, after a1, 15d
E2E tests :b2, after a2, 10d
section Release
Documentation :c1, after b2, 7d
Launch :milestone, after c1, 0d
```Output
Code
```mermaid
pie title Tech Stack
"TypeScript" : 45
"React" : 30
"CSS" : 15
"Other" : 10
```Output
| Type | Directive |
|---|---|
| Flowchart | graph or flowchart |
| Sequence | sequenceDiagram |
| Class | classDiagram |
| State | stateDiagram-v2 |
| Entity Relationship | erDiagram |
| Gantt | gantt |
| Pie | pie |
| Git Graph | gitGraph |
| Mindmap | mindmap |
| Timeline | timeline |