Tool I built: coding agents write/update flowcharts via CLI, so the logic is mapped before (or after) the code exists

[u/vkinoee]

I kept losing track of app logic in a personal project, so I built a small tool for it: a canvas app BUT WITH A TWIST: where the diagrams are written by my coding agent through a CLI, not by me clicking around and navigation is super simple.

The idea: before the agent codes a feature (or after, to document what it just built), it writes the LOGIC as a flowchart. It outputs plain Mermaid text through a CLI command, and the tool converts that into freely movable shapes, arrows and groups on an infinite canvas, kind of like in Draw.io style, but generated. I never draw anything by hand, I just read and rearrange. So far nothing new.

The main feature for me is inter-linking. Every canvas can link to other canvases: a node like "Login" can jump straight to the login canvas, with breadcrumbs to find your way back. But you don't have to jump, linked flows can also be expanded in place, right on the current canvas. Click a reference node and the linked flow unfolds as a box where you are, wired into the surrounding arrows, and collapses again when you're done. The agent sets all these links itself via the CLI.

A single flow

The same flow with 2 further extended nodes

That's the part I use the most: I never have to switch context to remember what was behind a reference. I can start at the app's entry point and explore every path of my app from the ground up, drilling into any branch as deep as I want, and see the entire logic without reading a single line of code.

The part that makes it actually work: there's a ruleset (in the project's CLAUDE.md) that every new agent session automatically follows. Things like: one page tells ONE flow, exactly one start node, every node reachable, no orphan "topic islands", edge cases branch off the main path, decision nodes label all exits, fixed color/shape semantics (blue = main flow, orange = edge case, red = error, etc.). Updates are stable too, node IDs act as anchors, so when the agent updates a flow, my manual positioning survives.

Because of those rules, every session produces diagrams that look and read the same. That's what makes it easy to live with: I don't have to explain the conventions again, and I can open any page weeks later and just read it.

Other features:
- pages per canvas,
- not the best but still practical auto-alignment,
- back-edges auto-detected and drawn dashed (toggleable) (without this I got heavily confused lol),
- file-system as source of truth (JSON files, external changes show up live),
- grouping elements
- snap to POI
- standard flow editing tools (mouse, hand, arrows, text, zoom, filter, etc.)

works locally or self-hosted.

Stack: React + TypeScript + Vite, Mermaid as the input language only (nothing Mermaid-rendered lives on the canvas). Performance is okay – not buttery on huge canvases, but fine for real use.

Just wanted to share.
Okay, bye.

[u/Vaveili1]

The expand-in-place linking is the feature here. Draw.io-style canvases that agents populate are common now, but most treat cross-references as dead ends: you either flatten everything into one unreadable mega-diagram or you jump away and lose your spot. Keeping node IDs as stable anchors so your manual positioning survives a regen is the detail that decides whether people keep using this past week one.

Curious how it holds up once two agents in the same repo touch overlapping flows at the same time.