Api
<TinaMermaid>
Reference for the TinaMermaid component.
Renders a Mermaid diagram code block as an SVG. Auto-imported by the module, but not wired into <TinaMarkdown> by default. mermaid is a large dependency, so it's opt-in.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
source | string | Yes | The mermaid diagram source text (the raw content of the code block). |
Enabling it
npm install mermaid
<TinaMarkdown :content="post.body" :components="{ 'tina-mermaid': TinaMermaid }" />
mermaid itself is dynamically imported only when a <TinaMermaid> instance actually mounts, so it never adds to your bundle unless a page renders a mermaid diagram. Without the components prop wired up on <TinaMarkdown>, mermaid code blocks render as plain code instead. <TinaMermaid> never mounts on its own.
Fallback behavior
If mermaid isn't installed, the component catches the failed import and renders the raw diagram source inside a <pre> block with a short note, instead of throwing.
See Advanced Rich-Text for how to add the 'mermaid' toolbar button to a rich-text field.