Mermaid in .astro files

In Markdown and MDX you use a fenced ```mermaid block. In.astro components and pages, write the diagram source directly inside a <pre class="mermaid"> element. The client script picks up any pre.mermaid element on the page and renders it.

Plain diagram

graph LR
    A --> B --> C

With dimensions and alignment

Set data-width, data-height, anddata-align attributes — the same values the info-string options (w-NNN, h-NNN, align=...) produce in Markdown.

flowchart TD
    A[Start] --> B[Process] --> C[End]

With a caption

Wrap the <pre> in a<figure class="mermaid-figure"> with a<figcaption> to mirror the title="..."option from Markdown.

flowchart LR
    A[Frontend] --> B[API] --> C[Database]
Request lifecycle

What the source looks like

<pre class="mermaid">graph LR
    A --> B --> C</pre>

<pre class="mermaid" data-width="400" data-height="200" data-align="center">flowchart TD
    A[Start] --> B[Process] --> C[End]</pre>

<figure class="mermaid-figure" data-align="left">
  <pre class="mermaid" data-width="360">flowchart LR
    A[Frontend] --> B[API] --> C[Database]</pre>
  <figcaption>Request lifecycle</figcaption>
</figure>

← Back to home