Write and verify D2 architecture diagrams rendered as terminal text with TALA layout.
npx skills add https://github.com/mizchi/vlmkit --skill d2-diagram-mizchi
Please help me install this Agent Skill. Skill: d2-diagram Source: https://github.com/mizchi/vlmkit/tree/main/.apm/skills/vlmkit/workflows/d2-diagram Command: npx skills add https://github.com/mizchi/vlmkit --skill d2-diagram-mizchi
d2-facts.mjs script extracts boxes, containers, edges, and column width from the SVG render and checks them against a JSON sheet, catching duplicates, reversed edges, overlaps, and truncation. - Task routing and width tuning: Route architecture, data-model, sequence, class, and deployment diagrams to the right D2 shapes, then apply measured levers (root direction, per-container direction, seeds, pins) to fit a column budget. - Use Case: You need an architecture diagram that lives as editable text in the repo and displays in a terminal. Write the fact sheet first, write the .d2, then loop validate → facts check → PNG review → terminal render until every gate passes. ## Quick Start Draw the service architecture of this repository as a D2 diagram with TALA layout, verify it against a fact sheet, and show me the terminal render.High-intent search queries and answers about installing and using this skill.
Run `d2 --layout=tala arch.d2 arch.txt` for a Unicode box-drawing render, or add `--ascii-mode standard` for plain ASCII suitable for READMEs. Use `--stdout-format ascii -` to pipe the render to stdout.
D2 itself only validates syntax, so write a JSON fact sheet listing expected boxes, edges, and containers, then run `node assets/d2-facts.mjs arch.d2 --expect facts.json`. It reads the drawn shapes back from the SVG render and reports missing, reversed, or forbidden edges.
A reference to an id that is not in scope silently creates a new shape instead of failing. Write cross-container connections at the root with full paths like `edge.gateway -> cluster.orders`, or use `_.` from inside a container to reach its parent level.
TALA is bundled with D2 since version 0.9.0 and is also present in some earlier builds; check with `d2 layout`, which must list `tala (bundled)`. Pass `--layout=tala` explicitly because the in-file config is ignored for text renders on some builds.
Width levers are not monotone: try the root `direction`, then the `direction` of the fullest container, then `--tala-seeds`, measuring with `LC_ALL=C.UTF-8 wc -L` after each change. A `top`/`left` pin can push shapes off the ascii canvas while d2 exits 0, so re-check the render after pinning.
Avoid D2 text renders for animations or step-by-step walkthroughs, which need a different tool. Also split diagrams with more than about thirty shapes into multiple files, since TALA's runtime is nonlinear and large layouts read poorly regardless of engine.
niuma996Analyze source code and generate domain-organized Wikis with Mermaid diagrams.
bennoloefflerGenerate D2 source and compile it into SVG and PNG diagrams.
bbakRender a dark-themed Flow Debt chart from analyze_flow_debt output.
agnt-ggGenerates mathematical and technical animation videos using Manim Community Edition and Python.