flowfig 0.4.0

Swimlanes, a timeline form, start and end marks, and two new commands: open shows a figure in your browser, and gif makes an animated GIF that you can share anywhere.

npx flowfig open docs/checkout.svg   # show the figure in your default browser
npx flowfig gif docs/checkout.svg    # write docs/checkout.gif

New

• Swimlanes. Set lanes: true and give each box an at lane and time column. Each role gets its own band with a label. Use it for a process that several teams share.
• Timeline form. Set timeline: true to draw a roadmap with dated bars, milestones, dependency lines, a today line and a moving playhead. check reports dates out of order.
• Start and end marks. A lifecycle box can show a start dot or an end ring.
• flowfig open <figure.svg>. Opens the figure in your default browser. Add --open to a render or to draw to do the same after the figure is written.
• flowfig gif <figure.svg> [out.gif]. Writes an animated GIF for Slack, Notion, slides, or any place that does not play SVG animation. Options: --step <n> for one step, --dark, --fps, --scale, and --mp4 to also write an MP4.

Improvements

• After npx flowfig init, agents use flowfig when you ask for a diagram and name no other tool. In Claude Code, you can also run /figure <question>.
• Agent replies end with the npx flowfig open command for the new figure.
• flowfig init has a new screen: pick your agents with the arrow keys and the space bar.

Requirements

• Node 18 or later.
• React 18 or later, only for the <Flow /> player.
• flowfig gif uses Chrome, Edge, Chromium or Brave from your machine. Set CHROME_PATH to choose one.
• flowfig gif --mp4 also needs ffmpeg on your PATH.

Upgrade

No breaking change. Run npx flowfig init again in your repo to get the new agent instructions.

Full Changelog: v0.3.0...v0.4.0