AI Draws Complex Flows—One Sentence to an Editable Web Flowchart
When you're pitching a plan to a client or walking a colleague through one, you keep hitting complicated steps and processes that no amount of talking makes clear. That is exactly when a flowchart saves you.
This episode I'm sharing a skill I use constantly, "flowmaker": describe a flow in one sentence and it generates an editable web flowchart—start point, end point, and decision branches all following standard conventions, with nodes you can drag, text you can edit on double-click, edges you can rewire, and details you can expand. One click exports a PNG you can send to anyone. The key part: it's a single HTML file with zero backend. Double-click and it opens.
When you’re pitching a plan to a client or walking a colleague through one, you keep hitting complicated steps and processes that no amount of talking makes clear. That’s exactly when a flowchart saves you.
This episode I’m sharing a skill I use constantly—flowmaker, now open source (MIT): github.com/xntj-ai/flowmaker. What it does is simple and genuinely useful: describe a flow in one sentence, and it draws you an editable web flowchart.
One sentence, one flowchart
Once the skill is installed, you just tell Claude Code “I want a web flowchart, use flowmaker for it,” and then tell it what to draw.
Take the World Cup, which is on right now—how many people can really explain the format? How the group stage works, how the 32 teams that advance get decided. Anything like that—a pain to describe, obvious the second you draw it—just hand it over. What comes out follows all the standard flowchart conventions: there’s a start point, there’s an end point, and every step in between is laid out clearly.
Draggable, editable, exportable—not a dead image
This is where it differs most from other tools: the chart is alive.
- Every node drags; you place them where you want.
- You can draw edges between nodes directly; single- or double-click a node to edit what’s inside it. Every bit of text is editable.
- The labels on the connecting lines are editable too, and you can drop in a new node whenever you want.
- When you’re done, one click exports a PNG you can send straight to someone.
Nodes expand into details
Another example: some friends don’t know how to install Claude Code, so I can just say—use flowmaker to generate a beginner’s walkthrough for “how a user in mainland China installs Claude Code and connects it to a domestic third-party LLM API.”
Once it’s built you’ll notice every node carries a small marker you can click. Click it and the node expands. Take the “install Node.js” step: which site to go to (the link opens directly), which version to download, what command to run on each operating system. Every link in the chain is worked out in detail. It’s a genuinely beginner-friendly version of the instructions.
Plenty of tools make flowcharts, but almost none do all of this
This is the part most worth saying. There are tons of flowchart tools, but almost none manage all of the following at once:
- A single web file, zero backend: send it to someone, they double-click, and they’re using it and editing it—nothing to install, no server needed. (One heads-up: refresh the page and the chart is gone, so always export the image when you finish editing.)
- Editable right in the browser: node types, shapes, colors, every bit of text on the connecting lines—everything you see is editable.
- One-click PNG export for sharing.
The full technical write-up lives in the skill’s docs on GitHub, broken down step by step. Take a look if you’re interested.
How to use it
It’s simple: hand the Git URL to Claude Code and have it clone the skill into your skills directory.
You can also edit the “data island” in the template directly—the page itself is a flowchart editor, so you can even build a chart from scratch.
That said, going through the skill is the easiest route by far: let the model do the research, then have it draw the flow and the steps it found straight into a chart like this. Ridiculously handy.
Source: EP0042_audio.mp3 · ASR model gemini-2.5-pro (chunked parallel) · full text of the original recording
[00:00] All right friends, today I’m sharing a really useful skill: one sentence and it generates a web flowchart. So what’s so good about it? When we’re walking a client through something, or walking a colleague through something, we often run into complex steps and processes that there’s just no easy way to explain. That’s exactly where a flowchart comes in. Take the World Cup, which is going on right now, right? How many people actually know the World Cup format—how the group stage works, how the round of 32 gets
[00:26] decided, right? So once you’ve got this skill installed, you can just tell Claude Code: I need you to make a web flowchart. The skill is called flowmaker—use the flowmaker skill to make an editable flowchart. And it produces a flowchart like this. You can see—let me show you the full version—you can see there’s a start point for the flow and an end point for the flow, and everything in between fully follows
[00:51] the standard flowchart conventions. And these nodes can all be dragged around. It lays the steps out one by one. You can also draw lines between these nodes directly. Single-click, then double-click, and you can edit the node—what’s in it, all of the text is editable. You can also export a PNG and just send it straight to someone. And in here you can see the text on the connecting lines is editable too, and you can add a new node. Really convenient.
[01:16] What else can you tell it? For instance, some of you don’t know how to install Claude Code, so I can just say one line: use the flowmaker skill to generate a walkthrough of how a user in mainland China installs Claude Code and connects it to a domestic third-party LLM API—a beginner’s version of the walkthrough. And it made it. Once this chart is built, you’ll notice each node has this little marker on it, and once you click it, it actually
[01:41] expands the node—the detailed walkthrough for that step, installing Node.js: what the sites are, which you can click to open right there, then which version to download, or which command you can use to install it on different operating systems. Every step of it is genuinely spelled out—a beginner-friendly version of the instructions. Now, here’s the important bit. There are a lot of tools for making flowcharts, but ones that can do everything this skill does at once,
[02:06] there are almost none. First, it’s one single web file, no backend needed. Send it to someone and they can use it and edit it right away. Of course, refresh the page and it’s gone, so when you finish editing, always remember to save that image. Second, it’s editable right in the browser: the node types, the node shapes, the node colors, and all the text on the connecting lines—everything you see is editable. And then one click exports a PNG to share. As for the whole technical write-up,
[02:31] it’s all written into the skill’s docs on my GitHub, and you can go read the specifics there. It’s actually broken down into a lot of detailed steps. Using it is dead simple, of course: just hand the Git URL to Claude Code and have it install the skill—clone the skill into your skills directory and that’s it. You can also edit the template’s data island directly, because this page really is just a flowchart editor. You can even build a flowchart from scratch.
[02:56] That said, making it a skill is by far the easiest way—you can have the model do the research for me, for us, and turn the flow and the steps it dug up straight into a chart like this. Really handy. That’s it for today, see you tomorrow, bye.