Quickstart

1. Install

npm

npm install @ogabrielluiz/patchflow

pnpm

pnpm add @ogabrielluiz/patchflow

bun

bun add @ogabrielluiz/patchflow

yarn

yarn add @ogabrielluiz/patchflow

patchflow ships ESM + CJS builds and its own TypeScript declarations. Its only runtime dependency is dagre.

2. Render a patch

render.ts

import { render } from '@ogabrielluiz/patchflow';
import { writeFileSync } from 'node:fs';

const svg = render(`
- Oscillator (Out) -> Filter (In)
- Envelope (Out) >> Filter (Cutoff)
- Filter (Out) -> VCA (In)
- LFO (Out) >> VCA (CV)
`);

writeFileSync('patch.svg', svg);

That’s it. You’ll get an SVG you can drop into a README, a blog post, or a PDF.

Output of the snippet above, rendered at build time.

3. Switch to the dark theme

import { render, darkTheme } from '@ogabrielluiz/patchflow';

const svg = render(notation, { theme: darkTheme });

Or override just the bits you care about:

const svg = render(notation, {
  theme: {
    cable: {
      colors: {
        audio: { stroke: '#ff5f7a', plugTip: '#d94963' },
      },
    },
  },
});

The theme object is deep-merged into the default — you never have to specify a full theme unless you want to. See the Theming guide for the full surface.

4. Try it live

Head to the Playground to edit notation and see the SVG update in real time. Swap presets, toggle themes, copy the SVG to your clipboard, or download it as a file.

Next steps

1. Read the Notation syntax page to learn the full grammar.
2. Browse the Signal operators to see the supported cable types and their colors.
3. Skim the API reference for the lower-level parse() / layout() / renderSvg() entry points.