Architecture diagram (Pikchr)

Pikchr is a modern PIC: objects are placed relative to whatever came before them, which makes small technical figures very quick to write once the idea clicks.

#What this example shows

• Relative placement, which is the whole language.

• Named objects, referenced later.

• Arrows drawn between named points.

#A worked example

Open it, edit it, or copy the source below.

The source, which you can paste into a new diagram and edit:

boxwid = 0.9
boxht = 0.4

BROWSER: box "Browser" fit
arrow right 0.5 "HTTPS" above
EDGE: box "CDN" fit
arrow right 0.5
API: box "API" fit
arrow right 0.5
DB: cylinder "Postgres" fit

arrow down 0.5 from API.s
QUEUE: box "Job queue" fit
arrow right 0.5 from QUEUE.e
WORKER: box "Worker" fit

arrow from WORKER.n to DB.s
line dashed from EDGE.s down 0.35 then right 1.0 "cache miss" below

#Making it your own

• Objects are placed relative to the previous one, so source order is layout.

• Named objects let you draw back to something earlier.

• For anything large, a layout engine will save you time.

#Related

Specialists. Borrow one when you need it.