正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

tldraw

77,922 subscribers

306,006 次观看 • 7 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

34 条评论

tldraw 的头像

tldraw7 个月前

Try it here:

Abhimanyu ARYAN ♡ 的头像

Abhimanyu ARYAN ♡7 个月前

Looks like a familiar language, "Mermaid"?

tldraw 的头像

tldraw7 个月前

just tldraw shapes

Fernando 的头像

Fernando7 个月前

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 的头像

Twlvone7 个月前

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 🐙 的头像

Adrián Mato 🐙7 个月前

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

Strakyo 的头像

Strakyo7 个月前

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

sparks 的头像

sparks7 个月前

backend devs in 5yrs

Whq2001@ca 的头像

Whq2001@ca7 个月前

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

tldraw 的头像

tldraw7 个月前

time is a flat circle @whq2001

Yury Yakubchyk 的头像

Yury Yakubchyk7 个月前

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

Pratyay Banerjee (নীল)  的头像

Pratyay Banerjee (নীল) 7 个月前

@sandipndey

Vlad 的头像

Vlad7 个月前

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

Vladyslav Hunt 的头像

Vladyslav Hunt7 个月前

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

Ravi Gummadi 的头像

Ravi Gummadi7 个月前

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 的头像

tldraw7 个月前

Yeah! Check out our vs code / cursor extensions too

Nikhil Rao 的头像

Nikhil Rao7 个月前

damn that will make things a lot easier

sycoms 的头像

sycoms7 个月前

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

GEN-Z Invest 的头像

GEN-Z Invest7 个月前

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

Taha Ali Adil 的头像

Taha Ali Adil7 个月前

@mattpocockuk

Safta Catalin Mihai 的头像

Safta Catalin Mihai7 个月前

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

velocity 的头像

velocity7 个月前

Cool.

AIxGeek 的头像

AIxGeek7 个月前

mark

Jakub Z 的头像

Jakub Z7 个月前

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

XSpectreEdge 𝕏 的头像

XSpectreEdge 𝕏7 个月前

!!!

MikhailMits 的头像

MikhailMits7 个月前

Gow did you setup this?

ImoutoFan 的头像

ImoutoFan7 个月前

would have been faster to just code it yourself lmao

chester 的头像

chester7 个月前

Nice

Yury Yakubchyk 的头像

Yury Yakubchyk7 个月前

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

pysolin 的头像

pysolin6 个月前

OG is back

Edu Wass 的头像

Edu Wass7 个月前

wait theres a desktop app now?!

tldraw 的头像

tldraw7 个月前

secretly

Edu Wass 的头像

Edu Wass7 个月前

👀

DreamCode 的头像

DreamCode7 个月前

Excellent functionality, bidirectional influence

相关视频

PhD Students - How to create a diagram in seconds? 1. Go to 2. Describe the diagram you want to create 3. ResearchViz will create the diagram 4. Edit it as per your need 5. Download it in any format you want

PhD Students - How to create a diagram in seconds? 1. Go to 2. Describe the diagram you want to create 3. ResearchViz will create the diagram 4. Edit it as per your need 5. Download it in any format you want

Faheem Ullah

11,048 次观看 • 2 个月前

I finally cracked the code to Trump's unhinged administration picks. Annnnd made a Venn diagram to prove it:

I finally cracked the code to Trump's unhinged administration picks. Annnnd made a Venn diagram to prove it:

Kat Abughazaleh

161,900 次观看 • 1 年前

#1 Trending Today on Github w/ Diagram Design skill ☺️ 29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop. here's why I made it:

#1 Trending Today on Github w/ Diagram Design skill ☺️ 29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop. here's why I made it:

Cathryn

11,477 次观看 • 1 个月前

I built an IDE that writes your hardware code. Describe what you want to build, get a wiring diagram, the code, and one-click upload to 720+ boards. Beta is live →

I built an IDE that writes your hardware code. Describe what you want to build, get a wiring diagram, the code, and one-click upload to 720+ boards. Beta is live →

Ari Wasch

24,692 次观看 • 5 个月前

Codex can generate charts inline... Here are the different charts you can ask for: 1. Before-and-After Diagram 2. Cause-and-Effect Chart 3. System Architecture Diagram 4. Network Map 5. Data-Flow Diagram 6. Information-Flow Diagram 7. Flywheel 8. Feedback Loop 9. Hierarchy Chart 10. Organization Chart 11. Mind Map 12. Concept Map 13. Relationship Map 14. Ecosystem Map 15. Stakeholder Map 16. Dependency Map 17. Journey Map 18. User-Flow Diagram 19. Roadmap 20. Milestone Chart 21. Gantt-Style Chart 22. Swimlane Diagram 23. Sankey-Style Flow Chart 24. Venn Diagram 25. Comparison Table 26. Comparison Matrix 27. Quadrant Chart 28. Pros-and-Cons Chart 29. Pyramid Diagram 30. Layer Diagram 31. Spectrum Chart 32. Maturity Model 33. Progression Chart 34. Scorecard 35. Statistic Cards 36. Bar Chart 37. Line Chart 38. Donut Chart 39. Scatter Plot 40. Heat Map 41. Annotated Interface Diagram 42. Exploded Interface Diagram 43. Code-to-Outcome Diagram 44. How-It-Works Explainer 45. Incident Reconstruction Diagram

