AiMermaid

Renders Mermaid diagrams (flowcharts, sequence diagrams, etc.) in AI messages. Supports image/code view toggle, zoom, download, and copy.

Basic Usage

Pass Mermaid code via code; use header for the title.

Basic Usage

Diverse Diagrams

AiMermaid fully supports all Mermaid syntax, including Sequence Diagrams, Gantt Charts, Entity Relationship Diagrams, etc.

Sequence Diagram

Gantt Chart

Custom Configuration

Native Mermaid configurations can be passed via the config prop, such as changing the rendering theme. Supports presets like default, forest, dark, and neutral.

Custom Theme

Actions

Zoom, download, and copy are enabled by default; configure via actions.

Actions

Scrolling and Container Overflow

When a flowchart is too long or wide, you can scroll horizontally or vertically to view it. The nodes, edge paths, and labels inside are forced to have overflow: visible styling to ensure text is not clipped or truncated at the boundaries.

Long Flowchart Scrolling & Overflow

API

Props

Property	Description	Type	Default
code	Mermaid code	string	''
header	Header (string or slot)	string | object	-
config	Mermaid config	MermaidConfig	{}
actions	Action bar (zoom/download/copy)	MermaidActions	all enabled
classNames	Extra CSS class names per region. Keys: root / header / headerContent / extra / actions / content	Record<string, string>	-
styles	Inline styles per region. Same keys as classNames	Record<string, string>	-
prefixCls	Custom BEM root class prefix	string	-
themeOverrides	Theme overrides	Record<string, unknown>	-

Events

Event	Description
render-type-change	Fired when view type (image/code) changes
error	Fired on render error
ready	Fired when render is ready