Mermaid · GPT-VIS

Fenced code in the language mermaid can be handed over to Mermaid to draw diagrams in the browser. On the server side, the source code is displayed first. Import from @ant-design-x-vue/x-markdown/plugins/Mermaid.

Mermaid

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

Mermaid

A flowchart.

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

Hide source

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

Progressively render a streaming Mermaid fence.

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

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>

Hide source

Mermaid API

Prop	Description	Type	Default
children	Chart source code	string	-
header	Top bar. Passing VNode is fully customizable; 'null' does not render the default toolbar	VNode | null	Default zoom / copy / download / code switch
className	Root class name	string	-
classNames	Semantic class names: 'root' / 'header' / 'graph' / 'code'	Partial\<Record<'root' | 'header' | 'graph' | 'code', string\>\>	-
styles	Semantic styling, key identical to 'classNames'	Partial\<Record<..., CSSProperties\>\>	-
style	Root inline style	CSSProperties	-
prefixCls	Override class prefix	string	-

Toolbar copy comes from 'useLocale('Mermaid')', see Theme and Copywriting.

GPT-VIS

Custom tags can also be mapped to charts. Next, use 'custom-line' together with the GPT-VIS Line adaptation layer in docs (avoid loading into the full G6 package).

Render a line chart after the stream finishes.

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

Hide source

See the overall steps at Plugin · Mermaid.