mermaid-element Live Demos

01 / Canvas

From text to a live diagram.

A declarative child node becomes an SVG diagram inside an encapsulated custom element.

architecture-flow

default Mermaid 12

flowchart LR Request[Request] --> Element[Custom element] Element --> Loader[Mermaid module] Loader --> SVG[Rendered SVG] SVG --> Shadow[Open Shadow Root]

render event → SVG ready source: direct text child

View the element markup

<mermaid-element theme="dark">
flowchart LR
    Request[Request] --> Element[Custom element]
    Element --> Loader[Mermaid module]
    Loader --> SVG[Rendered SVG]
    SVG --> Shadow[Open Shadow Root]
</mermaid-element>

02 / Inputs

Four ways to feed the element.

Each source keeps the same rendering surface while the child node changes.

Code node querySelector('code')

code

flowchart LR
    A[Code block] --> B[Parsed]
    B --> C[Rendered]

<mermaid-element>
  <code>flowchart LR
    A[Code block] --> B[Parsed]
    B --> C[Rendered]</code>
</mermaid-element>

Template node raw characters stay intact

template

<mermaid-element>
  <template>flowchart LR
    A["Literal &lt;tag&gt;"] --> B["Safe text"]
    B --> C[SVG]</template>
</mermaid-element>

Preformatted node ideal for readable source blocks

pre

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : finish

<mermaid-element>
  <pre>stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : finish</pre>
</mermaid-element>

03 / Runtime

Change the engine while it is running.

Switch diagram families, Mermaid releases, themes, and source code. The preview listens to the component events.

Runtime controls

Edit the input, then watch one in-memory module cache feed repeated renders.

Diagram preset Mermaid source A version becomes a jsDelivr module URL. Theme attribute Mermaid code

status Waiting

render time —

svg size —

cache key default

Event stream render / error

boot Waiting for custom element --:--

Live preview mermaid-element · theme="dark"

flowchart LR A[Edit syntax] --> B[Set diagram property] B --> C[Render event] C --> D[SVG]

Generated markup property-driven

04 / Reactive

DOM properties with a visible feedback loop.

Use attributes in HTML, properties in JavaScript, or call render() directly.

API surface

These controls operate on one live element instance.

.diagram set source and re-render

.theme reflect the theme attribute

.render() manually trigger a render

.svg read the rendered SVG element

::part() style the shadow container

.defaultMermaid use a bundled Mermaid instance

loadMermaid() resolve a version or URL

clearMermaidCache() clear shared module instances

Set .theme

last action Waiting for input

Reactive instance id="reactive-target"

flowchart TD Source[Child text] --> Observer[Mutation observer] Observer --> Diagram[Reactive SVG]

svg property Waiting for first render

<mermaid-element theme="dark">
  child text → observer → SVG
</mermaid-element>

05 / States

Failure is part of the surface.

Trigger a syntax error, recover it, and inspect the exposed styling part.

Error event part="error" · role="alert"

recoverable

flowchart TD Broken -->

Waiting for error event

Shadow styling ::part(container)

customized

The host page styles the internal container without reaching into the shadow tree.

mermaid-element::part(container)

flowchart LR Host[Host CSS] --> Part["::part(container)"] Part --> SVG[Diagram SVG]