Turn a web codebase into a local, evidence-backed Flow Canvas your product team can explore. Every screen is a real screenshot, every arrow is an action found in the code with file:line evidence and a confidence tier. Nothing leaves your machine.
Supported today: Next.js App Router, React Router (v6/v7), static HTML folders — see adapters.
npm i -g design-os-code2flow
code2flowNode 20+, Google Chrome, and the target app's development server are required.
code2flow init /path/to/your-app # config, .gitignore, AGENTS.md section, agent skills
code2flow run /path/to/your-app # dev server → scan → screenshots → lint → offline export
code2flow serve /path/to/your-app # http://127.0.0.1:4317Start with the user guide — install to hand-outs, step by step.
See the product map first. Features and the transitions between them, before any single flow.
Inspect what the code found. Click a screen or an edge pill: trigger, target, confidence, file:line evidence.
Recognize UI states. Modals, tabs, drawers, dropdowns and hover overlays are frames of their own, on a tinted container next to their page.
Present one story at a time. A clean lane per story, keyboard stepping, both sidebars out of the way.
Play every step. Grid view shows every screenshot of a story in order; click a card for Focus view, one step at a time with the evidence beside it.
Keep the legend close. The left rail holds features, stories and the arrow legend; every canvas icon explains itself on hover.
- User guide
- Getting started
- Configuration reference —
code2flow.config.json,code2flow.stories.json - Ingestor adapters
- Confidence tiers and capture policy
- Decisions: docs/adr/
For agents: skills code2flow-map-codebase, code2flow-answer-flow-questions, code2flow-stories-from-prd ship in the package and are copied into your repo by code2flow init.
npm run cli -- scan fixtures/synthetic/app-router-basic # run from source (tsx)
npx tsc --noEmit && npx vitest run # browser tests drive the installed Chrome
npm run recall # parser vs hand-labelled ground truth
npm run audit:design # design:os floors on a fixture exportLayout: src/parser (adapters → CanonicalFlowGraph), src/snapshot (Playwright capture), src/lint, src/viewer (vanilla TS + SVG), all sharing only src/schema.