StepFlow
Open the canvasCanvas

Animated diagrams from your coding agent

Your agent draws it.
You make it yours.

Most AI diagrams are pictures you can't touch. StepFlow's open straight onto a canvas: move anything, rename anything, then drop the same animated SVG into your README.

Try it free

Or describe it to the AI, or start from an example.

demo.svg
Edit it
v1.pdNPT4MwGAbwr7I850b5MzLtzXjyNI0mHswODN4JWW1ZKc5l4bubQjeq20w2bxDo8-tbHrb4BA8ZDDhE-V4YMMgPcEx1TroeaVo1VJtRlZoCDCvwty1KcNSBffPkizl4eBUyLMADBgFudEMMTX_RzhhSL8Rm5uDIREnSbsFsKrLPi7QiMHx1KRvwm4RhDR4mAUMBPgk6aYtlKe16rRqZUw4Gkc5JgON-l1g3c3DMtVrXpNG2zJFpVR71oqQXk3EvTuJODOP4J1nQV_qupEfePT7svcfp88voWnVH5KFZmhV0lE1s_sZNaN24n_T216TZRpQyJ-2P2oUOyKqh5gQSOST4-zQpM17-U5c35K-VXnYbOAQmk0uA1z5wENy5HRPCwM1w9jFNdx9jxkBD9URoP9qPDu7bURd2s-7vMPZG0KKvqV2gpKTMKA1n14aqursIwMN2mEdEznCl85pwJrEbRii1bCq73jcj34wPzF0xLjRJ7gNOomOH7jvo9-U_xxn7SuKUoYl-aS4cb61LczDcuG3bWfsNClientbrowserAPIPOST /ordersCacheQueueWorkerOrders1.2. lookup2. enqueue3.4. writeMade with getstepflow.com
v1.pdJBb9owGAbgv4Les9XFMbSqb9NOO9Fpk3aYOITkaxPh2sFxRhHKf5_sGGJW0ER3C2Dex9-X94DfkJzBQUI1L7UDg36FxNJWZLuZpW1PnZu1havBsIX8dUADiS7zJ68erCD5HWd4hswYFKSzPTH048OwYiiSEJ9ZQaJUDWl_Bbdvyf9eFy2B4Q2SiwXDPqTtIPkiY6ghH7JAHbBptA-wptcVVWBQxZoUJL4cI7t-DYm1NbuOLIaBRbNom8tgLu5GkvOIPoiAciHO1ZreihejE_Xz09cT-bT8_mP2yYQ1JW5ZlDVdlPP7PLgij64Yh338a9hyrxpdkU2nDaETsu2pv4JkoyH-sVAqXZL_LeRN-TtjN-ECV4H5_U3AzzFwEuLeLgliFBaPN69peXwZKwaa6qe4f2lnPTwVpKt9e4xz5tV_7z8504Z7-T8Yral0xiLanaO2Cw8ZJB-meVQejdi7pAk3EsdhlDGb3h87M_PUFO_MYzE-aJI-BVxF5xE9dTDty_-sU6TKIipTE9PSfHC8nW3cu-HmwzCshj8ClientbrowserAPIPOST /ordersCacheQueueWorkerOrders1.2. lookup2. enqueue3.4. writeMade with getstepflow.com

Path

Click a step to jump there.

How it works

From a prompt to a diagram that moves.

01

Add the skill

Paste two lines into Claude Code. Nothing else to install.

Add the skill
›/plugin marketplace add Figure8-Labs/stepflow›/plugin install stepflow@stepflowstepflow-diagram · added
Two lines, once. It runs the StepFlow CLI for you.
02

Ask

Type /stepflow-diagram and what to draw. You get an animated SVG, its steps numbered.

›/stepflow-diagram PR 482WebAPIQueueorders-flow.svg
The skill writes the file where you asked: the PR, the docs, the thread.
03

Edit

Drop the SVG on the canvas. Move things, fix labels, change the order.

orders-flow.svgWebAPIQueueSQS
The diagram is inside the file, so it opens as it was drawn.
04

Keep it current

Drop it into docs, pull requests, wikis or slides. When the system changes, ask again: it redraws, and keeps everything you moved by hand.

ClientAPIPOST /ordersDBClientAPIPOST /ordersDBprefers-color-scheme: lightprefers-color-scheme: dark
Light, dark and the diagram itself, in one file.

