Walkthrough
How it works, step by step.
Six steps, about half a minute. Click any step to jump to it.
Steps
Click a step to jump there.
Start with step one.
Add the skill to Claude Code
/plugin marketplace add Figure8-Labs/stepflow/plugin install stepflow@stepflow
Then type /stepflow-diagram and what to draw, or just ask in plain words. It runs npx getstepflow for you, so there is nothing else to install; it needs Node 18 or later. Scripts and CI can call the same CLI: npx getstepflow draw spec.json. The spec and examples are on GitHub.
No agent? Three other ways in.
Shapes, connectors, the cloud icons and the animation path, on a canvas. Start blank or from an example.
Questions.
Is it free?
The skill, the CLI, the canvas and SVG export are free. Exports carry a small “Made with getstepflow.com” badge. Pro removes it and adds GIF and MP4 export and more AI requests.
Does my code or my diagram leave my machine?
The CLI runs on your machine and sends nothing to StepFlow. The canvas keeps your diagram in your browser; it leaves only if you share a link or ask the AI. The privacy policy has the detail.
Does it work with agents other than Claude Code?
The skill is for Claude Code. Any agent that can run a command can use the CLI: have it write a spec following the spec reference, then run npx getstepflow draw.
What if my build optimises images?
An SVG optimiser can strip the diagram out of the file. The picture still works, but it no longer opens for editing. Keep the diagram’s .flow.json beside it, which the CLI writes with --json.
What can it draw?
Architecture with AWS, Azure, Google Cloud and Kubernetes icons, flowcharts, sequence diagrams and business processes. See the examples.