Legends

Any diagram may carry a legend. It renders as a card of swatch-and-meaning entries, placed above the diagram inside the wrapper frame, a key that explains what your colours, icons, shapes, and connectors mean.

API [aws/api-gateway]
Worker [aws/lambda, green]
Store [cylinder, blue]
API -> Worker
Worker --> Store: async

legend {
  green: Compute
  blue: Storage
  -->: Async call
}

Swatches#

A swatch is any vocabulary word, and the legend draws the matching sample:

• a palette colour → a colour chip;
• an icon (aws/lambda, server) → a small glyph;
• a node shape (diamond, cylinder) → a small outline;
• a connector token (->, -->, <->) → a line sample, dashed or arrowed to match.

flowchart
Start [ellipse] -> Check [diamond]: ok?
Check -> Ship [rectangle]: yes
Check -> Hold [rectangle]: no

legend {
  diamond: Decision
  rectangle: Process
  ->: Flow
}

Automatic placement#

The legend lays out as a single horizontal strip when its entries fit the diagram's width, and falls back to a vertical list when they do not, so it never grows wider than the diagram it annotates. Placement and orientation are automatic; you only write the entries.

title: Network zones

group DMZ [orange] { Gateway [server], WAF [server] }
group Private [blue] { App [server], DB [cylinder] }

Gateway -> WAF -> App -> DB

legend {
  orange: Public zone
  blue: Private zone
  server: Service
  cylinder: Datastore
  ->: Traffic
}