StellarUI

<stellar-mermaid>

Mermaid diagram renderer for authored child text or a value prop.

Preview

Mermaid diagram renderer for authored child text or a value prop.

graph TD A[Author Mermaid text] --> B[stellar-mermaid] B --> C[Load Mermaid module] C --> D[Render SVG]

Markup

Copy

<stellar-mermaid label="StellarUI component flow">
graph TD
  A[Author Mermaid text] --> B[stellar-mermaid]
  B --> C[Load Mermaid module]
  C --> D[Render SVG]
</stellar-mermaid>

Properties

Prop	Type	Default	Notes
`label`	`string`	`''`	Accessible label for the rendered diagram.
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`src`	`string`	`https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs`	ES module URL for Mermaid. Override to self-host Mermaid instead of loading the default CDN module.
`theme`	`auto \| default \| neutral \| dark \| forest \| base`	`auto`
`value`	`string`	`''`	Mermaid diagram source. Authored child text is used when value is empty.

Events

Slots

Notes

Authored child text is used as the diagram source when `value` is empty. The component trims outer blank lines and removes common indentation before rendering.
The default `src` loads Mermaid from jsDelivr. Set `src` to a self-hosted Mermaid ES module for offline, private, or pinned deployments.
The component initializes Mermaid with `securityLevel: 'strict'` and `startOnLoad: false` before each render.
`size` uses the same `xs`, `sm`, `md`, `lg`, and `xl` ramp as `stellar-button`, scaling the diagram frame padding, rendered SVG width, and Mermaid font size.
`theme='auto'` maps to Mermaid `neutral` in light mode and `dark` when `:root` has the `dark` class.
If Mermaid fails to load or render, the component shows the source text fallback with an accessible status message.