Introduction
Turn a grounded explanation into SVG candidates you can compare and refine.
zudo-diagram-gen is a local review workspace for SVG diagrams. You and an agent establish what a drawing should explain; the agent writes SVG alternatives; you compare them at the intended size and choose what to refine. The saved SVG remains the starting point for each revision.
Take one diagram through the loop
Create a session. Give the work its own directory, brief, and target dimensions.
Ground the explanation. Read the actual feature, preserve its labels and relationships, and record what the drawing leaves out.
Add candidates. Write complete SVG files and metadata with stable IDs. Use the 24 tone references to explore useful differences in drawing style.
Review at the target size. Compare candidates, shortlist possibilities, and choose one direction. Record what to keep and what to change.
Transfer the decision. Copy feedback or download review JSON for the agent. Review controls save state in the browser; they do not edit the workspace or resume the agent.
Refine and export. Copy the chosen SVG into a later round under a new ID, make the requested changes, then export the exact candidate and theme you want to use.
Create your first session walks through these steps with a complete starter SVG. You can author files yourself or ask an agent to follow the same instructions.
Explore a session before creating one
The worked examples contain six sessions. One explanation, ten directions compares ten treatments of the same Composer explanation, followed by one illustrative refinement. Its second round demonstrates lineage; it does not record a user's approved choice.
The other five sessions each explain a different subject. They show how a shared drawing family adapts to a specific feature and placement:
| Session | Explanation to inspect | Preview size |
|---|---|---|
| Composer tone exploration | Pattern and text inputs become a composition that can be exported as an image. | 360 × 200 px |
| zudo-pattern-gen | A pattern background and text layer combine in a square UI study. | 360 × 200 px |
| zudo-text | Split preserves the existing Note Tray and creates an Empty frame; choosing its component is a separate step. | 280 × 156 px |
| zudo-doc-cloud | Move selected changes A and B into Draft: Guide while C remains on Workbench. | 360 × 200 px |
| zudo-ez-host | Save to a cloud checkpoint and Publish to the live site are separate actions. | 360 × 200 px |
| zzmod | Audio travels through VCO, VCF, and VCA; the envelope supplies control voltage to VCA. | 480 × 267 px |
These are authored studies grounded in the source references recorded in their briefs. Their preview dimensions are proposed review sizes. Recheck current feature behavior, labels, and the destination component before integrating a study into a product.
Know what the app supplies
The installed engine supplies the gallery, comparison and placement views, browser review state, validation, and exports. A session supplies its brief, JSON metadata, and SVGs. The initializer creates the small zfb host that joins them together. See Architecture for that boundary.
The proposed Claude Code / skill and personal / wrapper are described in Agent workflow. They are future integrations; there are no installable Claude Code skills included with the app. The local workflow in these guides uses the implemented files and CLI.
Continue with Your first session, or open Reviewing candidates alongside an example gallery.