Loading video...

Video Failed to Load

Go Home

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...

200,157 views • 8 months ago •via X (Twitter)

44 Comments

Arach's profile picture
Arach8 months ago

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

Jakub Panik (🐍,💦)'s profile picture
Jakub Panik (🐍,💦)8 months ago

@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?

tenex's profile picture
tenex8 months ago

@every for FREE?

CJ Hess's profile picture
CJ Hess8 months ago

@every gotta show how the sausage is made

GDP's profile picture
GDP8 months ago

@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.

CJ Hess's profile picture
CJ Hess8 months ago

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

GDP's profile picture
GDP8 months ago

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).

Arman Hezarkhani's profile picture
Arman Hezarkhani8 months ago

@every flowy

raptrex's profile picture
raptrex8 months ago

@every is there a github for this?

CJ Hess's profile picture
CJ Hess8 months ago

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

Arman Hezarkhani's profile picture
Arman Hezarkhani8 months ago

@every this is sick

CJ Hess's profile picture
CJ Hess8 months ago

@every how would you use it?

Arman Hezarkhani's profile picture
Arman Hezarkhani8 months ago

@every ofc. flowy baby

JJ Englert's profile picture
JJ Englert8 months ago

@every btw what a stud

CJ Hess's profile picture
CJ Hess8 months ago

@every thanks brother

Lexis N's profile picture
Lexis N8 months ago

@every flowy

Karim C's profile picture
Karim C8 months ago

@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.

Albertoo's profile picture
Albertoo8 months ago

@every Why not mermaid?

Nauman Tariq 🇦🇺 🇵🇰's profile picture
Nauman Tariq 🇦🇺 🇵🇰8 months ago

@every Looks useful @muhamme09084964

Eddie's profile picture
Eddie8 months ago

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

CJ Hess's profile picture
CJ Hess8 months ago

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

JJ Englert's profile picture
JJ Englert8 months ago

@every Flowyyyyyy

g's profile picture
g8 months ago

@every flowy

CJ Hess's profile picture
CJ Hess8 months ago

@every woohoo, what gets you excited about flowy?

Sergey Moiseev 🦋@full-stack.biz's profile picture
Sergey Moiseev 🦋@full-stack.biz8 months ago

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

desiVoidStar's profile picture
desiVoidStar8 months ago

@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.

Steve Milburn's profile picture
Steve Milburn8 months ago

@every flowy

Radegast Randy's profile picture
Radegast Randy8 months ago

@every flowy

Jacek's profile picture
Jacek8 months ago

@every Floty

Marcos Sei - Gennia's profile picture
Marcos Sei - Gennia8 months ago

@every Flowy

XXP@「ちょめ」's profile picture
XXP@「ちょめ」8 months ago

@every flowy!

Vito's profile picture
Vito8 months ago

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

AJB's profile picture
AJB8 months ago

@every Flowy

Kostya's profile picture
Kostya8 months ago

@every flowy

Db's profile picture
Db8 months ago

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

juanmacias 🏳️‍🌈's profile picture
juanmacias 🏳️‍🌈8 months ago

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

Emil Martin's profile picture
Emil Martin8 months ago

@every Flowy

bsattley's profile picture
bsattley8 months ago

@every Flowy

Abdulmuiz Adeyemo's profile picture
Abdulmuiz Adeyemo8 months ago

@every Wow

Mark R Pommrehn's profile picture
Mark R Pommrehn8 months ago

@every Float

aquamansam's profile picture
aquamansam8 months ago

@every nice! I have something similar with mermaid diagrams

Lorenz Graef's profile picture
Lorenz Graef8 months ago

@every Flowy

Sarit Roy's profile picture
Sarit Roy8 months ago

@every Flowy

majin 🪲's profile picture
majin 🪲8 months ago

@every flowy

Related Videos