Mermaid

Mermaid diagrams in the chatcn palette, with source view, zoom, pan and fullscreen. Mermaid loads on first use.

On this page

A flowchart in the chatcn palette, with source, zoom and fullscreen.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/mermaid.json

tsx

import { Mermaid } from "@/components/ui/chatcn/mermaid"

<Mermaid title="Webhook pipeline" chart={source} />

Colors come from the chatcn tokens where the diagram lives, so scoped themes work, and the diagram re-renders when the theme changes.

A sequence diagram streaming as source, then rendering, and a syntax error.

Prop	Type	Notes
`chart`	`string`	Mermaid source
`title`	`string`	Header label and accessible name. Default Diagram
`streaming`	`boolean`	Shows the source and renders once complete
`defaultView`	`"diagram" \| "source"`	Starting view

Key	Action
`+`, `-`	Zoom the focused diagram
`0`	Reset the view
`Arrow keys`	Pan
`Ctrl` or `Cmd` plus wheel	Zoom at the pointer. A plain wheel scrolls the page
`Esc`	Leave fullscreen

The diagram is an image labeled with its title; the source view gives the same content as text.
Syntax errors explain what happened and show the source.

Zoom buttons ease over 200 ms. Dragging, the wheel and keys move the view directly. Under reduced motion nothing eases.
Fullscreen uses the Dialog motion.