Diagram

Pro

A diagram an agent wrote as Mermaid: a product's data model (objects and their relationships), a flow, a sequence. Mermaid loads on first use, renders in strict mode (no scripts or HTML from the source), and takes its colours from the theme, redrawing when the theme changes. Source that won't parse shows the parser's message and the source, never a blank box.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/diagram

Brings in: degraded-panel, locale, payload, skeleton, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { Diagram } from "@/components/diagram"

const source = `erDiagram
  customers ||--o{ invoices : "is billed"
  customers }o--|| regions : "is routed to"
  invoices ||--|{ invoice_lines : contains`

export default function Example() {
  return <Diagram className="max-w-xl" title="Billing data model" caption="Tables Keel read from the Staging schema and how they relate." source={source} />
}

<Diagram>

Prop	Type	Default	Description
sourcerequired	`string`	—	The Mermaid source.
titlerequired	`string`	—	Heading above the diagram, also its accessible name.
caption	`string \| undefined`	—	A line under the title saying what the diagram shows.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under diagram in <LocaleProvider strings={{ … }}>; the table is exported as diagramStrings.

Key	English
source	Source
invalid	The source isn’t valid Mermaid.
failed	Couldn’t draw this diagram: {message}
missing	The picture; the source is below