Mermaid Diagrams

ciderpress bundles rspress-plugin-mermaid so any fenced code block with the mermaid language renders as a diagram. No configuration required.

Flowchart

Code

```mermaid
graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]
```

Output

Sequence diagram

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

Entity relationship

Code

```mermaid
erDiagram
  USER ||--o{ POST : writes
  USER ||--o{ COMMENT : authors
  POST ||--|{ TAG : has
  POST ||--o{ COMMENT : receives
```

Output

State diagram

Code

```mermaid
stateDiagram-v2
  [*] --> Draft
  Draft --> Review : submit
  Review --> Published : approve
  Review --> Draft : request changes
  Published --> Archived : archive
  Archived --> [*]
```

Output

Git graph

Code

```mermaid
gitGraph
  commit
  commit
  branch feature
  checkout feature
  commit
  commit
  checkout main
  merge feature
  commit
```

Output

Gantt chart

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

Pie chart

Code

```mermaid
pie title Tech Stack
  "TypeScript" : 45
  "React" : 30
  "CSS" : 15
  "Other" : 10
```

Output

ELK layout

Flowcharts and state diagrams can opt into the ELK layout engine for tidier routing of large or dense graphs. Set layout: elk in the diagram's init directive — no configuration or extra imports needed.

Code

```mermaid
---
config:
  layout: elk
---
graph TB
  A[Ingest] --> B[Parse]
  A --> C[Validate]
  B --> D[Render]
  C --> D
  D --> E[Publish]
```

Output

The ELK engine loads lazily in the browser only when a diagram requests it, so it adds nothing to your build output or to diagrams that use the default layout.

All supported types

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`

References

Mermaid documentation

#Mermaid Diagrams

#Flowchart

#Sequence diagram

#Entity relationship

#State diagram

#Git graph

#Gantt chart

#Pie chart

#ELK layout

#All supported types

#References

Mermaid Diagrams

Flowchart

Sequence diagram

Entity relationship

State diagram

Git graph

Gantt chart

Pie chart

ELK layout

All supported types

References