Mermaid · GPT-VIS

语言是 mermaid 的围栏代码可以交给 Mermaid，在浏览器里画图。服务端先显示源码。从 @ant-design-x-vue/x-markdown/plugins/Mermaid 引入。

Mermaid

```mermaid
graph TD
  A[Start] --> B[Answer]
```

Mermaid

一段流程图。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownMermaidV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import Mermaid from '@ant-design-x-vue/x-markdown/plugins/Mermaid';
import { codeRenderer } from '../_shared/markdown-code';

const isClient = typeof window !== 'undefined';

const content = [
  '```mermaid',
  'graph TD',
  '  A[Start] --> B[Answer]',
  '```',
].join('\n');

const Code = codeRenderer((props, lang, text) => {
  if (lang === 'mermaid') return <Mermaid children={text} />;
  return <code class={props.className}>{text}</code>;
});

defineRender(() => (
  isClient
    ? <XMarkdown content={content} components={{ code: Code }} />
    : <pre>{content}</pre>
));
</script>

隐藏源代码

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]
    style A fill:#2ecc71,stroke:#27ae60
    style F fill:#e74c3c,stroke:#c0392b
```

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

#### 3. Quadrant Chart

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

流式输出 Mermaid 围栏时逐步渲染。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownMermaidStreamingV2' });

import { onUnmounted, ref, watchEffect } from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import Mermaid from '@ant-design-x-vue/x-markdown/plugins/Mermaid';
import { Button, Flex } from 'ant-design-vue';
import { codeRenderer } from '../_shared/markdown-code';

// Parity with React 2.0.0 packages/x/docs/x-markdown/demo/supersets/Mermaid/basic.tsx
const fullContent = `
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]
    style A fill:#2ecc71,stroke:#27ae60
    style F fill:#e74c3c,stroke:#c0392b
\`\`\`

#### 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
\`\`\`

#### 3. Quadrant Chart

\`\`\`mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
\`\`\`
`;

const isClient = typeof window !== 'undefined';

const Code = codeRenderer((props, lang, codeText) => {
  if (lang === 'mermaid') return <Mermaid children={codeText} />;
  return <code class={props.className}>{codeText}</code>;
});

const index = ref(0);
const isServer = import.meta.env.SSR;

watchEffect((onCleanup) => {
  if (isServer || index.value >= fullContent.length) return;
  const timerId = setTimeout(() => {
    index.value = Math.min(fullContent.length, index.value + 5);
  }, 20);
  onCleanup(() => clearTimeout(timerId));
});

onUnmounted(() => {
  index.value = fullContent.length;
});

defineRender(() => (
  <Flex vertical gap="small">
    <Button style={{ alignSelf: 'flex-end' }} onClick={() => (index.value = 0)}>
      Re-Render
    </Button>
    {isClient ? (
      <Bubble
        content={fullContent.slice(0, index.value)}
        contentRender={(content) => (
          <XMarkdown
            content={content as string}
            components={{ code: Code }}
            paragraphTag="div"
          />
        )}
        variant="outlined"
      />
    ) : (
      <pre>{fullContent}</pre>
    )}
  </Flex>
));
</script>

隐藏源代码

Mermaid API

属性	说明	类型	默认值
children	图表源码	string	-
header	顶栏。传入 VNode 则完全自定义；null 时不渲染默认工具栏	VNode | null	默认缩放 / 复制 / 下载 / 代码切换
className	根节点类名	string	-
classNames	语义化类名：root / header / graph / code	Partial<Record<'root' | 'header' | 'graph' | 'code', string>>	-
styles	语义化样式，键与 classNames 相同	Partial<Record<..., CSSProperties>>	-
style	根节点内联样式	CSSProperties	-
prefixCls	类名前缀覆盖	string	-

工具栏文案来自 useLocale('Mermaid')，见 主题与文案。

GPT-VIS

自定义标签也可以映射成图表。下面用 custom-line 配合 docs 里的 GPT-VIS Line 适配层（避免打进完整 G6 包）。

