Mermaid 图表

用于渲染 Mermaid 图表。对齐 React @ant-design/x Mermaid（2.10）。

独立组件。Markdown 插件 Mermaid 仍保留，二者用途不同（插件 ≠ 本组件）。

何时使用

• 在应用中渲染支持缩放、平移、图像/代码双视图切换的交互式 Mermaid 图表。
• 与 XMarkdown 结合，通过 components.code 渲染 mermaid 围栏代码块。

代码演示

基本

Image

Code

基本

基础用法。

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

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

隐藏源代码

自定义 Header

Login Flow

自定义 Header

通过 header 自定义头部；传 null / false 可隐藏。

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

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

defineRender(() => (
  <div style={{ padding: 24 }}>
    <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>
  </div>
));
</script>

隐藏源代码

Header Actions

Header Actions Configuration

Enable Zoom

Enable Download

Enable Copy

Show Custom Actions

Image

Code

Header Actions

通过 actions 控制缩放 / 下载 / 复制与自定义操作。

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

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(() => (
  <div style={{ padding: 24, 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 as boolean;
          }}
        >
          Enable Zoom
        </Checkbox>
        <Checkbox
          checked={enableDownload.value}
          onChange={(e) => {
            enableDownload.value = e.target.checked as boolean;
          }}
        >
          Enable Download
        </Checkbox>
        <Checkbox
          checked={enableCopy.value}
          onChange={(e) => {
            enableCopy.value = e.target.checked as boolean;
          }}
        >
          Enable Copy
        </Checkbox>
        <Checkbox
          checked={showCustom.value}
          onChange={(e) => {
            showCustom.value = e.target.checked as boolean;
          }}
        >
          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>

隐藏源代码

配合 XMarkdown

配合 XMarkdown

在 Bubble + XMarkdown 中作为 components.code 渲染 mermaid 围栏。

<script setup lang="tsx">
import { Bubble, Mermaid } from 'ant-design-x-vue';
import XMarkdown from '@ant-design-x-vue/x-markdown';
import { Button, Flex } from 'ant-design-vue';
import { computed, onBeforeUnmount, ref, watchEffect } from 'vue';

const text = `
Here are several Mermaid diagram examples 

#### 1. Flowchart (Vertical)

\`\`\` mermaid
graph TD
    A[Start] --> B{Data Valid?}
    B -->|Yes| C[Process Data]
    B -->|No| D[Error Handling]
    C --> E[Generate Report]
    D --> E
    E --> F[End]
\`\`\`

#### 2. Sequence Diagram

\`\`\` mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database
    
    Client->>Server: POST /api/data
    Server->>Database: INSERT record
    Database-->>Server: Success
    Server-->>Client: 201 Created
\`\`\`
`;

const index = ref(0);
let timer: ReturnType<typeof setTimeout> | null = null;

watchEffect((onCleanup) => {
  if (index.value >= text.length) return;
  timer = setTimeout(() => {
    index.value = Math.min(index.value + 5, text.length);
  }, 20);
  onCleanup(() => {
    if (timer) clearTimeout(timer);
  });
});

onBeforeUnmount(() => {
  if (timer) clearTimeout(timer);
});

const content = computed(() => text.slice(0, index.value));

const Code = (props: { className?: string; class?: string; children?: unknown }) => {
  const cls = props.className || props.class || '';
  const lang = cls.match(/language-(\w+)/)?.[1] || '';
  if (typeof props.children !== 'string') return null;
  if (lang === 'mermaid') {
    return <Mermaid>{props.children}</Mermaid>;
  }
  return <code>{props.children}</code>;
};

defineRender(() => (
  <Flex vertical gap="small" style={{ height: 600, overflow: 'auto' }}>
    <Flex justify="flex-end">
      <Button
        onClick={() => {
          index.value = 0;
        }}
      >
        Re-Render
      </Button>
    </Flex>
    <Bubble
      content={content.value}
      styles={{ content: { width: 700 } }}
      contentRender={(c: string) => (
        <XMarkdown components={{ code: Code }} paragraphTag="div">
          {c}
        </XMarkdown>
      )}
      variant="outlined"
    />
  </Flex>
));
</script>

隐藏源代码

API

MermaidProps

属性	说明	类型	默认值	版本
children	Mermaid 代码内容（也可用默认插槽）	string	-	-
header	头部内容；null / false 时不显示默认头	VNode | string | (() => …) | false | null	-	-
classNames	语义化 className	Partial<Record<'root' | 'header' | 'graph' | 'code', string>>	-	-
styles	语义化 style	Partial<Record<'root' | 'header' | 'graph' | 'code', CSSProperties>>	-	-
highlightProps	代码视图的高亮配置	Record<string, unknown>	-	-
config	mermaid.initialize 配置（请保持引用稳定）	MermaidConfig	-	-
actions	操作栏配置	{ enableZoom?: boolean; enableDownload?: boolean; enableCopy?: boolean; customActions?: ItemType[] }	{ enableZoom: true, enableDownload: true, enableCopy: true }	-
onRenderTypeChange	视图切换回调	(value: 'image' | 'code') => void	-	-
prefixCls	样式类名前缀	string	-	-
rootClassName	根节点额外 class	string	-	-
style	根节点样式	CSSProperties	-	-

Slots

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

Mermaid Ref

属性	说明	类型
nativeElement	获取原生 DOM 节点	HTMLElement

SemanticType

名称	说明
root	根节点
header	头部容器
graph	图表容器
code	代码容器

Semantic DOM

Image

Code

• root

  根节点

• header

  头部

• graph

  图表区

• code

  代码区

主题变量（Design Token）

Token	说明	默认
colorBgTitle	标题背景颜色	colorFillContent
colorTextTitle	标题文本颜色	colorText
colorBorderCode	代码块边框颜色	colorBorderSecondary
colorBorderGraph	图表边框颜色	colorBorderSecondary

FAQ

使用 config 时，如何避免重复渲染或重复初始化？

当传递 config prop 时，请确保其为引用稳定的对象。避免在模板中直接传入对象字面量（如 :config="{ theme: 'base' }"），否则每次父组件重渲染都会触发 Mermaid 重新初始化。

推荐做法：

import { computed } from 'vue';

// 动态配置：使用 computed 缓存
const config = computed(() => ({
  theme: isDark.value ? 'dark' : 'base',
  fontFamily: 'monospace',
}));

// 静态配置：提取为常量
const CONFIG = { theme: 'base', fontFamily: 'monospace' } as const;

贡献者

贡献者

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