Top 6 Tools to Turn Code into Beautiful Diagrams 

00:14 Diagrams - diagrams mingrammer - Python library 01:00 Go Diagrams - blushft go-diagrams 01:09 Mermaid - Mermaid Diagramming and charting tool 01:48 PlantUML 02:16 ASCII diagrams 02:40 ASCII diagrams - asciiflow & monodraw (Mac only) 02:47 Markmap

I think the title is wrong, these tools aren't for converting code into diagrams but to create diagrams with code. It's a major difference

Finally, someone who presents this topic and helps us see what's out there since diagraming manually is very time-consuming. Amazing video and thanks for taking the time to make it!

00:14 Diagrams: A Python library to draw cloud system architectures in code for rapid prototyping and version control. 00:59 Go-Diagrams: A Go-based tool similar to Diagrams for creating cloud system architectures in code. 01:07 Mermaid: A JavaScript library using Markdown-style text to create and update diagrams easily. 01:42 PlantUML: A versatile tool using a domain-specific language to generate various types of diagrams. 02:12 ASCII Diagram Editors: Tools that render diagrams as ASCII art using plain text, like asciiflow and Monodraw (Mac Only). 02:46 Markmap: A tool that visualizes mind maps from Markdown documents, highlighting hierarchical relationships.

Wow - something that I had been thinking about and great of you to share these resources.

Great! I have been looking for tools used to "draw" the diagrams other than pure uml tools.

I have tried mermaid and plantUML but what I enjoyed most was D2, it's very neat and with a easier syntax.

only a developer appreciates the joy of managing diagram versions as code.

I was hoping at first, we finally got a new diagram as code solution lol. Some of these are nice looking options you could even generate with automation from parsing your *ML or JSON formatted configs. Layout becomes a challenge sometimes when they get too complicated and best as 10,000-foot overviews or detail fragments of more complicated systems. We are working on a network configuration database that models networks for automation provisioning and adding a similar JS library to auto generate wiring diagrams on demand for installers and design reviews and validations.

Clever way to rank top on next finetuning dataset crawl 💎

Thank you🙏🏻 we are using plantuml too

Beautiful, thank you!

Thanks a lot! Wonderful tools, beautiful visuals and clear explanations

Truly amazing and useful content

I think the title is mixed up. Should be "Top 6 Tools to Turn Code into Beautiful Diagrams"

This exactly what I've been looking for for visually documenting work - thank you!

We need to know how to make video from diagram as you do :D It's nice

Mermaid is awesome, is just what i´ve been looking for, thanks a lot man!!

Great content, excellent. I was wondering what tools do you use to edit your videos? Also, are there any types of libraries for symbols and animations you would recommend?

Hi! Where do you create your animated diagrams? They are awesome!

This is excellent stuff, I'll need to play around with these. I would love to generate AWS infrastructure diagrams from clpudformation or terraform templates.

I realized that I want this every-time thx

This is great. I will give a few of these a try

Saw you in my LN feeds, this stuff is fantastic!

THIS IS BEAUTIFUL !

thank you for this. leaving a thumbs up.

Thank you 🙂 Love your channel.

Very good, thanks!

Great video. Diagraming helps a lot in communicating ideas to others. I’d be interested to know how do you create the animated diagram as shown in the video 😊

GREAT JOB BRO! THANKS!

Nice! Thanks.

awesome tips thanks

Good survey!

I'm sticking with the tried and tested graphviz

I found Excalidraw's AI to be super helpful! You just tell it what the system looks like and it creates a diagram for it.

Nice , Thank you

such a good video, i wanna watch it again just so i can watch it again 😂

This post is extremely useful for documenting and versioning the same. Thank you. Can you let us know which tools you use for your presentation?? #bytebytego

Thanks ! Any suggestion to draw BPMN swimlanes to document processes ?

❤❤❤ Thanks so much

Graphviz is also good. It is used by Doxygen for example.

d2lang is also quite nice

I am curious what tools that ByteByteGo use to draw those beautiful animated diagram.

excellent, thanks :)

+1 for PlantUML

any videos on tool for documentation for the api apart from swagger?

What do you use to create the animated diagrams in your videos?

Bro Ya Da Best

thank you sir

Thanks. Keeping architecture diagrams up to-date is lagging. Is there a tool to create a database schema diagram as code?

I would love monodraw for windows. Are you aware of any alternative with comparable features?

Could you also tell me how to create, or any tools, to generate the animated diagrams?

