D2 快速开始

D2 图表在 markstream-vue 中是渐进式渲染：只要语法可用就会先出预览，后续流式补全时持续更新。如果渲染失败，会保留上一次成功的预览，同时保留源码。

1. 安装与引入

bash

pnpm add @terrastruct/d2

无需额外 CSS。保持 markstream-vue/index.css 在 reset 之后，并在使用 Tailwind/UnoCSS 时放入 @layer components：

css

@import 'modern-css-reset';

@layer components {
  @import 'markstream-vue/index.css';
}

2. 流式示例

vue

<script setup lang="ts">
import MarkdownRender
 from 'markstream-vue'
import { ref
 } from 'vue'

const content
 = ref
('')
const steps
 = [
  '```d2\n',
  'direction: right\n',
  'Client -> API: request\n',
  'API -> DB: query\n',
  'DB -> API: rows\n',
  'API -> Client: response\n',
  '```\n',
]

let i
 = 0
const id
 = setInterval
(() => {
  content
.value
 += steps
[i
] || ''
  i
++
  if (i
 >= steps
.length
)
    clearInterval
(id
)
}, 120)
</script>

<template>
  <MarkdownRender
 :content
="content
" />
</template>

快速试一下：

\`\`\`d2
direction: right
Client -> API: request
API -> DB: query
DB -> API: rows
API -> Client: response
\`\`\`

3. 高级组件：`D2BlockNode`

如果你需要工具栏（复制/导出/模式切换）或自定义主题、渐进节奏，可直接使用 D2BlockNode：

vue

<script setup lang="ts">
import type { D2BlockNodeProps } from 'markstream-vue'
import { D2BlockNode
 } from 'markstream-vue'

const node
 = {
  type
: 'code_block',
  language
: 'd2',
  code
: 'direction: right\nClient -> API: request\nAPI -> DB: query',
  raw
: 'direction: right\nClient -> API: request\nAPI -> DB: query',
} satisfies D2BlockNodeProps['node']
</script>

<template>
  <D2BlockNode
 :node
="node
" :progressive-interval-ms
="500" />
</template>

常用 props：

progressiveRender, progressiveIntervalMs 控制流式增量渲染节奏。
themeId, darkThemeId 指定 D2 主题。
showHeader, showModeToggle, showCopyButton, showExportButton, showCollapseButton 控制工具栏。

4. 深色模式

传入 :is-dark="true"（或在 MarkdownRender 外层添加 .dark）即可启用深色模式。组件会以应用主题为准，避免被系统偏好色打断。

5. 自定义 loader（可选）

如果你之前手动关闭了 loader，或需要从 CDN/全局变量加载：

import { enableD2
, setD2Loader
 } from 'markstream-vue'

// 重新启用默认 loader
enableD2
()

// 或设置自定义 loader
setD2Loader
(() => (window
 as any).D2)

当 @terrastruct/d2 未安装时会回退成源码展示，安装后会自动切换为预览。

D2 快速开始 ​

1. 安装与引入 ​

2. 流式示例 ​

3. 高级组件：D2BlockNode ​

4. 深色模式 ​