{"slug": "flowchart-for-claude-code", "title": "Flowchart for Claude Code", "summary": "A local tool called fcc, at version 0.3.0, now generates a plain-language record after each Claude Code task that touches files, writing one Markdown file per task plus a JSON sidecar to docs/flow/ in the repository for the developer to commit alongside the code. Each record includes a headline, the reasoning behind the task, before-and-after behavior, a done/partial/missing checklist of requests, a verification list, and a runtime flowchart in domain language with added, changed and removed steps highlighted; every flowchart step is anchored to the functions that implement it, and links the call graph cannot support are drawn dashed and labeled \"inferred.\" The tool was developed on macOS, is expected to work on Linux, is untested on Windows, and sends only changed-symbol diffs, changed file names and the originating conversation to the model through the existing Claude Code login.", "body_md": "**Read less code, still know what changed.** After every Claude Code task that\ntouches files, fcc prints a link to a local page that explains the work in\nplain language, shows the behavior it changed, and keeps that explanation in\nyour repository as the project's development history.\n\nEarly days: version 0.3.0, written for its author's daily use and developed on macOS. It should work on Linux; Windows is untested.\n\nA headline, the **why** behind the task (goal, decisions, alternatives that\nwere dropped), the behavior before and after, each thing you asked for marked\ndone / partial / missing, and a short list of **what to verify**: unhandled\nerrors, changes nobody asked for, files changed outside Claude's edit tools,\nmissing tests. In the screenshot it caught that discount codes were\nimplemented in the backend but never wired into the checkout UI.\n\nThe text follows the language you write in.\n\nEach task also gets a flowchart of what happens at runtime, in domain language, with new, changed and removed steps highlighted. This is a real one, as GitHub renders it from the record fcc wrote:\n\n```\nflowchart TD\n  s1([\"Utente apre il checkout\"])\n  s2[\"Utente digita codice sconto\"]:::added\n  s3[\"Calcolo totale scontato\"]:::added\n  s4[(\"Mostra subtotale e totale scontato\")]:::added\n  s5[\"Utente clicca Paga\"]\n  s6[\"Invio ordine con codice sconto\"]:::modified\n  s7{\"Ordine creato con successo?\"}:::added\n  s8([\"Ordine completato\"])\n  s9([\"Errore codice non valido mostrato\"]):::added\n  s1 --> s2\n  s2 --> s3\n  s3 --> s4\n  s4 --> s5\n  s5 --> s6\n  s6 --> s7\n  s7 -->|\"successo\"| s8\n  s7 -->|\"codice non valido\"| s9\n  classDef added fill:#e3f3e7,stroke:#2f8a4c,color:#1f1e1c\n  classDef modified fill:#fbf0dc,stroke:#b7791f,color:#1f1e1c\n  classDef removed fill:#fbe4e2,stroke:#c2413a,color:#1f1e1c,stroke-dasharray:5 3\n```\n\nEvery step is anchored to the functions that implement it: click one in the page and you get their diff. A link the call graph cannot back is drawn dashed and labelled \"inferred\", so you always know what is grounded and what is the model talking.\n\nFunctions, methods and classes added, modified or removed, the calls between them, and their unchanged callers as grey context — grouped by file and package. One more click gives you the diff of a single symbol and a link that opens it in your editor.\n\nEvery task is also written to `docs/flow/` in your repo. The History tab shows\nthem as a timeline grouped by feature or by commit, tells you which tasks were\ncommitted, partly committed or discarded, and searches stories, decisions and\nfile names.\n\nOne Markdown file per task (plus a JSON sidecar that fcc reads), which **you**\ncommit together with the code it explains:\n\n```\n---\nfcc: 1\ntask: \"20260922-190815-6478\"\ndate: \"2026-09-22T17:08:15.759Z\"\nfeature: \"Codici sconto\"\nmodel: \"sonnet\"\n---\n\n# Il checkout mostra ora il totale scontato accanto al subtotale…\n\n## Why\n\nNel checkout, far vedere all'utente quanto sconto ottiene con il codice\ninserito e informarlo chiaramente se il codice non è valido…\n\n**Decisions**\n\n- Mostrare sia il totale scontato che il subtotale originale nel checkout\n- Gli errori di codice non valido vengono mostrati con role=\"alert\" invece\n  di fallire silenziosamente\n\n## Asks\n\n- ✓ Mostrare l'importo scontato nel checkout — Il componente calcola e mostra\n  'Totale: X (invece di Y)' usando Cart.total() e Cart.subtotal()…\n```\n\nThat \"why\" comes from the whole conversation that led to the task, not from the last message: after a long discussion that ends in \"ok, go\", the decisions you agreed on are still there.\n\nDon't want one? `/flow drop`, or the **Remove from repo** button in the page.\nDon't want any? `/flow private` for a session, or point `FCC_HISTORY_DIR` at a\ngitignored directory.\n\nfcc is a local tool with one outbound path: writing the story.\n\n- **Sent to the model** : the diffs of the changed symbols, the changed file\nnames, and the conversation that led to the task. They go through the Claude\nCode login you already use (`claude -p` , with a minimal context), or through\nthe Anthropic API if you pick that engine.\n- **Never sent** : the rest of your repository — and nothing at all leaves if\nyou run`/flow model off` , which keeps the structure, the diffs and the\nhistory working without a model.\n- **Never stored** : what you type. The conversation is read from the Claude\nCode transcript, used to write the story, then dropped; it reaches neither\nthe repo nor fcc's cache, and tasks are listed by their headline.\n- **No telemetry** , no account, no server of ours. The viewer listens on\n127.0.0.1 only, behind a random per-run token, and shuts down when idle.\nEverything else stays in`~/.claude/flow/` .\n\nRequires [Claude Code](https://code.claude.com), git and Node ≥ 18. No `npm install`: the plugin ships its own bundle.\n\n```\nclaude plugin marketplace add alexabbi/fcc\nclaude plugin install fcc@fcc\n```\n\nPick the `user` scope so it is available everywhere, or `local` for one\nproject. To try it without installing: `claude --plugin-dir /path/to/fcc`.\nLater: `claude plugin update fcc@fcc`, `claude plugin uninstall fcc@fcc`.\n\n**Installing it does not start it.** fcc stays asleep until you turn it on in\na project, and it says so once, the first time you work in a new one:\n\n```\n/flow on\n```\n\nFrom then on, in that project only, each task that changes files gets a story.\nIf you would rather decide task by task, `/flow mode manual` keeps the\nsnapshots (they are free and silent) but analyzes nothing and calls no model\nuntil you ask, with `/flow last` or the **Explain this task** button in the\npage. That way you choose *after* seeing the result, not before.\n`/flow on project` writes the choice into the repository instead, turning it\non for everyone who has it. `/flow off` stops, `/flow forget` also deletes\neverything fcc kept about that project.\n\n| Command | Effect | \n|---|---|\n| `/flow on` ·`/flow off` | start or stop recording tasks in this project (add `project` to decide for everyone) | \n| `/flow mode manual` | capture tasks but explain them only when asked ( `auto` is the default) | \n| `/flow last` | explain the last task | \n| `/flow skip` | throw the last task away entirely | \n| `/flow forget` | stop recording and delete what fcc kept about this project | \n| `/flow` | open the history of the current project | \n| `/flow model haiku` | choose the model that writes the stories ( `sonnet` by default, or`opus` , a`claude-…` id, or`off` ); add`project` for this repository only | \n| `/flow start \"Discount codes\"` | group the next tasks under a feature | \n| `/flow end` | stop grouping | \n| `/flow drop` | delete the last task's report so it is never committed | \n| `/flow private` ·`/flow public` | keep this session's tasks out of the repo, or put them back | \n\nThe hooks add about 0.1 s per turn. The structure is ready in seconds and the\nstory in about a minute, both in the background: Claude Code is never blocked.\nWith the default Sonnet a task cost about **$0.06** in our tests, charged to\nthe Claude Code plan you already have. Haiku is cheaper, but in the same\ncomparison it missed an unimplemented request and an unrequested change.\n\n- **Symbol-level graphs are TypeScript and JavaScript only.** Other languages\nstill get the story, the behavior flow, the history and file-level diffs.\n- Calls made through dependency injection, events or dynamic dispatch are not\nlinked, and only the root `tsconfig` is read.\n- A task is matched to commits on the **current branch** only: work committed\non a branch that is not merged yet reads as \"not committed\".\n- Tasks from before you installed fcc are not reconstructed.\n- Outside a git repository fcc stays silent.\n\n`UserPromptSubmit` snapshots the work tree as a git tree object (without\ntouching your index), `PostToolUse` records which files Claude edited, and\n`Stop` snapshots again, then analyzes the two trees with ts-morph and asks the\nmodel for the story, validating every reference it makes against the graph.\nTasks are matched to commits by content, so the link survives squash and\nrebase. [docs/DESIGN.md](https://github.com/alexabbi/fcc/blob/main/docs/DESIGN.md) walks through each step, maps the\nmodules, and lists what fcc cannot do.\n\n```\nnpm install\nnpm test          # fixture repos + end-to-end hook tests\nnpm run typecheck\nnpm run build     # bundles dist/ (commit it: plugins install without npm)\n```\n\nWhile changing fcc, load it in place with `claude --plugin-dir /path/to/fcc`\n(plus `npm run build` and `/reload-plugins`). An **installed** copy is a git\nclone of the marketplace source pinned to a version, so updating it means:\ncommit and push, bump the version in `.claude-plugin/plugin.json`, then\n`claude plugin marketplace update fcc && claude plugin update fcc@fcc`.\n\nSources run directly on Node ≥ 22.18 (`node bin/fcc.ts …`); the bundle runs on\nNode ≥ 18. Environment variables, which override the config files: `FCC_LLM`\n(`claude` default, `api`, `off`), `FCC_MODEL`, `FCC_HOME` (state dir),\n`FCC_HISTORY_DIR` (default `docs/flow`), `FCC_PORT`, `FCC_IDLE_MINUTES`\n(viewer auto-shutdown, default 30), `FCC_SYNC=1` (analyze inside the Stop\nhook), `FCC_NO_SERVER=1`.\n\nErrors from hooks and background processes go to `~/.claude/flow/fcc.log`;\nhooks never fail the Claude Code session.\n\nMIT — see [LICENSE](https://github.com/alexabbi/fcc/blob/main/LICENSE).", "url": "https://wpnews.pro/news/flowchart-for-claude-code", "canonical_source": "https://github.com/alexabbi/fcc", "published_at": "2026-11-03 08:53:40+00:00", "updated_at": "2026-11-03 09:24:44.880183+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-agents", "artificial-intelligence"], "entities": ["fcc", "Claude Code", "GitHub", "macOS", "Linux", "Windows"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/flowchart-for-claude-code", "markdown": "https://wpnews.pro/news/flowchart-for-claude-code.md", "text": "https://wpnews.pro/news/flowchart-for-claude-code.txt", "jsonld": "https://wpnews.pro/news/flowchart-for-claude-code.jsonld"}}