Diagrams

Diagram

Explains workflows, messages, relationships, and lifecycle transitions using Mermaid text.

idle

Usage

import { Diagram } from "@mizen-labs/ui";

Optional renderer

Install pele@^1.13.0 in the consuming app. Import from this dedicated entry point; the root Mizen import does not load the renderer. Rendering starts after hydration.

import { Diagram } from "@mizen-labs/ui/diagram";

Examples

Sequence

Trace messages between an app, agent, and tool.

Entity relationships

Describe ownership and foreign keys.

State transitions

Explain how an agent run moves between states.

Class

Show classes with their fields, methods, and associations.

Pie

Slices take the chart palette, so they match Mizen's charts.

Gantt

Plan work in sections, with done, active, and critical tasks and a milestone.

Timeline

Group events by period.

Changing source

Replace source text to render an updated workflow.

Loading, empty, and errors

Show caller-owned loading and error states, empty input, and a syntax error.

Recommendations

Guidance	Practice
Do	Provide a concise aria-label and an aria-description explaining the relationships, branches, or transitions.
Do	Keep diagrams focused. Wide diagrams scroll locally rather than shrinking labels below the reading size.
Do	Use default diagram colors so nodes follow the active theme. Source style directives can override them.

Usage boundaries

Guidance	Boundary
Scope	Read-only structural diagrams. Use Charts for measurements and Task List for execution progress.
Scope	Install the optional pele peer and import Diagram from @mizen-labs/ui/diagram. Other Mizen entry points do not load the renderer.
Scope	Only flowchart, sequence, entity relationship, and state syntax are supported. Links, external images, custom icon markup, and math renderers are disabled.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`source`	`string`	`Required`	Mermaid flowchart, sequenceDiagram, erDiagram, or stateDiagram-v2 text. Empty text shows an empty state.
`aria-label`	`string`	`Required`	A non-empty accessible name describing the diagram.
`aria-description`	`string`	`—`	A text explanation of the relationships and decisions shown.
`caption`	`ReactNode`	`—`	Optional visible explanation below the diagram.
`status`	`"loading" \| "ready" \| "error"`	`"ready"`	Caller-owned data state. Loading defers the renderer; parsing errors produce separate rendering feedback.