MermaidDiagram

Docusaurus renders Mermaid diagrams natively — MermaidDiagram takes that one step further. It wraps the built-in <Mermaid> component and adds an interactive layer: zoom, pan, fullscreen view, and SVG/PNG export. Readers can actually explore large, complex diagrams instead of squinting at a fixed image.

Any diagram type that Docusaurus's Mermaid integration supports works here — flowcharts, sequence diagrams, entity relationships, state machines, and more.

---

Live demo

Loading demo…

Try scrolling or pinching to zoom. The fullscreen and export buttons are in the top-right corner.

---

Installation

npm install docucraft

MermaidDiagram wraps Docusaurus's native Mermaid integration, so @docusaurus/theme-mermaid must be installed and enabled in your project.

npm install @docusaurus/theme-mermaid

Add it to docusaurus.config.ts:

export default {
  markdown: { mermaid: true },
  themes: ['@docusaurus/theme-mermaid'],
};

---

Usage

import { MermaidDiagram } from 'docucraft';

<MermaidDiagram
  definition={String.raw`flowchart LR
    API --> Service --> Database
  `}
  ariaLabel="System overview"
/>

---

Best practices

Always set ariaLabel. It describes the diagram for screen readers and gets attached to the viewport as an accessible label. Keep it brief but descriptive — "Payment flow overview" is better than "diagram".

Use String.raw for complex diagrams. Some Mermaid syntax uses backslash characters. Wrapping your definition in String.raw passes the string exactly as written, without JavaScript's escape processing.

Set a meaningful exportFileName. When a reader exports your diagram, the downloaded file gets named after this value. "order-flow" beats "diagram".

Disable controls you don't need. If fullscreen or export don't fit a particular diagram's context, set enableFullscreen={false} or enableExport={false} to keep the UI clean.

Use showHint={false} for embedded diagrams. The hint row below the diagram tells readers how to interact with it. Once your audience is familiar with the controls, hiding it saves vertical space.

---

Props

Prop	Type	Default	Description
definition	string	—	Mermaid source code. Required.
ariaLabel	string	—	Accessible label for the diagram viewport.
className	string	—	Additional CSS class on the root element.
minScale	number	0.6	Minimum zoom level.
maxScale	number	4	Maximum zoom level.
zoomStep	number	0.12	Zoom increment per scroll step or button click.
showHint	boolean	true	Show or hide the usage hint below the diagram.
hintText	string	—	Replaces the default hint text.
exportFileName	string	"diagram"	Base file name for exported SVG and PNG files.
enableFullscreen	boolean	true	Show the fullscreen button.
enableExport	boolean	true	Show the SVG and PNG export buttons.