Mermaid 图表工具

用于渲染交互式 Mermaid 图表，对齐 @ant-design/x Mermaid。

何时使用

• 需要在应用中渲染支持缩放、平移、图片/代码双视图切换的交互式 Mermaid 图表。
• 可与 Markdown / 对话内容组合展示模型输出的流程图、时序图等。

代码演示

基本

基础用法。

图片

代码

<script setup lang="tsx">
import { Mermaid } from 'ant-design-x-vue';

defineOptions({ name: 'AXMermaidBasic' });

defineRender(() => {
  return (
    <Mermaid>
      {`graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E`}
    </Mermaid>
  );
});
</script>

隐藏源代码

自定义 Header

通过 header 自定义顶部内容。

Login Flow

<script setup lang="tsx">
import { Button, Space } from 'ant-design-vue';
import { Mermaid } from 'ant-design-x-vue';

defineOptions({ name: 'AXMermaidCustomHeader' });

defineRender(() => {
  const header = (
    <div
      style={{
        padding: '12px 16px',
        border: '1px solid #f0f0f0',
        borderBottom: 'none',
        borderRadius: '8px 8px 0 0',
        backgroundColor: '#fafafa',
      }}
    >
      <Space size="middle">
        <span style={{ fontWeight: 500, color: '#1a1a1a' }}>Login Flow</span>
        <Button type="primary" size="small">
          Export
        </Button>
        <Button size="small">Reset</Button>
      </Space>
    </div>
  );

  return (
    <Mermaid header={header}>
      {`flowchart LR
    A[User Login] --> B{Validate}
    B -->|Success| C[System Entry]
    B -->|Failed| D[Error Message]
    C --> E[Dashboard]
    D --> A`}
    </Mermaid>
  );
});
</script>

隐藏源代码

Header Actions

配置缩放、下载、复制与自定义操作。

Header Actions Configuration

Enable Zoom

Enable Download

Enable Copy

Show Custom Actions

图片

代码

<script setup lang="tsx">
import { EditOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
import { Checkbox, Space, message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { Mermaid } from 'ant-design-x-vue';

defineOptions({ name: 'AXMermaidHeaderActions' });

const enableZoom = ref(true);
const enableDownload = ref(true);
const enableCopy = ref(true);
const showCustom = ref(false);

const customActions = [
  {
    key: 'edit',
    icon: <EditOutlined />,
    label: 'Edit',
    onItemClick: () => {
      message.info('Edit button clicked');
    },
  },
  {
    key: 'share',
    icon: <ShareAltOutlined />,
    label: 'Share',
    onItemClick: () => {
      message.success('Chart link copied to clipboard');
    },
  },
];

const actions = computed(() => ({
  enableZoom: enableZoom.value,
  enableDownload: enableDownload.value,
  enableCopy: enableCopy.value,
  ...(showCustom.value ? { customActions } : {}),
}));

defineRender(() => {
  return (
    <div style={{ maxWidth: 800, margin: '0 auto' }}>
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ marginBottom: 16, color: '#1a1a1a' }}>Header Actions Configuration</h2>
        <Space size="large" wrap>
          <Checkbox
            checked={enableZoom.value}
            onChange={(e) => {
              enableZoom.value = e.target.checked!;
            }}
          >
            Enable Zoom
          </Checkbox>
          <Checkbox
            checked={enableDownload.value}
            onChange={(e) => {
              enableDownload.value = e.target.checked!;
            }}
          >
            Enable Download
          </Checkbox>
          <Checkbox
            checked={enableCopy.value}
            onChange={(e) => {
              enableCopy.value = e.target.checked!;
            }}
          >
            Enable Copy
          </Checkbox>
          <Checkbox
            checked={showCustom.value}
            onChange={(e) => {
              showCustom.value = e.target.checked!;
            }}
          >
            Show Custom Actions
          </Checkbox>
        </Space>
      </div>

      <div style={{ border: '1px solid #f0f0f0', borderRadius: 8, overflow: 'hidden' }}>
        <Mermaid actions={actions.value}>
          {`flowchart TD
    A[Start] --> B{Decision Point}
    B -->|Yes| C[Process Data]
    B -->|No| D[Skip Processing]
    C --> E[Generate Report]
    D --> E
    E --> F[End]`}
        </Mermaid>
      </div>
    </div>
  );
});
</script>

隐藏源代码

API

MermaidProps

属性	说明	类型	默认值
children	图表代码内容（也可通过默认插槽传入）	string	-
header	顶部内容；为 null 时不显示头部	VNode | string | (() => VNode | string | null) | null	-
highlightProps	透传给代码视图中 CodeHighlighter 的配置	object	-
config	Mermaid 配置项	MermaidConfig	-
actions	操作栏配置	{ enableZoom?: boolean; enableDownload?: boolean; enableCopy?: boolean; customActions?: ActionItem[] }	{ enableZoom: true, enableDownload: true, enableCopy: true }
onRenderTypeChange	渲染类型切换回调	(value: 'image' | 'code') => void	-
classNames	语义化结构 className	Record<'root' | 'header' | 'graph' | 'code', string>	-
styles	语义化结构 style	Record<'root' | 'header' | 'graph' | 'code', CSSProperties>	-

MermaidSlots

插槽名	说明
default	图表代码内容
header	自定义头部

FAQ

使用 config 时如何避免重复初始化？

请保证 config 引用稳定，避免在模板中直接写对象字面量。推荐用 computed / 常量缓存：

const config = computed(() => ({
  theme: isDark.value ? 'dark' : 'base',
  fontFamily: 'monospace',
}));

贡献者

贡献者

正在加载贡献者信息...