Codex can generate charts inline... Here are the different charts you can ask for: 1. Before-and-After Diagram 2. Cause-and-Effect Chart 3. System Architecture Diagram 4. Network Map 5. Data-Flow Diagram 6. Information-Flow Diagram 7. Flywheel 8. Feedback Loop 9. Hierarchy Chart 10. Organization Chart 11. Mind Map 12. Concept Map 13. Relationship Map 14. Ecosystem Map 15. Stakeholder Map 16. Dependency Map 17. Journey Map 18. User-Flow Diagram 19. Roadmap 20. Milestone Chart 21. Gantt-Style Chart 22. Swimlane Diagram 23. Sankey-Style Flow Chart 24. Venn Diagram 25. Comparison Table 26. Comparison Matrix 27. Quadrant Chart 28. Pros-and-Cons Chart 29. Pyramid Diagram 30. Layer Diagram 31. Spectrum Chart 32. Maturity Model 33. Progression Chart 34. Scorecard 35. Statistic Cards 36. Bar Chart 37. Line Chart 38. Donut Chart 39. Scatter Plot 40. Heat Map 41. Annotated Interface Diagram 42. Exploded Interface Diagram 43. Code-to-Outcome Diagram 44. How-It-Works Explainer 45. Incident Reconstruction Diagram

Agent Native

68,234 次观看 • 1 个月前

Tested Qoder this week. Dropped a docs link into the task screen. Asked it to generate an architecture diagram. The agent read the docs, planned the structure, and built the diagram without me touching a single tool.

Tested Qoder this week. Dropped a docs link into the task screen. Asked it to generate an architecture diagram. The agent read the docs, planned the structure, and built the diagram without me touching a single tool.

Rayan Python

143,689 次观看 • 5 天前

I didn't have time to finish the down special for my character, so you'll have to code it yourself during the match. Hope that's ok for the contest Aether Studios

I didn't have time to finish the down special for my character, so you'll have to code it yourself during the match. Hope that's ok for the contest Aether Studios

Muno 🐌

175,618 次观看 • 3 年前

Claude Code Teams as a flow diagram Just run: npx claude-code-templates@latest --teams You’ll get a full view of how the lead and the team communicate: messages, tasks, and the tools they executed. The more observability you have into your Claude Code agents’ workflows, the better your workflows, and the better the results. Open source project:

Claude Code Teams as a flow diagram Just run: npx claude-code-templates@latest --teams You’ll get a full view of how the lead and the team communicate: messages, tasks, and the tools they executed. The more observability you have into your Claude Code agents’ workflows, the better your workflows, and the better the results. Open source project:

Daniel San

85,478 次观看 • 7 个月前

The free body diagram gets you started. It doesn't get you to the finish line. Jackie from Pratt Miller Motorsports knows the difference.

The free body diagram gets you started. It doesn't get you to the finish line. Jackie from Pratt Miller Motorsports knows the difference.

Nominal

1,237,986 次观看 • 3 个月前

Claude finally killed the need for OpenClaw They launched "Claude Channels" which allows you to control Claude Code from your Telegram / Discord I show you how to set it up in ~6 minutes in mainly 3 steps Step 1: Create bot with BotFather Step 2: Install the Claude plugin Step 3: Pair with a code Now I can code, research, manage files from my phone using Claude Code If you don't watch this tutorial now I highly suggest you bookmark for later!

Claude finally killed the need for OpenClaw They launched "Claude Channels" which allows you to control Claude Code from your Telegram / Discord I show you how to set it up in ~6 minutes in mainly 3 steps Step 1: Create bot with BotFather Step 2: Install the Claude plugin Step 3: Pair with a code Now I can code, research, manage files from my phone using Claude Code If you don't watch this tutorial now I highly suggest you bookmark for later!

Chris ☕️

70,433 次观看 • 6 个月前

the venn diagram of my interests just became a circle Justin Bieber 🤝 NWO

the venn diagram of my interests just became a circle Justin Bieber 🤝 NWO

Cathy Kelley

39,618 次观看 • 2 个月前

What pro cities have what pro sports leagues? I made the biggest venn diagram ever to break it down.

What pro cities have what pro sports leagues? I made the biggest venn diagram ever to break it down.

GFed

18,928 次观看 • 2 个月前

I used Claude Code with the new Remotion skill to create a teaser for the latest Laravel release. The voice is from , and I didn’t code or edit anything myself. It took a few iterations to get here, but pretty impressive 😮

I used Claude Code with the new Remotion skill to create a teaser for the latest Laravel release. The voice is from , and I didn’t code or edit anything myself. It took a few iterations to get here, but pretty impressive 😮

Christoph Rumpel 🤠

26,562 次观看 • 8 个月前

For new Baseball fans. Nicky created a Venn Diagram to guide you about the game

For new Baseball fans. Nicky created a Venn Diagram to guide you about the game

Wake Up Barstool

1,265,544 次观看 • 5 个月前

#uncs37code Can you match my code to win #uncs37watch 🤩 All you need is (ONE) 7 digit numbers which must contain 3️⃣7️⃣ in the code. Example of 7 digit code; (000003️⃣7️⃣) or or (123453️⃣7️⃣) NOT like this( 123️⃣87️⃣54) Leave your code in comment section please 🙏🏿 Looking for 1 winner.

#uncs37code Can you match my code to win #uncs37watch 🤩 All you need is (ONE) 7 digit numbers which must contain 3️⃣7️⃣ in the code. Example of 7 digit code; (000003️⃣7️⃣) or or (123453️⃣7️⃣) NOT like this( 123️⃣87️⃣54) Leave your code in comment section please 🙏🏿 Looking for 1 winner.

Albert Adomah

14,364 次观看 • 1 年前

I added the most requested feature to AI Code Translator… Natural language to/from code! You can now: - Use natural language to generate code. - Get natural language explanations from code. Try it: GitHub:

I added the most requested feature to AI Code Translator… Natural language to/from code! You can now: - Use natural language to generate code. - Get natural language explanations from code. Try it: GitHub:

Mckay Wrigley

608,213 次观看 • 3 年前