Using 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.

Basic

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

Dimensions and alignment

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

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

With a caption

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

<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>

Live example

A standalone .astro page demonstrating all of the above is deployed at /astro-diagram/.