technical-diagram

Installation
SKILL.md

Technical Diagram

Produce the accurate technical figure a peer can verify, drawn so it stays readable where it will be shown. Two routes give the same editorial look from the same tokens: a semantic D2 source laid out by ELK, and direct SVG from the bundled template. SVG is the deliverable on both routes; keep the source beside the render so the figure is reproducible without a GUI.

Quick path

  1. Form the reader brief and semantic inventory below. Fix the reader and the one question before choosing nodes; every component and relation the peer needs to verify the answer is required.

  2. Read references/editorial-principles.md, choose the route in "Route decision", then read references/d2-authoring.md or references/direct-svg.md.

  3. D2 route: copy assets/editorial-theme.d2 beside the source, import it, author only the semantic structure, run d2 fmt <file>.d2, then render and gate:

    bash scripts/render_d2.sh <file>.d2 <file>.svg
    

    Direct SVG route: start from assets/direct-svg-template.svg, replace the nodes and connections, and gate:

    python3 scripts/validate_svg.py --target-width 720 --tokens assets/editorial-tokens.json <file>.svg
    
Installs
11
First Seen
Sep 4, 2026