UI / Components / doc / Mermaid

Mermaid

Fenced ```mermaid block render.

Render Mermaid diagrams from raw source. Lazy-loads `mermaid` on first render so the diagram code stays out of your main bundle. Supports all 15 Mermaid diagram types.

$npx dock-ui add mermaid

Usage

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

<Mermaid source={`flowchart TD; A --> B --> C`} />

Install

via CLI
$ npx dock-ui add mermaid
Writes the file(s) directly to your components/ui/ folder. You own the code.
For agents
curl -L https://ui.trydock.ai/r/mermaid.json
Returns a JSON manifest with file paths + contents. Agent-readable, LLM-fetchable.
← All components
Themes·Component kit · glossary
View on GitHub →