Flowchart for Claude Code: Visualize Your AI Coding Workflows (FCC Beginner Guide)

CodexFuse Team · 2026-11-04T09:36:52.329Z · 10 min read min read

FCC is a one-day-old Claude Code plugin by alexabbi: after every code-changing task it writes a plain-language story, a Mermaid behavior flowchart anchored to your real code, and a dev history in docs/flow/.

Flowchart for Claude Code — usually shortened to FCC — is a brand-new Claude Code plugin by GitHub developer alexabbi that answers one question after every AI coding session: what did the AI actually change? The moment a Claude Code task touches your files, FCC builds a plain-language story of the change, a Mermaid behavior flowchart anchored to the real functions, and a development history saved inside your repo's docs/flow/ folder. Its tagline says it all: "Read less code, still know what changed." If you are new to the underlying tool, read our Claude Code beginner guide first.

One disambiguation before we go further: FCC is not a generic diagram maker. It never draws a flowchart from a prompt you type — it visualizes what Claude Code changed in your actual code, automatically, after the fact. Drawing a process diagram from scratch is a different job for a different kind of tool.

This beginner's guide covers installing FCC, turning it on with /flow on, using its commands, and knowing its limits. Every fact below was verified against the live README at github.com/alexabbi/fcc on 2026-11-04. The tool was announced on 2026-11-03, so it is roughly one day old — date every claim you read about it anywhere, because this space moves fast.

What Is Flowchart for Claude Code?

Flowchart for Claude Code (FCC) is a Claude Code plugin by alexabbi that visualizes your AI coding workflows. After every Claude Code task that changes files, it prints a link to a local page showing four things: a plain-language story of what changed (headline, why, the decisions made, what to verify), a Mermaid behavior flowchart anchored to the actual code, a symbol graph of the changed functions, methods, and classes, and a persistent development history written into docs/flow/ in the repo. In the flowchart, new, changed, and removed steps are highlighted; links the tool could not ground in real code are drawn dashed and labeled "inferred," so you always know what is verified and what is a guess.

How Does FCC Turn a Claude Code Task Into a Flowchart?

FCC hooks into Claude Code's task lifecycle and works in the background. When a task finishes changing files, FCC captures the diff, writes the story through your Claude Code login, and hands you a link to a local viewer page — the story typically arrives in about a minute.

The story page has four parts. First, the plain-language story: a headline, why the change happened, the key decisions, and what you should verify. Second, the Mermaid behavior flowchart: the actual behavior of the changed code as a diagram, with new, changed, and removed steps highlighted and ungrounded links dashed and labeled "inferred." Third, the symbol graph: the changed functions, methods, and classes and how they connect. Fourth, the dev history: every story is saved into docs/flow/ in the repo, so the project accumulates a readable changelog of what the AI did and why.

This is a genuine Claude Code workflow visualization: the diagram is derived from the diff your session produced, not from a description you wrote. That anchoring is what separates FCC from asking a chatbot to "draw me a diagram of this feature."

How to Use Flowchart for Claude Code: Install It in Two Commands

Installing FCC takes two terminal commands — no npm install, because the plugin ships its own bundle. Here is the full sequence:

1. Add the marketplace: claude plugin marketplace add alexabbi/fcc
2. Install the plugin: claude plugin install fcc@fcc — choose the user scope to use it everywhere, or local to limit it to one project.
3. Turn it on in your project: run /flow on inside the project (installing alone does nothing — see the next section).
4. Work normally: every Claude Code task that changes files in that project now gets a story with a flowchart.

Prefer to try before installing? Run claude --plugin-dir /path/to/fcc with a local clone of the fcc Claude Code GitHub repo at github.com/alexabbi/fcc. To update later: claude plugin update fcc@fcc. To remove: claude plugin uninstall fcc@fcc.

You need three things installed first: Claude Code itself (FCC integrates through your Claude Code login), git, and Node.js 18 or newer. The plugin was developed on macOS and should work on Linux; Windows is untested. Outside a git repo, FCC stays silent — it needs version control to make sense of changes. The alexabbi FCC repo is MIT-licensed, currently at version 0.3.0 which the author calls "early days," with 23 commits as of 2026-11-04.

How to Turn FCC On: the /flow on Step Everyone Misses

