Mermaid图表工具
Mermaid
图表工具
用于渲染图表工具 Mermaid。
使用import { Mermaid } from "@ant-design/x"; |
文档 编辑此页... |
版本自 2.1.0 起支持 |
Ant Design X| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 代码内容 | string | - |
| header | 顶部 | React.ReactNode | null | React.ReactNode |
| className | 样式类名 | string | - |
| classNames | 样式类名 | Partial<Record<'root' | 'header' | 'graph' | 'code', string>> | - |
| styles | 样式对象 | Partial<Record<'root' | 'header' | 'graph' | 'code', React.CSSProperties>> | - |
| highlightProps | 代码高亮配置 | highlightProps | - |
| config | Mermaid 配置项 | MermaidConfig | - |
| actions | 操作栏配置 | { enableZoom?: boolean; enableDownload?: boolean; enableCopy?: boolean; customActions?: ItemType[] } | { enableZoom: true, enableDownload: true, enableCopy: true } |
| onRenderTypeChange | 渲染类型切换回调 | (value: 'image' | 'code') => void | - |
| prefixCls | 样式前缀 | string | - |
| style | 自定义样式 | React.CSSProperties | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgTitle | 标题背景颜色 | string | rgba(0,0,0,0.06) |
| colorBorderCode | 代码块边框颜色 | string | #f0f0f0 |
| colorBorderGraph | 图表边框颜色 | string | #f0f0f0 |
| colorTextTitle | 标题文本颜色 | string | rgba(0,0,0,0.88) |
config 时，如何避免重复渲染或重复初始化？当传递 config prop 时，请确保其为引用稳定的对象。避免在 JSX 中直接传入对象字面量（如 config={{ theme: 'base' }}），否则每次父组件重渲染都会触发 Mermaid 重新初始化。
✅ 推荐做法：
// 动态配置：使用 useMemo 缓存const config = React.useMemo(() => ({theme: isDark ? 'dark' : 'base',fontFamily: 'monospace',}),[isDark],);// 静态配置：提取为常量const CONFIG = { theme: 'base', fontFamily: 'monospace' } as const;<Mermaid config={config}>{code}</Mermaid>;
