Creating diagrams

Turn a description of what a diagram must show into D2 source, a rendered SVG, and alt text, then prove it is readable where it will be shown.

Script paths below are relative to this skill's folder. Run each as one command with the folder's absolute path in front, never chained with &&, $(…), or heredocs.

Inputs

• What it must show: the message, the subjects, and the relationships. In a slide deck this is the slide's Visual Intent.
• Output path for the .svg. The PNG and ASCII previews are written beside it.
• Theme values (optional): a JSON file of CSS custom properties (--color-bg, --color-text, --color-surface, --color-muted, --color-accent, --color-on-accent). Without one, a neutral palette is used.
• Slot size (optional): the space the diagram will fill, in px on a 1280×720 reference, as WIDTHxHEIGHT. The default is a 16:9 slide's content area, 1164x616.

Workflow

Copy this checklist and tick it off: