Loading video...
Video Failed to Load
ASCII diagrams in Claude Code were driving me crazy. So I built a tool where Claude writes JSON → renders as interactive flowcharts and mockups → I edit visually → Claude sees my changes. Shoutout to Every 📧 for having me on the Vibe Code Camp livestream to demo... show more
200,157 views • 8 months ago •via X (Twitter)
44 Comments

@every nice - reminds me of my :) Very powerful idea, well done

@every Why not mermaid? It's full charting language with different chart types that already has all of this tooling + syntax checks. Is there something special you couldn't do with it?

@every for FREE?

@every gotta show how the sausage is made

@every Flowy. Super interested in this. I get it to make mermaid. It is a hit and miss always. This takes a different colaborative approach.

@every Thank you, what would you add if you could?

Claude - mixes up entity types in manner human won't, - it uses same type of arrows for all relationships, - sometimes it doesn't close the circuit (for example, sequence diagrams are incomplete or have missed sequence step. Many a times these things are easy to verify visually).

@every flowy

@every is there a github for this?

@every Not yet! But will lyk when there is one

@every this is sick

@every how would you use it?

@every ofc. flowy baby

@every btw what a stud

@every thanks brother

@every flowy

@every JSON as the contract, visual editor as the interface, and then the model reads the diff back. That’s the right pattern. It turns “vibe coding” into something you can review and iterate on without fighting ASCII art.

@every Why not mermaid?

@every Looks useful @muhamme09084964

@every interactive flowcharts? sounds like extra work for claude to fix my mistakes. innovation or just more complexity?

@every Innovation, it makes editing the specifics and mistakes so much easier

@every Flowyyyyyy

@every flowy

@every woohoo, what gets you excited about flowy?

@every Instead of that you could just add to `always use Mermaid for diagrams`

@every My solution is much simpler, I just ask it to create the same figure in drawio markup and edit it in drawio editor, it’s open source and you can run it locally or browser.

@every flowy

@every flowy

@every Floty

@every Flowy

@every flowy!

@every cool you can also use obsidian json skill to make directly canvas into obsidian

@every Flowy

@every flowy

@every been using Graphviz (.dot) since the beginning, works pretty well.

@every You can ask Claude to generate svg, or drawio, or…. There is lot of options

@every Flowy

@every Flowy

@every Wow

@every Float

@every nice! I have something similar with mermaid diagrams

@every Flowy

@every Flowy

@every flowy
