From mindmap
to blueprint.

One small language for every kind of figure — pretty by default, precise when it has to be.

source

{
  direction: column; gap: 72;
  |-| { stroke: --gray-deep; font-size: 12; }
  .rose  { fill: --rose-wash;  stroke: --rose-deep; }
  .sky   { fill: --sky-wash;   stroke: --sky-deep; }
  .amber { fill: --amber-wash; stroke: --amber-deep; }
  .lime  { fill: --lime-wash;  stroke: --lime-deep; }
  .iconic { direction: row; gap: 8; padding: 12 18; }
  |icon| { fill: --rose-soft; stroke: --rose-deep; }
}
|box#users| .rose.iconic [ |icon| "users"; "Users" ]
|group#svc| "Service" { layout: grid; columns: repeat(2); gap: 50; padding: 26; } [
  |box#api| "API" .sky
  |slant#db| "Postgres" .amber
  |oval#worker| "Worker" .lime
  |box#mail| .rose.iconic [ |icon| "envelope"; "Mail" ]
  api -> db
  api --> worker "jobs"
  worker -> mail
]
users:bottom -> svc.api "HTTPS"

{
  layout: tree; direction: row; gap: 50;
  .eng { fill: --sky-wash;   stroke: --sky-deep;   color: --sky-ink; }
  .des { fill: --rose-wash;  stroke: --rose-deep;  color: --rose-ink; }
  .ops { fill: --amber-wash; stroke: --amber-deep; color: --amber-ink; }
  #eng |-| { stroke: --sky-deep; }
  #des |-| { stroke: --rose-deep; }
}
|topic#co| "Founders" [
  |topic#eng| "Engineering" .eng [
    |topic| "Platform" .eng
    |topic| "Product" .eng
  ]
  |topic#des| "Design" .des [
    |topic| "Brand" .des
  ]
  |topic#ops| "Operations" .ops
]

|chart| "Signups" {
  width: 440; height: 280;
  categories: "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun";
} [
  |bars| "Free" { data: 24, 31, 28, 44, 39, 22, 18;
                  fill: --purple-soft; radius: 6; }
  |line| "Paid" { data: 8, 11, 14, 13, 19, 9, 7;
                  stroke: --rose; curve: smooth; marker: circle; }
]

{
  layout: sequence; gap: 45 55;
  .app  { fill: --sky-wash;   stroke: --sky-ink; }
  .auth { fill: --purple-wash; stroke: --purple-ink; }
  .api  { fill: --lime-wash;  stroke: --lime-ink; }
}
|box#app|  "App"  .app
|box#auth| "Auth" .auth
|box#api|  "API"  .api

app  ->  auth "sign in"
auth --> app  "token"
app  ->  api  "GET /me"
api  --> app  "profile"

{
  layout: grid; columns: repeat(2); gap: 75;
  .a { fill: --purple-wash; stroke: --purple-ink; }
  .b { fill: --teal-wash;   stroke: --teal-ink; }
  .c { fill: --amber-wash;  stroke: --amber-ink; }
}
|entity#author| "Author" .a {
  columns: repeat(3); cell: 1 1;
} [
  "PK" "id"   "int"
  ""   "name" "varchar"
]
|entity#post| "Post" .b {
  columns: repeat(3); cell: 2 1;
} [
  "PK" "id"        "int"
  "FK" "author_id" "int"
  ""   "title"     "varchar"
]
|entity#tag| "Tag" .c {
  columns: repeat(3); cell: 2 2;
} [
  "PK" "id"   "int"
  ""   "name" "varchar"
]
author +-< post
post   >-< tag

{
  .edge { fill: none; stroke: --stroke-dark; }
}
|drawing#plate| "COVER PLATE" { scale: 1; clearance: 20 } [
  |rect#body| .edge { width: 80; height: 50; radius: 16; }

  |hole#bolt| { width: 8; translate: -24 0;
                pattern: grid(2, 1, 48, 0); }

  body:left (-) body:right  { side: bottom; }
  body:top  (-) body:bottom { side: right; }
  bolt (o)
]

{
  layout: schematic; padding: 5 20;
  |v3::label|   { symbol: power; } [ "3V3" ]
  |gpio::label| { symbol: power; } [ "GPIO" ]
}
|R#r1|   "220R"
|LED#d1| "STATUS"
|Q#q1|   "2N3904"
|R#r2|   "10k"

|v3| - r1 - d1.a
d1.k - q1.c
q1.e - |gnd|
|gpio| - r2 - q1.b

figure

One syntax, draw it all

The same six building blocks, from a flowchart to a circuit.
Combine shapes, nest layouts, and make a style your own, or take the tour .

{
  direction: row; gap: 58; clearance: 14;
  |-| { stroke: --gray-deep; }
  .dry { fill: --purple-wash; stroke: --purple-ink; }
  .wet { fill: --rose-wash; stroke: --rose-ink; }
}

|group#mix| "Larder" { direction: column; gap: 20; } [
  |box#flour| "Flour" .dry
  |box#sugar| "Sugar" .dry
  |oval#binder| "Binder" .wet
  |cyl#water| "Water" .wet
]
|oval#bowl| "Bowl"
|slant#stack| "Pancakes" .dry
mix.flour & mix.sugar & mix.binder & mix.water -> bowl
bowl -> stack "fry"

A figure your agent
can read back

Give your agent SKILL.md and it can read a figure, change one line, and hand back the diff.

           +-- CI ---------------+
           |                     |
+------+   | +-------+   +-------+|
| Push |---->| Build |-->| Tests ||
+------+   | +-------+   +-------+|
           +----------------|--|-+
                       fail |  | pass
                            v  v
                    +--------+ +--------+
                    | Report | | Deploy |
                    +--------+ +--------+

5V
 |
 +----------+
 |          |
===      [ AMS1117 ]
10u      3 vin  vout 2
 |            |
GND          +----+------ 1 [ J1 ]
             |            2  3V3 OUT
            ===           |
            22u          GND
             |
            GND

    .-""""""-.
  .'          '.
 /   .-""""-.   \
|   /        \   |
|  |    ()    |  |
|   \        /   |
 \   '-....-'   /
  '.          .'
    '-......-'

Select a line to find what it drew.

+ report:left -> ci.build "retry"

“When tests fail, send the report back to Build so we can retry.”

+ U1.vout - |TP#TP1|

“Put a test point on the 3.3 volt rail so we can probe it.”

− body:bore (o) { side: right; }
+ body:bore (o) { side: right; tol: H7; }

“The bore is a press fit — put the tolerance on it.”

Dark mode ships inside the file

Every colour carries its own dark twin, so one exported SVG suits the page it lands on.

Name a hue, not a hex.

.drawing { fill: --purple-soft; stroke: --purple-ink; }
.review  { fill: --rose-soft;   stroke: --rose-ink; }
.revise  { fill: --teal-soft;   stroke: --teal-ink; }
.ship    { fill: --amber-soft;  stroke: --amber-ink; }