flowmaker is a Claude Code / Agent skill. Hand it a process and it produces a self-contained .html file: a light, glassmorphism flowchart with decision diamonds, start/end pills, and process rectangles that you can drag, reconnect, rename, and edit right in the browser.
Unlike "text to flowchart" tools that hand you a static image or a Mermaid block — useless the moment someone wants to move a box, fix a label, or add a branch — flowmaker's output is a real, editable artifact. Double-click to open; no server, no build, nothing to install. Email it, drop it into a wiki, or hand it to a non-technical colleague and they can rearrange it in the browser.
From one line to an editable flowchart in four steps.
Spell out the start, key steps, decision branches and where each branch goes — in plain language.
Claude breaks the process into nodes + edges JSON, omitting coordinates so layout is automatic.
The JSON drops into template.html; the rendering engine is already built in.
Open in a browser and interact: drag nodes, reroute edges, double-click to rename.
A model is optional — the engine lives in assets/template.html, so you can hand-write the JSON yourself.
Flowchart semantics come from shape; flowmaker ships three.
Ordinary steps, actions, operations. The default shape.
Start and end of the flow. Start in blue, end in gold.
Branch points. Phrase the title as a question; draw "yes/no" edges out.
One file, zero backend — everything is inside this .html.
nodes + edges, inlined in a <script> tag.
Auto-layout, three shapes, drag interactions — all bundled.
The look is light-mode ppvi: frosted-glass nodes, gold / blue / gray state colors, and decision diamonds drawn as evenly-stroked SVG polygons so sharp corners never smear into gray.
React Flow and dagre load from a CDN at runtime — no build, no server, nothing to deploy.
Drag to lay out, pull from a handle to draw an edge, double-click to edit title / shape / color, click an edge to relabel, Delete to remove.
Give only nodes and edges and dagre lays them out (top-down or left-right); add coordinates only for a pixel-exact version.
Push long content (commands, configs, steps) into a "详情 ▾" modal instead of bloating the node — layouts stay tight.
git clone https://github.com/xntj-ai/flowmaker.git ~/.claude/skills/flowmaker
For example, "use flowmaker to turn this approval process into an editable web flowchart" — it fills the gaps, builds the data, and outputs an .html file.
Drag nodes, reroute edges, rename — and it's a deliverable. Or skip Claude entirely: copy assets/template.html and swap in your JSON.