# D2 quick start

D2 diagrams render progressively in markstream-vue: as soon as the syntax becomes valid, a preview appears and keeps refining as more tokens stream in. If rendering fails, the last successful preview stays visible and the source is preserved.

## 1. Install & import

```bash
pnpm add @terrastruct/d2
```

No extra CSS import is required. Keep `markstream-vue/index.css` after your reset and inside `@layer components` if you use Tailwind/UnoCSS.

```css
@import 'modern-css-reset';

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

## 2. Streaming example

```vue twoslash
<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>
```

Quick try — paste this Markdown into a page or component:

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

## 3. Advanced component: `D2BlockNode`

Use `D2BlockNode` if you want toolbar controls (copy/export/mode toggle) or to override themes and progressive timing.

```vue twoslash
<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 to know:
- `progressiveRender`, `progressiveIntervalMs` control incremental re-rendering while streaming.
- `themeId`, `darkThemeId` let you pin a D2 theme.
- `showHeader`, `showModeToggle`, `showCopyButton`, `showExportButton`, `showCollapseButton` control the toolbar.

## 4. Dark mode

Pass `:is-dark="true"` (or add a `.dark` ancestor via `MarkdownRender`) to render the diagram in dark mode. markstream-vue prefers the app theme over OS preference to keep previews stable.

## 5. Custom loaders (optional)

If you disabled the loader earlier, or want to load from a CDN/global build:

```ts twoslash
import { enableD2, setD2Loader } from 'markstream-vue'

// Re-enable the default loader
enableD2()

// Or supply your own loader
setD2Loader(() => (window as any).D2)
```

If `@terrastruct/d2` is missing, the renderer falls back to showing the source text until it becomes available.