Mermaid

Renders host-supplied Mermaid source as a labelled diagram with a local loading and error state.

MDX@gaudi/design-system/mdx/MermaidView in Storybook Source

Diagram colors and typography use Gaudi tokens and update when the surrounding theme or local tokens change. Wide diagrams keep readable labels and scroll within a keyboard-focusable figure.

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Mermaid from '@gaudi/design-system/mdx/Mermaid';

Usage

<Mermaid  id='architecture-flow'  description='Draft moves to review before publication.'  chart={`flowchart TD  A[Draft] --> B[Review]`}/>

Examples

Playground

Storybook

Invalid Diagram

Storybook

API

4 props

Accessibility

Mermaid exposes the rendered diagram as one labelled figure. Provide a concise description that communicates the diagram meaning without relying on shape, position, or color.

AsideSupporting article content outside the main reading flow.CalloutHighlight an article note, tip, warning or error while preserving readable prose.ChartChart is the MDX adapter for the Charts collection: authors write <Chart type=…> (or a chart by name) in an article and get the same framed, accessible chart an application renders from @gaudi/design-system/charts.CitationCitation documents the blog citation authoring flow and the Gaudi runtime components that hydrate generated citation links.CitationTrackerKeep bibliography back-links associated with the last visited citation.CodeArticle code rendered through the Core CodeBlock: CodeFence maps MDX pre, CodeGroup renders ::: code-group fences as tabs.