generate_diagram
Generate architecture, flowchart, sequence, class, ER, and mindmap diagrams from D2 or DOT source code, rendered locally to vector SVG without external installations.
Instructions
Generate architecture / flowchart / sequence / class / ER / mindmap diagrams (架构图/流程图/时序图/类图/ER图/思维导图/示意图), rendered locally to vector SVG. The D2 and Graphviz engines are BUILT IN (WASM, bundled with this tool) — you do NOT need d2/dot/graphviz installed, do NOT run which d2/which dot, and do NOT shell out to them or write DOT files by hand; just call this tool and provide the D2 or DOT DSL. Prefer this for structured technical diagrams (architecture, flowchart, sequence, ER, class). LIMITS: D2 produces clean auto-laid-out diagrams with shapes/connections/basic style (fill/stroke/shadow/border-radius/gradients) — it does NOT support SVG filters (feGaussianBlur glow/blur), ambient lighting, vignette, pattern grids, or artistic depth effects. For highly stylized '酷炫/霓虹/科技感' graphics requiring glow/blur/depth beyond what D2 offers, hand-writing SVG is appropriate. mermaid is not supported in-process (needs a browser); use d2 or graphviz instead. Multilingual triggers: 図 · diagrama · diagramme · Diagramm · диаграмма · diagrama (ja/es/fr/de/ru/pt).
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | D2 or DOT source code. D2 SYNTAX (full docs: https://d2lang.com): RULE 1: in { } blocks, each property on its OWN LINE (newline-separated). WRONG: `x: { fill: red; shape: oval }`. RIGHT: x: { shape: oval style.fill: red } RULE 2 (CRITICAL): `#` starts a COMMENT. Hex colors MUST be quoted: `style.fill: "#f0ff3a"` (WRONG: `style.fill: #f0ff3a`). Named colors don't need quotes: `style.fill: red`. Gradients: `style.fill: "linear-gradient(#hex, #hex)"` (quoted) or `style.fill: linear-gradient(red, blue)` (named). RULE 3 (CRITICAL): numeric properties accept INTEGERS ONLY (NOT floats). `style.stroke-width: 2` ✅, `style.stroke-width: 1.5` ❌ ERROR. SHAPES: rectangle(default), oval, circle, diamond, hexagon, cylinder, cloud, person, page, step, stored_data, package. LAYOUT: `direction: right` (or left/up/down) at top level only. CONNECTIONS: `a -> b: label`, `a <-> b`, chain `a -> b -> c`. STYLE (value types matter!): style.fill / style.stroke / style.font-color → color: named (red) or hex QUOTED ("#ff0000") or gradient QUOTED. style.stroke-width → INTEGER 0-15 (NOT float!) style.stroke-dash → INTEGER 0-10 style.font-size → INTEGER 8-100 style.border-radius → INTEGER 0-20 style.opacity → FLOAT 0-1 style.shadow / style.3d / style.double-border / style.bold / style.italic → true or false style.text-transform → uppercase / lowercase / title / none width / height → INTEGER (pixels) CONTAINERS: nested { }; cross-ref `parent.child`. ICONS: `icon: lucide:server` (Iconify set:name, auto-resolved by this tool). EXAMPLE (styled): direction: right db: { shape: cylinder style.fill: "#1a1a2e" style.stroke: "#f0ff3a" style.stroke-width: 2 style.shadow: true } api: { shape: hexagon style.fill: "#16213e" style.border-radius: 14 } api -> db: query MISTAKES: (1) space-separating properties on one line = ERROR. (2) Unquoted hex (# starts comment) = ERROR. (3) Float for integer property (1.5 for stroke-width) = ERROR. (4) Referencing by label not key. (5) `direction:` is top-level only. Graphviz DOT (semicolons OK): digraph G { rankdir=LR; A -> B; C } | |
| name | No | Output filename (without extension) | |
| theme | No | Theme (D2 theme name or ID; d2 only) | |
| engine | No | Render engine: d2 (D2 WASM, default) or graphviz (DOT). mermaid is listed for discoverability but unsupported in-process — use d2/graphviz. | d2 |
| format | No | Output format (svg = vector high-res) | svg |
| outDir | No | Output directory, default session-dir/output | |
| diagramType | No | Diagram type hint (flowchart/sequence/class/architecture...) |