Mermaid

Render Mermaid diagrams. Aligned with React @ant-design/x Mermaid (2.10).

Standalone component. The Markdown plugin Mermaid is still available; the two serve different purposes (plugin ≠ this component).

中文：Mermaid 图表

When to use

• Render interactive Mermaid graphs with zoom, pan, and image/code views.
• Combine with XMarkdown via components.code to render mermaid fences.

Examples

Basic

Image

Code

Basic

Basic usage.

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

Hide source

Custom header

Login Flow

Custom header

Customize the header with header. Pass null / false to hide the default header.

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

Hide source

Header actions

Header Actions Configuration

Enable Zoom

Enable Download

Enable Copy

Show Custom Actions

Image

Code

Header actions

Control zoom / download / copy and custom actions with 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>

Hide source

With XMarkdown

With XMarkdown

Use it as components.code inside Bubble + XMarkdown to render mermaid fences.

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

Hide source

API

MermaidProps

Prop	Description	Type	Default	Version
children	Mermaid source (or default slot)	string	-	-
header	Header content; hidden when null / false	VNode | string | (() => …) | false | null	-	-
classNames	Semantic class names	Partial\<Record<'root' | 'header' | 'graph' | 'code', string\>\>	-	-
styles	Semantic styles	Partial\<Record<'root' | 'header' | 'graph' | 'code', CSSProperties\>\>	-	-
highlightProps	Highlighter options for the code view	Record\<string, unknown\>	-	-
config	mermaid.initialize config (keep the reference stable)	MermaidConfig	-	-
actions	Toolbar	{ enableZoom?: boolean; enableDownload?: boolean; enableCopy?: boolean; customActions?: ItemType[] }	{ enableZoom: true, enableDownload: true, enableCopy: true }	-
onRenderTypeChange	View switch callback	(value: 'image' | 'code') => void	-	-
prefixCls	Class prefix	string	-	-
rootClassName	Extra class on the root	string	-	-
style	Root style	CSSProperties	-	-

Slots

Slot	Description
default	Mermaid source
header	Custom header

Mermaid Ref

Prop	Description	Type
nativeElement	Native DOM node	HTMLElement

SemanticType

Name	Description
root	Root
header	Header container
graph	Graph container
code	Code container

Semantic DOM

Image

Code

• root

  根节点

• header

  头部

• graph

  图表区

• code

  代码区

Design Token

Token	Description	Default
colorBgTitle	Title background	colorFillContent
colorTextTitle	Title text	colorText
colorBorderCode	Code block border	colorBorderSecondary
colorBorderGraph	Graph border	colorBorderSecondary

FAQ

How do I avoid re-render / re-init when using config?

Keep config referentially stable. Do not pass an object literal in the template (such as :config="{ theme: 'base' }"), or every parent re-render will re-initialize Mermaid.

Preferred:

import { computed } from 'vue';

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

const CONFIG = { theme: 'base', fontFamily: 'monospace' } as const;

Contributors

Contributors

Loading contributors…