Code Flow Map

Code Flow Map shows how a codebase really works: its services, the business flows through them (checkout, sign-up, refunds) and what each step reads and writes. Your own coding agent, such as Claude Code or Codex, reads the repository and writes the map; this page checks every claim against the code and lets you explore it, play each flow step by step and jump from any arrow to the line it came from.

Features

Works with the coding agent you already use: a prompt to copy, plus an MCP server (npx devtools-run mcp) with the map format and a checker
Every service, trigger and step cites a file, a line and the code itself, and is checked against your repository
Citations whose line moved are found again by their code; claims without evidence are marked unverified, never drawn as fact
Service map laid out automatically: frontends, gateways, services, workers, databases, queues and third-party APIs
Flows play step by step, synchronous calls and events told apart, with the cited source shown next to each step
Tables of each database with the flows that read and write them
Opens a project folder and redraws as the agent writes the map (Chrome and Edge); a .zip or the map file alone work everywhere
Your code never leaves your machine: the page reads the folder locally and the agent runs where you run it

How to use it

Open your project folder (or try the sample).
Copy the prompt into Claude Code, Codex or another coding agent; it writes .devtools/flow-map.json and checks it.
Explore the map: pick a flow, play it, click any step to see its code.

FAQ

Does my code get uploaded?

No. The page reads the folder in your browser, and the map is written by a coding agent running on your machine (or wherever you already run it). Nothing is sent to our server.

Why use my own coding agent instead of a built-in AI?

Agents like Claude Code and Codex can already read a whole repository, search it and follow calls between services, and you already pay for them. There is no API key to paste into a website, and the map stays as good as the best agent you have.

How do I know the map is right?

Every claim must cite the file, line and code it comes from, and every citation is checked against your repository, by the agent with devtools-run map check before you see it and again by this page. Lines that moved are found again; anything without evidence is marked unverified.

What is the MCP server for?

It gives the agent two tools: map_format (how to write the map) and check_map (what to fix). Add it with: claude mcp add devtools -- npx -y devtools-run mcp. Agents without MCP run the same commands in a shell.

More developer tools

API Studio

Build, test and automate HTTP requests right in your browser.

API Studio: Build, test and automate HTTP requests: collections, environments, tests and a runner.

Diagrams

Draw cloud architectures and watch the data flow.

Architecture Builder: Draw cloud architectures and data flows with AWS, Azure, GCP and 1,000+ components.

CI/CD

See, edit and check your CI/CD pipelines.

Pipeline Studio: See and edit your Bitbucket pipelines as a metro map, with checks for mistakes Bitbucket would reject.

Data

Query, browse and edit data files and SQLite databases.

Database Studio: Query, browse and edit CSV, Excel, Parquet and SQLite files with SQL, right in your browser. Nothing is uploaded.

System Design

Simulate traffic through a system design and find its limits.

System Design Simulator: Design a system, send it traffic and watch where it melts: latency, errors and the bottleneck.

Team Knowledge

Every error your team has hit, and how it was fixed.

Error Memory: Search every error your team has hit and how it was fixed; log new ones with their fix.

Codebase

How your services and flows really work.

Code Flow Map: See how your codebase works: services and business flows, every step linked to its code.

Formatters & Beautifiers

Make messy payloads, queries and markup readable.

JSON & Log Formatter: Repair, beautify and deep-decode JSON, Python dicts and log lines.
SQL Formatter: Pretty-print queries for 12 SQL dialects.
XML / HTML Beautifier: Beautify or minify HTML and XML, with validation.
JSON Diff: Compare two payloads side by side or as a change list.
SQL Diff: Compare queries, scripts or schemas as SQL, with schema changes and the migration.
JQ / JSONPath: Filter JSON with jq or JSONPath expressions.

Encoders & Decoders

Look inside tokens, encodings and escaped text.

JWT Debugger: Decode tokens, check expiry and verify HMAC signatures.
Base64 / Hex / Binary: Convert text and files between Base64, hex and binary.
URL / Query Parser: Split, edit and rebuild URLs and query strings.
HTML & Unicode Entities: Encode and decode HTML entities and Unicode escapes.

Generators

IDs, hashes, keys, placeholder text and typed code.

UUID / ULID / Hash: Generate UUIDs and ULIDs; hash text or files.
Lorem Ipsum: Placeholder paragraphs, sentences or words.
RSA / EC Key Pair: RSA and EC key pairs as PEM or JWK, via WebCrypto.
Schema & Code Generator: Turn sample JSON into TypeScript, Zod, Go, Rust, SQL and more.

Converters

Move data between formats, times and color spaces.

Unix Timestamp ↔ Date: Convert Unix timestamps to dates and back.
Color Converter: HEX, RGB, HSL and OKLCH with WCAG contrast checks.
Cron Parser: Explain cron expressions and list upcoming runs.
Format Converter: Convert between JSON, YAML, TOML, XML and CSV.

API & Debugging

Reproduce requests, read errors and sanitise logs.

Log → cURL: Rebuild a runnable cURL from logs, HAR or fetch calls.
HTTP Status Codes: Status codes with causes and fixes.
Payload Redactor: Strip secrets and personal data before you share.
Regex Tester: Test patterns live and explain them token by token.