MermaidDiagram — Loidolt Theme

import { MermaidDiagram } from '@loidolt/theme-docs';

Example

stateDiagram-v2
  [*] --> Quoted
  Quoted --> Approved: proof signed
  Approved --> Cutting
  Cutting --> Finished
  Finished --> [*]
  Quoted --> Cancelled

An order is quoted, approved when the proof is signed, cut, and finished. A quote can also be cancelled.

Notes

label names the picture and description says what it shows — a diagram is only as accessible as its words. Until it is drawn, or if Mermaid is unavailable, the source stands in.

Props

Generated from the component source, so it cannot drift from the implementation.

MermaidDiagram props
Prop	Type	Default	Notes
`code` required	`string`	`—`	Mermaid source.
`label` required	`string`	`—`	Names the diagram — say what it shows, e.g. "Order lifecycle".
`class`	`string`	`—`
`description`	`string`	`—`	What it shows, in words, for readers who cannot see it. Shown under the diagram.
`ref` bindable	`HTMLElement \| null`	`null`
`sourceLabel`	`string`	`'Diagram source'`	Labels the disclosure holding the source.

Plus the attributes of HTMLAttributes<HTMLElement>, forwarded to the root element.