Skip to content
Get packs

Blueprint Figure SVG Drawer

Draws consistent, real-named SVG diagrams for lessons, READMEs and manuals.

Source Download skill
Repository
rohitg00/ai-engineering-from-scratch
Stars
76,331
Licence
MIT
Files
5 files

What it does

When installed, the agent can produce a single static SVG diagram that explains one mechanism of a real system, such as a sequence of calls, a state machine, or a data flow. It follows a fixed visual style: a light paper background, a small set of colours with fixed meanings, standard arrow and border styles, and minimum text sizes. It also runs a script to generate the SVG and checks the result for label fit and valid markup before handing it back.

Great for

  • Course authors and documentation writers who want diagrams that match a consistent house style
  • Developers who have a log, capture, spec or source code and want a figure that uses its real names
  • Teams producing README or manual images that must stay readable in print and on screen

Skip it if

  • Animated or interactive figures, which need a different tool (the skill itself points to a sibling skill), because this one only produces static SVG
  • Charts of numeric data over many points, since the skill directs such work to a chart tool
  • Figures for a system whose real names are not available, since the skill asks for a capture or source first, otherwise it would draw generic boxes

Try asking

  • “Draw a blueprint figure showing the sequence of calls between the client, API and database in this capture”
  • “Make a state machine figure for the task lifecycle in this source file”
  • “Add a diagram to the manual showing which layers own which parts of the request pipeline”
  • “Create a figure for this lesson comparing the two retry behaviours in the log”
Step-by-step guide: how to use Blueprint Figure SVG DrawerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    blueprint-figure.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip blueprint-figure.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip blueprint-figure.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a real capture, log, spec or source file with the names you want shown; the skill refuses to invent generic labels.
  • Ask for one claim per figure; if the content fits two kinds, request two figures.
  • Review the rendered PNG at 100% and 50% width, since the checks cannot judge visual clarity fully.

What's inside

  • references/checks.md
  • references/grammar.md
  • references/kinds.md
  • SKILL.md
  • templates/figure.mjs

Redistributed unmodified from rohitg00/ai-engineering-from-scratch under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.