Is there an automated youtube to flow diagram/ +screen shots from important parts of the video when click on node shows the image (step by step instructions/imgs) seems like this would makes it easier to follow instructions and compare methodology

@ByteByteGo - which tool/software are you using to create your videos? If someone else knows the answer, can also reply. I'll appreciate that. These are really nice flow visual diagram videos.

would u suggest one opensource tool for creating concepts maps (visualise & linking the same / different concepts) ..I would appreciate for your early response: D

May I ask if the animation was created by the diagrams library or by post-processing, using After Effects, for example?

damn you changed the tile to something that someone recommended

What is the one used to do the background illustrations?

There are a few tools out there truly using graphic/ diagram coding, Alteryx, KNIME.. to name a few. And it's for both coder and no coder. I've known quite a few professional coder wouldn't bother doing coding anymore with those tools. Who wouldn't want to get a step by step diagram but still opt for hundreds or thousands line of codes?

What you use to animate diagrams in your youtube videos

Are there any markdown-based tools that can generate simple animated diagrams? Imagine something that can render some of the animations (building the static diagrams one element at a time) in the way that you've done for this video (such as the diagram built out starting at 0:15). Does such a tool exist?

Do you have ProcessFlow Diagram? Yourdon Metodology?

Great info. Would you be interested in being a judge for something like this? 1. CodeCraft Duel: Super Agent Showdown 2. Pixel Pioneers: Super Agent AI Clash 3. Digital Duel: LLM Super Agents Battle 4. Byte Battle Royale: Dueling LLM Agents 5. AI Code Clash: Super Agent Showdown 6. CodeCraft Combat: Super Agent Edition 7. Digital Duel: Super Agent AI Battle 8. Pixel Pioneers: LLM Super Agent Showdown 9. Byte Battle Royale: Super Agent AI Combat 10. AI Code Clash: Dueling Super Agents Edition

which tool are you using for your videos?

Are you aware of any text tools that generate WBS(Work breakdown structure) diagram?

Great video, thank you. But some links in the description would have been quite helpful ;-)

I think freeform is very useful for creating diagrams.

Xstate for writing complex state machines through diagrams

Hi, It is realy intresting, but how did you create the animation of diagrams ? For _diagrams_ with python, I don’t see how to create an animation. Is it possible directly ? Or do I need an other tool ?

Is there a diagram tool that could literally map at least a 100-1000 lines code? There are some code visualizers in VS Studio but they are kind of glitchy or do it in a very inconvinient way.

What if you code in ColdFusion can it read any other languages?

I'm using mermaid for few years and now knew about Python Diagrams via your video :)) Thanks

how do you make this video. do you use power point?

oof, but how you did the animations? wow! well done!

But what tool did you use to animate and beautify the charts?

You missed the c4 model and structurizr dsl...

Can I use C++?

This would be the opposite side of function creep that most, if not all, programmers hate. Programmers hate that in others! They simply add another language, API, library, protocol, workflow or whatever. After a while the programmer will be gone, along with all the knowledge, and the next person will have a problem getting and keeping things working. Fortunately, the new people know this handy tool... There used to be a song: There's a hole in my bucket.

Can you actually create a diagram from code, such as Python, Java, C#, React, Angular, Node, Go, etc.? Or vice versa, to create the code based on the architecture diagram.

Thank you, I could use tools like this BUT is there anything out there that works the other way around. Like making a diagram first and then turn that into code.

Is there a tool to transform architecture diagrams into Terraform code and vice versa?

what's the tool's name at 02:21 ?

cool

Is there a tool that takes code and generates diagrams crom code??

What about c4?

I tried turning my code into beautiful diagrams once, but the diagrams just ended up looking like abstract art!

Noticeable absence of Structurizer for C4 architecture and deployment diagrams

How about D2?

what about D2lang?

But how you animate them like in this video?

💎💎

"...into *beautiful* diagrams..." > visualizes my own code 🍝 ...you sure about that? 😂

I'd honestly appreciate some links to resources that you're referring to in the video.

I love mermaid! not perfect, but good enough and still young :) I just wish Notion will have better support..

As we mindmapize knowledge more anf more, we need an AI can simply turn that into code and vice versa. This allow human to quickly build up poc from idea and make any necessary adjustment to achieve overall goal.

لقد جربت mermaid و هو رائع حقا

Oh My Hecking God!!!

mermaid is in my top 5

Yo dawg, I herd you like diagrams, so I put a diagram in your diagrams so you can diagram while you diagram

PLANT GANG