流式输出结束后渲染折线图。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownDataChartV2' });

import {
  defineComponent,
  nextTick,
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  ref,
  watch,
  watchEffect,
} from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { XMarkdown, type ComponentProps } from '@ant-design-x-vue/x-markdown';
import { Button, Flex, Skeleton } from 'ant-design-vue';
import { textOf } from '../_shared/markdown-code';

const text = `
**GPT-Vis**, Components for GPTs, generative AI, and LLM projects. Not only UI Components. [more...](https://github.com/antvis/GPT-Vis)

Here's a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.

<custom-line axisXTitle="year" axisYTitle="sale">[{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}]</custom-line>
`;

type VisChart = { render: (config: Record<string, unknown>) => void; destroy: () => void };
const LineChart = defineComponent({
  name: 'XMarkdownLineChart',
  props: {
    dataJson: { type: String, required: true },
    axisXTitle: { type: String, default: '' },
    axisYTitle: { type: String, default: '' },
  },
  setup(props) {
    const host = ref<HTMLDivElement | null>(null);
    let chart: VisChart | null = null;
    let disposed = false;

    const paint = () => {
      if (!chart) return;
      try {
        const data = JSON.parse(props.dataJson);
        chart.render({
          type: 'line',
          data,
          axisXTitle: props.axisXTitle,
          axisYTitle: props.axisYTitle,
        });
      } catch (error) {
        console.warn(error);
      }
    };

    onMounted(() => {
      void (async () => {
        await nextTick();
        if (disposed || !host.value) return;
        // Alias resolves to docs/shared/gpt-vis-line.ts (line-only). Load only on
        // the client — Node SSR cannot resolve gpt-vis extensionless ESM imports.
        const { GPTVis } = await import('@antv/gpt-vis');
        if (disposed || !host.value) return;
        const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
        chart = new GPTVis({
          container: host.value,
          width: host.value.clientWidth || 640,
          height: 320,
          theme,
        });
        paint();
      })();
    });

    watch(() => [props.dataJson, props.axisXTitle, props.axisYTitle], paint);
    onBeforeUnmount(() => {
      disposed = true;
      chart?.destroy();
      chart = null;
    });

    return () => <div ref={host} class="ax-xmd-gpt-vis" />;
  },
});

const LineCompt = (props: ComponentProps & Record<string, any>) => {
  if (props.streamStatus === 'loading') {
    return <Skeleton.Image active style={{ width: 480, height: 240 }} />;
  }
  const dataJson = textOf(props.children);
  if (!dataJson) return null;
  return (
    <LineChart
      dataJson={dataJson}
      axisXTitle={String(props.axisXTitle || '')}
      axisYTitle={String(props.axisYTitle || '')}
    />
  );
};

const index = ref(0);
const hasNextChunk = ref(false);
const isServer = import.meta.env.SSR;

watchEffect((onCleanup) => {
  if (isServer || index.value >= text.length) {
    hasNextChunk.value = false;
    return;
  }
  hasNextChunk.value = true;
  const timerId = setTimeout(() => {
    index.value = Math.min(text.length, index.value + 5);
  }, 20);
  onCleanup(() => clearTimeout(timerId));
});

onUnmounted(() => {
  index.value = text.length;
  hasNextChunk.value = false;
});

defineRender(() => (
  <Flex vertical gap="small">
    <Button style={{ alignSelf: 'flex-end' }} onClick={() => (index.value = 0)}>
      Re-Render
    </Button>
    <Bubble
      content={text.slice(0, index.value)}
      contentRender={(content) => (
        <XMarkdown
          style={{ whiteSpace: 'normal' }}
          content={content as string}
          components={{ 'custom-line': LineCompt }}
          paragraphTag="div"
          streaming={{ hasNextChunk: hasNextChunk.value }}
        />
      )}
      variant="outlined"
    />
  </Flex>
));
</script>

<style>
.ax-xmd-gpt-vis {
  width: 100%;
  min-height: 320px;
}
</style>

隐藏源代码

步骤总览见 插件 · Mermaid。