drawing.sh

Diagrams your agent can draw.

Install the skill and ask for a diagram. Your agent writes a few lines of text; drawing places the boxes, routes every arrow around them and hands back an SVG with zero crossings.

npx skills add dxos/dxos --skill drawing

Works with Claude Code, Cursor, Codex and any agent that reads SKILL.md. Without an agent: npx -y @dxos/drawing render arch.dx

arch.dx — written by the agent
diagram aspect=16:9
group web "Web app" {
  node Browser "Browser"
  node Api "API server" right-of Browser
}
group data "Storage" compact {
  node Db "Postgres"
  node Cache "Redis"
}
node Queue "Queue"
node Worker "Job worker"
edge Browser -> Api "HTTPS"
edge Api -> Db "reads, writes"
edge Api -> Cache
edge Api -> Queue "enqueue"
edge Queue -> Worker
edge Worker -> Db
$ drawing render arch.dx
8 nodes, 6 connectors
0 crossings, 1 bend
wrote arch.dx.svg
Web appStorageBrowserAPI serverPostgresRedisQueueJob workerHTTPSreads, writesenqueue

From a question to a picture in one turn

Agents describe systems well and draw them badly. drawing splits the job: the agent says what connects to what, and a layout engine decides where everything goes.

  1. Install the skill

    One command teaches your agent the diagram language and the drawing command.

  2. Ask for a diagram

    “Draw how a request moves through our services.” The agent reads the code and writes the .dx file.

  3. Get an SVG

    drawing lays it out in about a second. Put the SVG in a README, a pull request or a design doc.

Say what's related, not where it goes

Name the relationship and the right arrowhead follows. There are no coordinates to get wrong; add a placement hint only when you want one.

edge Dog extends Animal

a subtype, with a hollow triangle

DogAnimal
edge Store implements Readable

a contract, dashed

StoreReadable
edge Car composes Engine

a part that lives and dies with the whole

CarEngine
edge Team owns Player

a part that can outlive the whole

TeamPlayer
edge App depends-on Logger

a dependency, dashed with an open arrow

AppLogger
edge Customer one-to-many Order

cardinality, with a crow's foot

CustomerOrder

The SVG is the drawing

A .dx.svg is an ordinary image, and it also carries everything needed to edit it again. Nothing is locked in a service you have to log in to.

Try Composer
  • Shows up anywhereGitHub, browsers and docs render it like any other SVG.
  • Re-renders from textThe source rides inside the file, so the next edit is a diff, not a redraw.
  • Opens as a live canvasImport it into a Composer space with dx drawing import and keep editing it with your team and your agents.