f-ui
Components

Mermaid Renderer

Preview-first Mermaid diagrams with zoom, pan, download, fullscreen, and a code toggle backed by CodeBlock.

Plus Registry

This component ships from registry.plus.json. Configure @f-ui-plus on the Installation page. Install code-block first (dependency), then @f-ui-plus/mermaid-renderer — or add markdown-renderer, which pulls both.

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.

Features

AreaBehavior
PreviewZoom, pan, fit-to-container, pinch, and wheel on the rendered SVG
ExportDownload SVG or PNG; PNG rasterizes from viewBox dimensions so aspect ratio matches the diagram (not percentage width / height)
CodeToggle to CodeBlock for editing source; errors switch to Code automatically
FullscreenSame toolbar actions in an overlay; Escape closes

Interactions

EventBehavior
Pinch (two fingers)Scale the diagram between min and max zoom
Pointer dragPan the diagram
Fit view (toolbar or double-click)Scale to fit the viewport without exceeding 1×
Wheel (desktop)Default wheelZoom="modifier": hold Ctrl or ⌘ and scroll to zoom; plain wheel scrolls the page. Set wheelZoom="always" for direct wheel zoom
Escape (fullscreen)Close the fullscreen overlay

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

Loading MermaidLoading diagram…
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" />
}

Narrow Column

In article or sidebar layouts (~384px), the toolbar collapses overflow actions and the viewport uses a shorter height cap. Pinch and drag still work for pan and zoom.

Loading MermaidLoading diagram…
import { MermaidRenderer } from "@/components/f-ui/mermaid-renderer/mermaid-renderer"

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

export function MermaidRendererNarrowColumnDemo() {
  return (
    <div className="mx-auto max-w-sm">
      <MermaidRenderer source={SOURCE} defaultView="preview" />
    </div>
  )
}

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.

Loading MermaidLoading diagram…
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.

Loading MermaidLoading diagram…
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.

Loading MermaidLoading diagram…
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

PropTypeDefaultDescription
sourcestring(required)Mermaid diagram source.
defaultView"code" | "preview""preview"Initial view.
mermaidThemestring—Overrides auto theme (light→default, dark→dark).
mermaidConfigMermaidConfig—Passed to mermaid.initialize.
onError(err: unknown) => void—Optional logging hook.
wheelZoom"always" | "modifier" | "off""modifier""modifier" (default): Ctrl/⌘ + wheel zooms; plain wheel scrolls the page. "always": wheel zooms without a modifier. "off": wheel ignored; use toolbar or fullscreen. Fullscreen always uses "always".

Rich Text

Safe static rendering for TipTap HTML and ProseMirror JSON documents.

PDF Viewer

EmbedPDF-backed PDF reader with toolbar, search, thumbnails, and self-hosted WASM support.

On this page

FeaturesInteractionsInstallingUsageExamplesNarrow ColumnEdge Cases & ErrorsInvalid syntax (unclosed node)Unknown Diagram TypeIncomplete EdgeAPI Reference