Mermaid

Renders a Mermaid diagram with a concise accessible name, prose summary, and visible structured text alternative.

Status: alpha. Group: media. Markdown version: /design-system/components/mermaid.md

When to use

Renders a Mermaid diagram with a concise accessible name, prose summary, and visible structured text alternative.

Do not render a diagram without a complete accessibleDetails equivalent.
Do not use title alone as the text alternative for a diagram with meaningful relationships.

The contract names no look-alike with a deciding condition.

Mermaid props
Prop	Type	Default	Description	Required
`chart`	`string`	none	Mermaid diagram source.	Yes
`title`	`string`	none	Concise meaningful name for the diagram.	Yes
`description`	`string`	none	Short prose summary of the diagram purpose and relationships.	Yes
`accessibleDetails`	`ReactNode`	none	Structured or prose equivalent of every material relationship in the diagram.	Yes
`detailsLabel`	`string`	none	Label for the visible text-alternative disclosure.	No
`caption`	`string`	none	Optional visible figure caption.	No
`className`	`string`	none	Additional className for the figure.	No
`themeColors`	`MermaidThemeColors`	none	Diagram color overrides: CSS colours or var(--token) references. Defaults to --color-text and --color-border, so diagrams follow the theme.	No

No variant dimensions and no props with a fixed set of values.

The contract records no invalid combinations.

Mermaid keyboard behaviour
Key	Behaviour
Tab	Focuses the native disclosure summary.
Enter or Space	Toggles the text alternative.

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

Mermaid rules
Level	Rule	How it is checked
MUST	ARIA: The rendered diagram has role img and is named by title.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Description supplies a concise accessible description.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Aria-details points to a visible disclosure containing a complete structured or prose equivalent of the diagram relationships.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The generated SVG is hidden from assistive technology to prevent duplicate, unstructured narration.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.

In-repo only. Mermaid is not exported from @digitaltableteur/react, so there is no public import path.
Alpha components are internal and never exported.