The full walkthrough, step by step →

AI

Ask where you already are.

Say what it is and it draws. Ask for a change and it merges in, leaving the rest where it was. 10 free requests a month, 100 with Pro.

Try it free
Untitled
Empty canvas

AI

AWS web app: a load balancer, two services, a queue and a database, in a VPC

Working on it…

Drew six parts, with the queue outside the VPC.

Add a cache between the API and the database

Working on it…

Added a Redis cache. Everything else stayed where it was.

Where it goes

Works where your readers are.

you / orders-serviceREADME.md

orders-service

How a request moves

v1.pdNPT4MwGAbwr7I850b5MzLtzXjyNI0mHswODN4JWW1ZKc5l4bubQjeq20w2bxDo8-tbHrb4BA8ZDDhE-V4YMMgPcEx1TroeaVo1VJtRlZoCDCvwty1KcNSBffPkizl4eBUyLMADBgFudEMMTX_RzhhSL8Rm5uDIREnSbsFsKrLPi7QiMHx1KRvwm4RhDR4mAUMBPgk6aYtlKe16rRqZUw4Gkc5JgON-l1g3c3DMtVrXpNG2zJFpVR71oqQXk3EvTuJODOP4J1nQV_qupEfePT7svcfp88voWnVH5KFZmhV0lE1s_sZNaN24n_T216TZRpQyJ-2P2oUOyKqh5gQSOST4-zQpM17-U5c35K-VXnYbOAQmk0uA1z5wENy5HRPCwM1w9jFNdx9jxkBD9URoP9qPDu7bURd2s-7vMPZG0KKvqV2gpKTMKA1n14aqursIwMN2mEdEznCl85pwJrEbRii1bCq73jcj34wPzF0xLjRJ7gNOomOH7jvo9-U_xxn7SuKUoYl-aS4cb61LczDcuG3bWfsNClientbrowserAPIPOST /ordersCacheQueueWorkerOrders1.2. lookup2. enqueue3.4. writeMade with getstepflow.com
v1.pdJBb9owGAbgv4Les9XFMbSqb9NOO9Fpk3aYOITkaxPh2sFxRhHKf5_sGGJW0ER3C2Dex9-X94DfkJzBQUI1L7UDg36FxNJWZLuZpW1PnZu1havBsIX8dUADiS7zJ68erCD5HWd4hswYFKSzPTH048OwYiiSEJ9ZQaJUDWl_Bbdvyf9eFy2B4Q2SiwXDPqTtIPkiY6ghH7JAHbBptA-wptcVVWBQxZoUJL4cI7t-DYm1NbuOLIaBRbNom8tgLu5GkvOIPoiAciHO1ZreihejE_Xz09cT-bT8_mP2yYQ1JW5ZlDVdlPP7PLgij64Yh338a9hyrxpdkU2nDaETsu2pv4JkoyH-sVAqXZL_LeRN-TtjN-ECV4H5_U3AzzFwEuLeLgliFBaPN69peXwZKwaa6qe4f2lnPTwVpKt9e4xz5tV_7z8504Z7-T8Yral0xiLanaO2Cw8ZJB-meVQejdi7pAk3EsdhlDGb3h87M_PUFO_MYzE-aJI-BVxF5xE9dTDty_-sU6TKIipTE9PSfHC8nW3cu-HmwzCshj8ClientbrowserAPIPOST /ordersCacheQueueWorkerOrders1.2. lookup2. enqueue3.4. writeMade with getstepflow.com

The API answers from the cache and hands the write to a worker.

Pricing

Free for the file. Pro for video and more AI.

FreeStaying that way
$0

Everything to draw, animate and share.

  • The whole canvas
  • Unlimited animated SVG export
  • 10 AI diagram credits a month
  • Every icon: AWS, Azure, Google Cloud, Kubernetes and more
  • The Claude Code skill and the CLI
Try it free
Recommended
ProMonthly
$10 / month

For diagrams that leave GitHub.

  • GIF and MP4 exportFor slides, X and LinkedIn, where SVG won’t play
  • No watermarkClean exports for decks, docs and client work
  • 100 AI diagram credits a month10× the free plan
  • Everything in Free
Get Pro

Billed monthly. Cancel any time, and Pro stays until the end of the month you paid for.