Loading video...

Video Failed to Load

Go Home

1. create a diagram from my code 2. ok, I updated the diagram, please update the code to match it

306,006 views • 7 months ago •via X (Twitter)

34 Comments

tldraw's profile picture
tldraw7 months ago

Try it here:

Abhimanyu ARYAN ♡'s profile picture
Abhimanyu ARYAN ♡7 months ago

Looks like a familiar language, "Mermaid"?

tldraw's profile picture
tldraw7 months ago

just tldraw shapes

Fernando's profile picture
Fernando7 months ago

We are kind of in this space and using react-flow, but are in search of design partners! Let us know if you want to talk! here is a rough old demo

Twlvone's profile picture
Twlvone7 months ago

this is how non-engineers end up writing production code. sketch the architecture, AI handles the implementation. the abstraction layer just moved way up

Adrián Mato 🐙's profile picture
Adrián Mato 🐙7 months ago

@steveruizok Worth a /skill or something on to of this back and forth

Strakyo's profile picture
Strakyo7 months ago

This workflow is wild because code to diagram and diagram back to code makes iteration much faster.

sparks's profile picture
sparks7 months ago

backend devs in 5yrs

Whq2001@ca's profile picture
Whq2001@ca7 months ago

IBM RationalRose real-time could do this 20 years ago. Backward marching.

tldraw's profile picture
tldraw7 months ago

time is a flat circle @whq2001

Yury Yakubchyk's profile picture
Yury Yakubchyk7 months ago

Bidirectional diagram and code is the dream. This is it.

Pratyay Banerjee (নীল) 's profile picture
Pratyay Banerjee (নীল) 7 months ago

@sandipndey

Vlad's profile picture
Vlad7 months ago

@DavidKPiano yes! also one of the best ways to help a non-programming person work on some moderately complex logic

Vladyslav Hunt's profile picture
Vladyslav Hunt7 months ago

bidirectional sync between diagram and code is the workflow figma always promised but never delivered

Ravi Gummadi's profile picture
Ravi Gummadi7 months ago

very nice. i was thinking about a similar idea. Can we also checkin the tldraw source files along with the github commits and keep it in sync with the code base? or alternatively using github actions to ensure that the tldraw master file is always in sync with the code base

tldraw's profile picture
tldraw7 months ago

Yeah! Check out our vs code / cursor extensions too

Nikhil Rao's profile picture
Nikhil Rao7 months ago

damn that will make things a lot easier

sycoms's profile picture
sycoms7 months ago

This workflow is the future: spec as diagram, code as compilation target.

GEN-Z Invest's profile picture
GEN-Z Invest7 months ago

@grok can I just use Obsidian Canvas (maybe connect with AI) instead of this?

Taha Ali Adil's profile picture
Taha Ali Adil7 months ago

@mattpocockuk

Safta Catalin Mihai's profile picture
Safta Catalin Mihai7 months ago

@disconcision isn’t this what visual basic did for the ui builder, without ai ?

velocity's profile picture
velocity7 months ago

Cool.

AIxGeek's profile picture
AIxGeek7 months ago

mark

Jakub Z's profile picture
Jakub Z7 months ago

In case project is in JS/TypeScript, why not just use stateX?

XSpectreEdge 𝕏's profile picture
XSpectreEdge 𝕏7 months ago

!!!

MikhailMits's profile picture
MikhailMits7 months ago

Gow did you setup this?

ImoutoFan's profile picture
ImoutoFan7 months ago

would have been faster to just code it yourself lmao

chester's profile picture
chester7 months ago

Nice

Yury Yakubchyk's profile picture
Yury Yakubchyk7 months ago

Diagram-as-code is the way. Version control becomes trivial, and you can generate docs programmatically. Nice to see it evolving.

pysolin's profile picture
pysolin6 months ago

OG is back

Edu Wass's profile picture
Edu Wass7 months ago

wait theres a desktop app now?!

tldraw's profile picture
tldraw7 months ago

secretly

Edu Wass's profile picture
Edu Wass7 months ago

👀

DreamCode's profile picture
DreamCode7 months ago

Excellent functionality, bidirectional influence

Related Videos