Mermaid

Client-only Mermaid diagram embed for MDX articles. Renders a fallback <pre> of the raw chart source until the client mounts and Mermaid finishes rendering the SVG.

Article Media & Embeds

Flow chart

Sequence diagram

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for Mermaid — new coverage (epic #1647, wave 6, #1662). // // Fidelity note: Mermaid renders client-only (`BrowserOnly` gates the dynamic // `import('mermaid')` behind a mount effect — SSR/build time synchronously // renders nothing, per `browser-only.tsx`). The `render` below stays pure/sync // per the story contract, satisfying "static SSR-safe variants acceptable" // (#1662). Whether the SVG actually appears in the LIVE preview depends on // `mermaid` resolving in the styleguide's own client bundle — `mermaid` is a // repo-root dependency only, not listed in // `sub-packages/styleguide/package.json`, so the dynamic import may fail to // resolve there and both variants fall back to the raw-chart `<pre>` / // "Failed to render diagram" error box instead of a live SVG. Either way the // component's real render path (including its error state) is exercised // correctly; live diagram rendering would need `mermaid` added as an // explicit dependency of the styleguide package. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { Mermaid } from './mermaid'; const meta: StoryMeta = { title: 'Mermaid', category: 'Article Media & Embeds', description: 'Client-only Mermaid diagram embed for MDX articles. Renders a fallback <pre> of the raw chart source until the client mounts and Mermaid finishes rendering the SVG.', usage: `import { Mermaid } from '@/components/mdx/mermaid';\n\n<Mermaid chart={\`flowchart LR\\n VCO --> VCF --> VCA --> Out\`} />`, }; export default meta; export const FlowChart = defineStory({ name: 'Flow chart', render: () => ( <Mermaid chart={`flowchart LR VCO[VCO] --> VCF[VCF] VCF --> VCA[VCA] LFO[LFO] -.CV.-> VCF VCA --> Out((Out))`} /> ), }); export const SequenceDiagram = defineStory({ name: 'Sequence diagram', render: () => ( <Mermaid chart={`sequenceDiagram participant U as User participant D as Device U->>D: Power on D-->>U: Boot LED blink U->>D: Hold Boot + Reset D-->>U: Enter firmware update mode`} /> ), });