Mermaid Renderer

The mermaid-renderer registry item provides MermaidRenderer: Preview by default, Code toggle (uses CodeBlock for the source), dynamic mermaid import, debounced re-render for streaming, a spinner while the library loads, and inline error display. Diagram source is evaluated by Mermaid on the client only.

Installing

Configure @f-ui-plus and FUI_PLUS_REGISTRY_TOKEN as in Installation — Plus Registry.

FUI_PLUS_REGISTRY_TOKEN=xxx pnpm dlx shadcn@latest add @f-ui-plus/mermaid-renderer

FUI_PLUS_REGISTRY_TOKEN=xxx npx shadcn@latest add @f-ui-plus/mermaid-renderer

FUI_PLUS_REGISTRY_TOKEN=xxx yarn dlx shadcn@latest add @f-ui-plus/mermaid-renderer

FUI_PLUS_REGISTRY_TOKEN=xxx bun x shadcn@latest add @f-ui-plus/mermaid-renderer

registryDependencies: code-block. Runtime dependency: mermaid.

Usage

import { MermaidRenderer } from "@/components/f-ui/mermaid-renderer/mermaid-renderer";

const source = ["flowchart LR", "  A-->B"].join("\n");

export function Example() {
  return (
    <MermaidRenderer source={source} defaultView="preview" />
  );
}

Examples

import { MermaidRenderer } from "@/components/f-ui/mermaid-renderer/mermaid-renderer"

const SOURCE = ["graph TD", "  A[Start] --> B{Choice}", "  B -->|Yes| C[OK]", "  B -->|No| D[End]"].join(
  "\n",
)

export function MermaidRendererDemo() {
  return <MermaidRenderer source={SOURCE} defaultView="preview" />
}

Edge Cases & Errors

When mermaid.parse or mermaid.render fails, MermaidRenderer:

1. Shows a destructive inline message under the toolbar with the error text (role="alert").
2. Switches the view to Code automatically so users can edit the source without hunting for the toggle.
3. Optionally forwards the thrown value to onError for logging or telemetry.

Invalid or hostile diagram text never runs on the server; everything happens in the browser after the dynamic mermaid import.

Invalid syntax (unclosed node)

Mermaid rejects invalid bracket structure. The renderer shows an inline error and switches to Code so the source can be fixed.

import { MermaidRenderer } from "@/components/f-ui/mermaid-renderer/mermaid-renderer"

const SOURCE = ["flowchart LR", "  A[Start --> B[unclosed"].join("\n")

export function MermaidRendererDemoInvalidSyntax() {
  return <MermaidRenderer source={SOURCE} defaultView="preview" />
}

Unknown Diagram Type

Unrecognized top-level keywords fail at parse time with a clear error.

import { MermaidRenderer } from "@/components/f-ui/mermaid-renderer/mermaid-renderer"

const SOURCE = ["notARealDiagramType TD", "  foo --> bar"].join("\n")

export function MermaidRendererDemoUnknownDiagramType() {
  return <MermaidRenderer source={SOURCE} defaultView="preview" />
}

Incomplete Edge

Incomplete arrows or missing targets surface as parse errors instead of a silent blank preview.

import { MermaidRenderer } from "@/components/f-ui/mermaid-renderer/mermaid-renderer"

const SOURCE = ["graph TD", "  A -->"].join("\n")

export function MermaidRendererDemoIncompleteEdge() {
  return <MermaidRenderer source={SOURCE} defaultView="preview" />
}

API Reference