Components

Mermaid

Turns Mermaid source text into a finished diagram — flowchart, sequence, ER, state — in Halo's own colors. It's CodeBlock's sibling: CodeBlock is for code you read, Mermaid is for diagrams you read. Mermaid handles the parsing and layout for every diagram type; we hand it the design tokens, so your diagrams stay on-palette and follow the light/dark toggle.

Live demo

One component, every diagram type. Sequence diagrams show up the most in the runbook, so they lead.

mermaid

sequenceDiagram
    participant W as Mutating workload
    participant B as Trust bus
    participant A as Audit
    W->>B: publish audit.entry.recorded.v1
    B->>A: deliver event
    A->>A: append immutable entry
    Note over A: append-only — no update / delete

mermaid

flowchart LR
    U[User] --> E{Edge / WAF}
    E -->|allow| S[Service]
    E -->|block| X[Reject]
    S --> D[(Datastore)]

mermaid

erDiagram
    USER_ACCOUNT ||--o{ PRACTITIONER : has
    ORG_ACCOUNT ||--o{ MEMBERSHIP : contains
    PRACTITIONER }o--|| ORG_ACCOUNT : "scoped to"

mermaid

stateDiagram-v2
    [*] --> Draft
    Draft --> Generated: run
    Generated --> Delivered: send
    Delivered --> [*]

How it works

theming: Mermaid's theme engine wants real color values, so the component reads the design tokens with getComputedStyle at render time — no hard-coded hex anywhere. A MutationObserver watches data-theme and re-renders when you flip the appearance toggle, the same trick CodeBlock uses.
fallback: Until Mermaid loads — or if JS is off or the source doesn't parse — you get the source as a CodeBlock instead. You can always read the content; you never get a blank box.
lazy-loaded: Mermaid is a big dependency (its own parser plus d3 and dagre), so we only download it when a diagram actually shows up on the page — and only in the browser.

Props

chart: string: The Mermaid diagram source — the body of a mermaid fence. Required.
title?: string: Optional caption below the diagram, and the diagram’s accessible name. Pass a translated string.
className?: string: Optional class on the figure wrapper.

Usage

Hand the diagram source to the chart prop and you're done. In the runbook, the Markdoc fence handler does it for you on every mermaid code fence.

tsx

import { Mermaid } from '@halo-compliance/ui'

<Mermaid
  chart={diagramSource}
  title="An audit event over the Trust bus"
/>