Code2Flow

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.

Install

npm i -g design-os-code2flow
code2flow

Node 20+, Google Chrome, and the target app's development server are required.

Quick start

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:4317

Start with the user guide — install to hand-outs, step by step.

What you get

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.

Docs

• 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.

Develop

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 export

Layout: src/parser (adapters → CanonicalFlowGraph), src/snapshot (Playwright capture), src/lint, src/viewer (vanilla TS + SVG), all sharing only src/schema.