> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/en/essentials/mermaid.md](/docs/manual/en/essentials/mermaid.md).

---
title: Mermaid Diagrams
description: Learn how to create Mermaid diagrams in TockDocs Markdown pages.
navigation:
  icon: i-lucide-chart-network
  position: 5
seo:
  title: Mermaid diagrams
  description: Render Mermaid diagrams in TockDocs content with fenced code blocks.
---

## Mermaid is already enabled

TockDocs registers `@barzhsieh/nuxt-content-mermaid` in the shared layer, so any Markdown page under `docs/content/**` can render Mermaid fences.

You do **not** need to add a separate Vue component for the common case. Just write a top-level Mermaid fence in your content file and the layer will turn it into a responsive diagram.

## Create your first diagram

```mermaid
flowchart TD
  A[Write Markdown] --> B[Add a mermaid fence]
  B --> C[TockDocs converts it to `<Mermaid>`]
  C --> D[Nuxt renders the SVG]
```

## Build diagrams that fit TockDocs

A simple TockDocs example:

```mermaid
flowchart LR
  Docs[docs/] --> Layer[layer/]
  Layer --> Content[Nuxt Content]
  Layer --> Mermaid[Mermaid runtime]
  Content --> Page[Rendered page]
  Mermaid --> Page
```

You can also use sequence diagrams, state diagrams, class diagrams, and more — anything Mermaid supports.

## Customize a diagram per page

TockDocs exposes a `config` frontmatter field for Mermaid overrides. The shared layer already declares this field in `layer/content.config.ts`, so it is parsed as an object.

```md
---
title: Mermaid diagrams
config:
  theme: forest
  flowchart:
    curve: step
---
```

```mermaid
flowchart TD
  A[Start] --> B[Customized with frontmatter config]
```

## Useful tips

- Keep the fence name exactly `mermaid`
- Put the fence at the top level of the Markdown file
- Use valid Mermaid syntax; a single typo can trigger `⚠️ Mermaid Diagram Error`
- If you change module configuration, restart the dev server so Vite can re-optimize dependencies

## When to use it

Use Mermaid when you want to explain:

- workspace structure
- request or data flow
- architecture decisions
- onboarding steps
- deployment paths