# Mermaid

Mermaid diagram renderer with a typed declarative builder layer on top of the raw `chart` string. Supports the diagram types covered by the builders (`FlowDiagram`, `SequenceDiagram`, `JourneyDiagram`) plus anything else Mermaid parses (gantt, class, state, ER, pie, …) via the `chart` prop. Click-to-fullscreen via the floating toolbar.

```tsx
import Mermaid from '@djangocfg/ui-tools/mermaid';

<Mermaid chart={`
flowchart LR
  A[Client] --> B[API] --> C[(DB)]
`} />
```

Builder API:

```tsx
import Mermaid, { FlowDiagram } from '@djangocfg/ui-tools/mermaid';

const chart = new FlowDiagram({ direction: 'LR' })
  .node('a', 'Client')
  .node('b', 'API')
  .edge('a', 'b')
  .build();

<Mermaid chart={chart} />
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `chart` | `string` | — | Mermaid source. |
| `isCompact` | `boolean` | `false` | Tighter padding for embedded contexts. |
| `fullscreen` | `boolean` | `true` | Click-to-fullscreen via the floating toolbar. |
| `scrollIsolation` | `boolean` | `false` | Lock page wheel while hovering. Off by default — Mermaid SVGs don't scroll, the overlay just steals wheel events. |
| `debounceMs` | `number` | `300` | Re-render debounce after `chart` changes. Lower for static diagrams, higher while streaming. |
| `className` | `string` | — | — |

## Notes

- **~800KB bundle** — entry point is already `lazy()`-wrapped with a `Suspense` spinner, so the cost is only paid when a diagram is actually mounted.
- Theming pulls from `useThemePalette` / `useStylePresets` / `useBoxColors` (exported alongside the builders) — Mermaid colors follow the active app theme; do not hard-code hex.

---

Adapted from jalcoui (MIT).