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 Flowchart

Basic Usage

Diverse Diagrams

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

Sequence Diagram

Sequence Diagram

Gantt Chart

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.

Forest Theme

Custom Theme

Actions

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

Custom Actions

Actions

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
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