refrakt.md

Docs Runes Plan Blog Changelog

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 %}
<figure data-rune="diagram">
  <meta content="mermaid" data-field="language">
  <meta content="User Authentication Flow" data-field="title">
  <meta content="graph TD
  A[Visit Site] --&gt; B{Logged In?}
  B --&gt;|Yes| C[Dashboard]
  B --&gt;|No| D[Login Page]
  D --&gt; E[Sign Up]
  D --&gt; F[Sign In]
  F --&gt; C
  E --&gt; C
" data-name="source">
</figure>
User Authentication Flow
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
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-rune="diagram" data-density="compact" data-language="mermaid">
  <figcaption class="rf-diagram__title">User Authentication Flow</figcaption>
  <div class="rf-diagram__container">
    <pre class="rf-diagram__source"><code>graph TD
  A[Visit Site] --&gt; B{Logged In?}
  B --&gt;|Yes| C[Dashboard]
  B --&gt;|No| D[Login Page]
  D --&gt; E[Sign Up]
  D --&gt; F[Sign In]
  F --&gt; C
  E --&gt; C
</code></pre>
  </div>
  <div data-content="source" style="display:none">graph TD
  A[Visit Site] --&gt; B{Logged In?}
  B --&gt;|Yes| C[Dashboard]
  B --&gt;|No| D[Login Page]
  D --&gt; E[Sign Up]
  D --&gt; F[Sign In]
  F --&gt; C
  E --&gt; C
</div>
</rf-diagram>

Attributes

AttributeTypeDefaultDescription
languagestringmermaidDiagram language: mermaid, plantuml, or ascii
titlestring—Accessible title for the diagram

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration