Why this exists
Most flowchart tools are either heavyweight (Lucidchart, draw.io) or require a paid account. This one runs entirely in your browser — paste code, get a chart, copy or download the SVG. Nothing leaves your machine.
What gets parsed
- Sequence: each line at the same indent level becomes a process node, connected top-to-bottom.
- Decisions: a line beginning with
ifbecomes a diamond. The indented block below is the "Yes" branch; anelsesibling is the "No" branch.elif/else ifchains as nested decisions. - Loops:
for/whilebecome a loop diamond with a body branch and a back-arrow. - Terminators:
start/beginrender as a green oval;end/stop/return ...render as a red oval. - Code mode: braces
{ }are converted to indentation, comments are stripped, and the same parser runs.
FAQ
Can I share the flowchart?
Click Download SVG for a vector image you can open in any browser, embed in HTML, or paste into a doc. Download PNG rasterises it for chat apps that don't accept SVG.
What languages does code mode handle?
It works on any C-style syntax (JavaScript, TypeScript, Java, C, C++, Go, etc.) by converting braces to indentation. Python is parsed directly because it's already indent-based. Complex code — closures, ternaries, async — won't render perfectly; this is a quick visualisation, not a full AST tool.
Is the diagram exact?
It's a structural sketch, not a formal AST. Multiple statements on one line collapse to a single process node; very deep nesting can produce wide charts.