Mermaid

Mermaid lets you write diagrams directly in Markdown using fenced code blocks. The theme detects mermaid code fences automatically and renders them as diagrams on the page.

Usage

Add a Mermaid code fence to any page, post, or docs document:

```mermaid
graph TD
  A[Write Markdown] --> B[Render Diagram]
  B --> C[Ship Docs]
```

Build or serve the site as usual.

The theme will:

transform language-mermaid code blocks into Mermaid containers
render them on page load
re-render them when the selected light, dark, or auto color mode changes

Example

graph TD
  A[Write Markdown] --> B[Render Diagram]
  B --> C[Ship Docs]

Demo

Additional resources

In this article

Usage
Example
Demo
Additional resources