Writing Diagrams

Mermaid fences

Use a fenced code block whose language is exactly mermaid:

```mermaid
flowchart TD
  A --> B
```

Nuxt Content Mermaid replaces the source block with its Mermaid component while preserving readable source as the no-JavaScript fallback.

Fence title and display mode

Add a title or Mermaid display mode as inline fence metadata:

```mermaid {title=Architecture displayMode=compact}
flowchart TD
  A --> B
```

You can also place Mermaid YAML frontmatter inside a block when the diagram needs multiple values:

```mermaid
---
title: Architecture
displayMode: compact
config:
  theme: forest
---
flowchart TD
  A --> B
```

The Mermaid component

Use the globally registered <Mermaid> component when the diagram source comes from Vue rather than Markdown. Pass URI-encoded source through code:

<script setup lang="ts">
const source = encodeURIComponent(`flowchart TD
  A --> B`)
</script>

<template>
  <Mermaid :code="source" />
</template>

The component also accepts a direct Mermaid config prop. Do not provide pageConfig and config together; they are alternative configuration sources for the same diagram.

Page and diagram configuration

Use page frontmatter to apply pure-data Mermaid configuration to every diagram on a Markdown page:

---
config:
  theme: forest
  flowchart:
    curve: basis
---

```mermaid
flowchart LR
  Page --> Diagram
```

Use inline fence metadata or YAML frontmatter inside a Mermaid fence for a single diagram. In application code, use the component's direct config prop instead of page configuration.

Configuration precedence

More local settings take precedence:

1. Inline fence metadata overrides the diagram's YAML frontmatter.
2. Diagram settings override page configuration.
3. Page configuration overrides application defaults from contentMermaid.loader.init.

Mermaid directives inside the diagram are interpreted by Mermaid itself and can override initialization values according to Mermaid's rules.

Mermaid configuration

You can specify diagram settings such as the theme in page frontmatter through config, for example config: { theme: forest }.

For more information about Mermaid themes, diagram options, security settings, and directives, see the official Mermaid configuration documentation.