Diagrams & Illustrations
Teach your agent to make clear, editorial-quality diagrams and explainer illustrations as code (HTML/SVG).
What we found works best
Use diagram-design for architecture, flow and comparison diagrams. Use graphify when you need a knowledge graph of a codebase or document set.
diagram-design outputs self-contained HTML/SVG you can version and edit, and it supports 44 diagram types according to its README. graphify answers 'how does this connect?' across code and docs.
Options we compared
| Option | Cost / account | Can act? | Source |
|---|---|---|---|
| ✅ diagram-design Editorial diagrams as self-contained HTML+SVG | free none | none | cathrynlavery/diagram-design MIT · ★ 54k · pushed 2026-10-13 |
| graphify A queryable knowledge graph from code, docs and schemas | free none | reads files | safishamsi/graphify Apache-2.0 · ★ 126k · pushed 2026-10-13 |
| Hand-drawn annotated illustrations (Ian Xiaohei skill, English port) Hand-drawn 16:9 explainer illustrations (an English port of helloianneo's original) | free (needs an image model) image-model access | may spend image credits | enitrat/ian-xiaohei-illustrations-english MIT · ★ 1 · pushed 2026-06-30 |
Steps
- Install diagram-design.
- Diagram one real system (architecture or flow) into
diagrams/*.html. - Check it renders standalone in a browser.
- Optional: graphify for dependency questions.
Traps to avoid
- Pretty diagrams that are factually wrong; always cross-check against the code
Safety
- Never send, post, publish or spend money or credits without the owner's OK.
- Don't diagram confidential systems into public repos.
- Image-based illustration may spend model credits, so get approval.
🔒 Pro plan: guided install
Exact commands for Claude Code, Codex, Grok Bot and Gemini CLI, pinned commits, one step at a time with next_lesson and check_lesson, plus updates.
Stars and last push were checked against the GitHub API. Install commands come from vendor and README docs and have not been executed by us. Marked "unverified" where we couldn't confirm.