DSL syntax

# Comments start with #.
@layer Layer name              # set the current layer

id : Label / sublabel          # define a node (sublabel optional)
a -> b : edge label            # directed edge (label optional)

@cite Custom bottom-right text # optional cite line

That’s the whole language. Layers stack vertically, nodes flow horizontally inside each layer, edges are auto-routed.

Use it at build time

The same DSL that powers this in-browser editor ships as @plinth-dev/sketch on npm. Install once, render diagrams at build time, embed the SVG in your README:

npm install -g @plinth-dev/sketch
plinth-sketch architecture.sketch -o architecture.svg

Or wire up the GitHub Action to re-render on every commit:

- uses: plinth-dev/sketch@v0
  with: { pattern: 'docs/**/*.sketch', commit: 'true' }

View source on GitHub →