Installing FCC does not start it — this is the step most first-timers miss. The plugin stays asleep until you turn it on inside a project with /flow on. From that moment, each task that changes files in that project gets a story; other projects are unaffected until you enable it there too.

If you want FCC to watch quietly without analyzing, use /flow mode manual. In manual mode it captures snapshots but analyzes nothing until you ask — via /flow last or the "Explain this task" button. That is the right setting when you want the history without a story after every single task.

To see everything FCC has recorded for a project, run /flow to open the project history. To stop it, /flow off; to wipe what it remembers, /flow forget.

What Do the /flow Commands Do?

Every FCC command lives under the /flow prefix, following the same slash-command pattern as other Claude agent skills and plugins. Here is the complete set from the README:

The grouping commands are the sleeper feature: /flow start "user auth" before a multi-task feature and /flow end after, and FCC ties the whole arc together instead of giving you one story per task.

How Much Does FCC Cost?

The plugin itself is free and MIT-licensed; the cost is the AI that writes the stories. In the author's tests, one task's story costs about $0.06 with the default Sonnet model, charged to the Claude Code plan you already have — there is no separate FCC billing and no account to create. The hooks add roughly 0.1 seconds per turn, and the story arrives in about a minute in the background. If you want cheaper or smarter stories, /flow model lets you switch between Haiku, Sonnet, and Opus.

FCC vs a Generic AI Flowchart Generator: Which Do You Need?

This is the confusion to clear up, because the names overlap. FCC and a generic AI flowchart generator solve opposite problems:

Rule of thumb: if the flowchart should reflect code that already exists, you want FCC; if no code exists yet and you are sketching an idea, use the AI flowchart generator guide approach instead.

What Are FCC's Limits? (Read Before Installing)

FCC is version 0.3.0 and the author is upfront that it is early — know these limits before you rely on it. Symbol-level graphs work for TypeScript and JavaScript only; other languages get the story and flowchart but not the symbol graph. Calls through dependency injection, events, or dynamic dispatch are not linked in the graphs. Task-to-commit matching only works on the current branch, tasks from before you installed FCC are not reconstructed, and as noted, it stays silent outside git repos.

Treat the dashed "inferred" links in the flowchart as exactly what they say: the tool's best guess where it could not ground a connection in real code. They are useful hints, not verified facts — verify before you trust them in a review.

Is FCC Private? Where Does Your Code Go?

FCC is a local tool with no telemetry and no account. To write a story it sends the diffs and the conversation through your Claude Code login (claude -p) or the Anthropic API — nothing else leaves your machine. The story viewer listens only on 127.0.0.1, behind a per-run token, so the pages are not exposed to your network. If your threat model forbids sending diffs to an AI at all, FCC is not for you; if you already use Claude Code, FCC adds no new destination for your code.

Sources

• FCC README — github.com/alexabbi/fcc (install commands, /flow command table, requirements, cost, limits, privacy, license, version; fetched 2026-11-04)
• emergent.sh — "Flowchart for Claude Code Tool Launches on GitHub" (launch announcement; updated 2026-11-03)
• codexfuse.dev sitemap and pillar live checks (duplication + internal-link verification; 2026-11-04)

Frequently Asked Questions

Is Flowchart for Claude Code free?

The plugin is free and MIT-licensed. Writing each story costs roughly $0.06 with the default Sonnet model in the author's tests, billed to the Claude Code plan you already have — there is no separate FCC subscription.

Do I need Claude Code to use FCC?

Yes. FCC is a Claude Code plugin, not a standalone app — it hooks into Claude Code's task lifecycle and writes stories through your Claude Code login. Without Claude Code installed, there is nothing for it to observe.

Does FCC work on Windows?

Unknown. The README says it was developed on macOS, should work on Linux, and is untested on Windows as of 2026-11-04. If you try it on Windows, that is genuinely new information — the repo accepts issues.

Can FCC explain tasks from before I installed it?

No. The README states pre-install tasks are not reconstructed — FCC only sees tasks that run after installation, and only in projects where you ran /flow on inside a git repo.

How is FCC different from asking Claude Code to draw a diagram?

Asking produces a one-off diagram from a description. FCC runs automatically after every file-changing task, anchors the flowchart to the actual diff (highlighting new, changed, and removed steps), marks ungrounded links as "inferred," and saves the history in docs/flow/ — it is a persistent, verifiable record, not a sketch.