Patchbook-compatible
Uses the notation you might already know. Modules, ports, parameters, signal operators — same vocabulary as the Patchbook ecosystem.
patchflow
Patch diagrams,
as code.
Describe your eurorack rig in a Patchbook-compatible text notation. Render it as a skeuomorphic SVG block diagram — cables, sockets, parameter plates and all.
Why patchflow?
Section titled “Why patchflow?”Skeuomorphic, not cartoonish
Rendering that feels like a real panel — bevels, cable plugs, socket bezels, parameter plates — without slipping into kitsch.
Deterministic layout
Built on dagre. Identical input yields identical SVG. Perfect for CI-generated docs that stay in lockstep with your patches.
Fully themeable
Deep-partial theme merge. Swap cable colors, panel finish, fonts, or plug tips without forking the renderer.
TypeScript first
Types re-exported at every layer of the pipeline — parse, layout, renderSvg.
Build your own tooling on top.
No browser required
Renders to an SVG string. Use it in Node, Bun, the browser, a CLI, or a GitHub Action. The samples in this site are regenerated on every push.
One render, two halves
Section titled “One render, two halves”The library separates parsing, layout, and drawing. You can use the full
pipeline with render(), or swap any stage for your own.
import { render } from '@ogabrielluiz/patchflow';
const svg = render(`- Oscillator (Out) -> Filter (In)- Envelope (Out) >> Filter (Cutoff)- Filter (Out) -> VCA (In)- LFO (Out) >> VCA (CV)`);Ready to go?
Section titled “Ready to go?”Read the notation guide
Tweak the look
Explore the gallery
Gallery → — a curated set of real-world patches with the notation that produced them.
Dive into the API