Render D2 Diagram
d2_renderRender D2 diagram source code to SVG or ASCII art directly via WASM, eliminating the need for a local d2 binary. Produce diagrams from code quickly for embedding, preview, or terminal display.
Instructions
Render D2 diagram source code to SVG or ASCII art using the D2 WASM engine.
D2 is a diagram scripting language. This tool compiles and renders D2 code without requiring the d2 binary — it uses the @terrastruct/d2 WASM package directly.
Args:
d2_code (string): D2 source code to render
theme_id (number): Theme ID (default: 0). See d2_list_themes for options. Key themes: 0=Neutral Default, 3=Flagship Terrastruct, 300=Terminal, 200=Dark Mauve
dark_theme_id (number): Dark mode theme ID (optional)
layout ('dagre' | 'elk'): Layout engine (default: 'dagre'). WARNING: elk is extremely slow in WASM — do NOT use unless explicitly requested. Dagre handles all diagram types well.
sketch (boolean): Hand-drawn style (default: false)
pad (number): Padding pixels (default: 100)
center (boolean): Center in viewbox (default: false)
scale (number): Scale factor, e.g. 0.5 halves size. Default fits SVG to screen. Set 1 to disable.
animate_interval (number): Animate multi-board diagrams (layers/scenarios/steps) at this ms interval. Requires target to be set. E.g. animate_interval=1000, target='*'
target (string): Which board to render. '*' = all boards (needs animate_interval > 0). 'layers.x' = specific layer. Default = root board only.
ascii (boolean): Output ASCII art instead of SVG (default: false)
ascii_mode ('standard' | 'extended'): ASCII char set. 'extended' uses Unicode (default).
no_xml_tag (boolean): Omit declaration for direct HTML embedding (default: false)
skip_fonts (boolean): Strip embedded font data from SVG (DEFAULT: true). Only set false if user explicitly requests embedded fonts.
Returns: SVG markup string (or ASCII art if ascii=true). SVG output starts with (unless no_xml_tag=true)
Examples:
Simple: d2_code="a -> b: connects"
Architecture: d2_code="server -> db: query\nserver -> cache: read"
Styled: d2_code="x: { style.fill: '#4a90d9' }\nx -> y", theme_id=3
ASCII preview: d2_code="a -> b -> c", ascii=true
Animated steps: d2_code="steps: { s1: {a} s2: {a -> b} }", animate_interval=1000, target="*"
With embedded fonts: skip_fonts=false (only when user explicitly requests it)
HTML embed: no_xml_tag=true
Error Handling:
Returns error with syntax details if D2 code is invalid
Use d2_validate first to check syntax before rendering
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| pad | No | Padding in pixels around the diagram (default: 100) | |
| ascii | No | Render as ASCII/Unicode art instead of SVG (default: false). Useful for terminal display, text-only contexts, and fast structural previews before committing to a full SVG render. | |
| scale | No | Scale factor for the output SVG. E.g. 0.5 halves the size. By default D2 renders SVGs that fit to screen. Set to 1 to disable fit-to-screen. Not applicable to ascii output. | |
| center | No | Center the SVG in its viewbox (default: false) | |
| layout | No | Layout engine: 'dagre' (default, recommended for all diagrams — fast and handles nested containers well). 'elk' is extremely slow in WASM (can take minutes) — do NOT use it unless the user explicitly requests it. | |
| sketch | No | Render in hand-drawn/sketch style (default: false) | |
| target | No | Which board to render. Defaults to root board only. Use '*' to render all layers/scenarios/steps (requires animate_interval > 0 for multi-board). Use 'layers.x.*' to render layer 'x' and all its children. Use 'layers.x' to render only layer 'x'. | |
| d2_code | Yes | The D2 diagram source code to render | |
| theme_id | No | Theme ID (default: 0 = Neutral Default). Use d2_list_themes to see all options. Popular: 300 (Terminal), 200 (Dark Mauve), 3 (Flagship Terrastruct) | |
| ascii_mode | No | ASCII rendering character set. 'standard' uses basic ASCII chars, 'extended' uses Unicode box-drawing chars (default: 'extended'). Only applies when ascii=true. | |
| no_xml_tag | No | Omit the <?xml ...?> declaration from SVG output (default: false). Useful when embedding SVG directly in HTML. | |
| skip_fonts | No | Strip embedded font data from SVG output (default: TRUE). Removes ~500KB of base64 WOFF data — SVG falls back to system fonts which look identical in practice. Only set to false if the user explicitly requests embedded fonts. No effect on ascii output. | |
| dark_theme_id | No | Theme ID to use when the viewer's browser is in dark mode. If unset, theme_id is used for both modes. | |
| force_appendix | No | Always include the SVG appendix for tooltips and links, even if none are present in the diagram (default: false). Useful when you plan to add tooltips/links via post-processing. | |
| animate_interval | No | If set, packages multiple boards (layers/scenarios/steps) into one animated SVG, cycling through boards at this interval in milliseconds. Requires target to be set (e.g. target='*' for all boards). Use with diagrams that define layers/scenarios/steps. |