AiMermaid 流程图

用于在 AI 回复中渲染 Mermaid 图表（流程图、时序图等），支持图像/代码视图切换与缩放、下载、复制。

基础用法

通过 code 传入 Mermaid 代码，header 可设置标题。

基础用法

多样化图表

AiMermaid 完美支持 Mermaid 的所有语法，包括时序图、甘特图、实体关系图等。

时序图

甘特图

自定义配置

可以通过 config 属性传入 Mermaid 的原生配置，例如修改渲染主题。支持 default, forest, dark, neutral 等预设。

自定义主题

操作栏

默认提供缩放、下载、复制；可通过 actions 配置开关。

操作栏

滚动与容器溢出

当流程图过长或过宽时，可以通过水平或垂直滚动条进行查看。内部节点、路径和标签强制设置了 overflow: visible 样式，以确保文本在边界处不会被裁剪或截断。

长流程滚动与溢出

API

Props

属性	说明	类型	默认值
code	Mermaid 代码	string	''
header	顶部标题（字符串或插槽）	string | object	-
config	Mermaid 配置	MermaidConfig	{}
actions	操作栏配置（缩放/下载/复制）	MermaidActions	默认全开
classNames	各区域的额外 CSS 类名，可配置 root / header / headerContent / extra / actions / content	Record<string, string>	-
styles	各区域的内联样式，键名同 classNames	Record<string, string>	-
prefixCls	自定义根节点 BEM 前缀类名	string	-
themeOverrides	主题覆盖	Record<string, unknown>	-

Events

事件名	说明
render-type-change	视图类型（image/code）切换时触发
error	渲染错误时触发
ready	渲染就绪时触发