sketchlooplisted

# sketchloop: hand-drawn diagrams, rendered offline Turn a natural-language request into a real **hand-drawn-style image**. You author a [D2](https://d2lang.com) text file (terse, auto-laid-out, no coordinate math); a bundled script renders it to a sketchy PNG **with no browser, no Node, no network**. Then you do the thing that makes this skill different: **you look at the rendered PNG and fix your own diagram** in a short loop. Deliverables are the `.png`, the `.svg`, and the editable `.d2`. ## Workflow ### 1. Design, then author a `.d2` For anything beyond a few boxes, decide what the diagram should *argue* and pick a shape that mirrors it (a flow left-to-right, a fan-out for one-to-many, a cycle for a loop, a tree for a hierarchy), not a uniform grid of boxes. Then write a `.d2` file into a `sketches/` folder under the user's current directory (create it if missing), e.g. `sketches/<topic>.d2`. If the user names a location, or the work is already happening in a diagrams/docs directory, use that instead; don't nest a `sketches/` folder inside it. Read **`reference/d2-cheatsheet.md`** for the syntax (shapes, connections, containers, styling, sequence/ER diagrams) and the offline gotchas. The essentials: ```d2 direction: right user: User { shape: person } api: API Gateway db: Database { shape: cylinder } user -> api: request api -> db: query ``` **Shape the layout: aim for a balanced rectangle, never a thin strip.** A wide strip of tiny labels is the #1 failure; apply