Mermaid

When to Use

Used to render interactive Mermaid diagrams that support zooming, panning, and switching between image and code views in applications.
When used together with XMarkdown, it can render Mermaid diagrams within Markdown content and enhance interactive features.

Code Demo

API

Property	Description	Type	Default
children	Code content	`string`	-
header	Header	`React.ReactNode \| null`	React.ReactNode
className	Style class name	`string`	-
classNames	Style class name	`Partial<Record<'root' \| 'header' \| 'graph' \| 'code', string>>`	-
styles	Style object	`Partial<Record<'root' \| 'header' \| 'graph' \| 'code', React.CSSProperties>>`	-
highlightProps	Code highlighting configuration	`highlightProps`	-
config	Mermaid configuration	`MermaidConfig`	-
actions	Actions configuration	`{ enableZoom?: boolean; enableDownload?: boolean; enableCopy?: boolean; customActions?: ItemType[] }`	`{ enableZoom: true, enableDownload: true, enableCopy: true }`
onRenderTypeChange	Callback when render type changes	`(value: 'image' \| 'code') => void`	-
prefixCls	Style prefix	`string`	-
style	Custom style	`React.CSSProperties`	-

Semantic DOM

Theme Variables (Design Token)

Token Name	Description	Type	Default Value
colorBgTitle	Title background color	string	rgba(0,0,0,0.06)
colorBorderCode	Code block border color	string	#f0f0f0
colorBorderGraph	Graph border color	string	#f0f0f0
colorTextTitle	Title text color	string	rgba(0,0,0,0.88)

FAQ

How to avoid unnecessary re-renders or re-initialization when using `config`?

When passing the config prop, ensure it is a reference-stable object. Avoid passing object literals directly in JSX (e.g., config={{ theme: 'base' }}), as this will cause Mermaid to re-initialize on every parent re-render. ✅ Recommended approaches:

tsx

// Dynamic config: cache with useMemo
const config = React.useMemo(
  () => ({
    theme: isDark ? 'dark' : 'base',
    fontFamily: 'monospace',
  }),
  [isDark],
);

// Static config: extract as a constant
const CONFIG = { theme: 'base', fontFamily: 'monospace' } as const;

<Mermaid config={config}>{code}</Mermaid>;

Mermaid

When to Use

Code Demo

API

Semantic DOM

Theme Variables (Design Token)

FAQ

How to avoid unnecessary re-renders or re-initialization when using config?

When to Use

Code Demo

API

Semantic DOM

Theme Variables (Design Token)

FAQ

How to avoid unnecessary re-renders or re-initialization when using config?

Header Actions Configuration

root

header

graph

How to avoid unnecessary re-renders or re-initialization when using `config`?

How to avoid unnecessary re-renders or re-initialization when using `config`?