Diagram
Renders diagrams from code blocks using Mermaid.js. The code block content is rendered as an SVG diagram in the browser.
Basic usage
Wrap a Mermaid code block with the diagram rune to render it as an SVG.
{% diagram language="mermaid" title="User Authentication Flow" %}
```mermaid
graph TD
A[Visit Site] --> B{Logged In?}
B -->|Yes| C[Dashboard]
B -->|No| D[Login Page]
D --> E[Sign Up]
D --> F[Sign In]
F --> C
E --> C
```
{% /diagram %}<rf-diagram data-rune="diagram" data-rune-fields="{"language":"mermaid"}">
<figcaption data-name="title">User Authentication Flow</figcaption>
<div data-name="container">
<pre data-name="source">
<code>graph TD
A[Visit Site] --> B{Logged In?}
B -->|Yes| C[Dashboard]
B -->|No| D[Login Page]
D --> E[Sign Up]
D --> F[Sign In]
F --> C
E --> C
</code>
</pre>
</div>
<template data-content="source">graph TD
A[Visit Site] --> B{Logged In?}
B -->|Yes| C[Dashboard]
B -->|No| D[Login Page]
D --> E[Sign Up]
D --> F[Sign In]
F --> C
E --> C
</template>
</rf-diagram>graph TD
A[Visit Site] --> B{Logged In?}
B -->|Yes| C[Dashboard]
B -->|No| D[Login Page]
D --> E[Sign Up]
D --> F[Sign In]
F --> C
E --> C
<rf-diagram class="rf-diagram" data-language="mermaid" data-rune="diagram" data-density="compact">
<figcaption data-name="title" class="rf-diagram__title">User Authentication Flow</figcaption>
<div data-name="container" class="rf-diagram__container">
<pre data-name="source" class="rf-diagram__source"><code>graph TD
A[Visit Site] --> B{Logged In?}
B -->|Yes| C[Dashboard]
B -->|No| D[Login Page]
D --> E[Sign Up]
D --> F[Sign In]
F --> C
E --> C
</code></pre>
</div>
<template data-content="source">graph TD
A[Visit Site] --> B{Logged In?}
B -->|Yes| C[Dashboard]
B -->|No| D[Login Page]
D --> E[Sign Up]
D --> F[Sign In]
F --> C
E --> C
</template>
</rf-diagram>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
language | string | mermaid | Diagram language: mermaid, plantuml, or ascii |
title | string | — | Accessible title for the diagram |
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |