Top 6 Tools to Turn Code into Beautiful Diagrams

[@-----0-----]

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

[@jblack1396]

I love using minigrammer. I am getting ready next week to show it to some people on my team as I find this to be a great way to store diagrams, as Visio and the other similar tools can be fairly cumbersome, especially when I am creating diagrams for cloud deployments. I just wish I had an easy way to layer diagrams. My only option, so far, is to copy the infrastructure diagram, then add in the new components/lines for the layer of interest, such as to show security controls. I need to look up Mermaid as I think that may also be useful for sequence diagrams, thanks.

[@pontiv]

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

[@h951115951115]

he is not that good in English, you know🤫

[@erickvidbaz3086]

@pontiv agree

[@jorgecelis8459]

And do you know some tools for that? I google a bit and found sourcetrail, but it is not maintained since 2021

[@jorgecelis8459]

And do you know some tools for that? I google a bit and found sourcetrail, but it is not maintained since 2021

[@Infodatalyzer]

@@h951115951115 He might have done intentionally for clickbait, I guess. Well, that's not what most people expect from the video called like that.

[@saurabhzinjad7249]

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.

[@pur3D3votion]

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!

[@attaboyabhi]

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

[@Steve5c2781]

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

[@stonemannerie]

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

[@GRASBOCK]

The actual "Turn Diagrams into Code" would have been very interesting.

[@eliaspfeffer]

Yeah, that’s what I want!

[@ahmedanwer1767]

Yeah

[@scottamolinari]

Puh, I watched this video to learn about diagrams that can be turned to code. It is the complete opposite. Thumb-downing this video, despite it being pretty well done.

[@INDABRIT]

​@GRASBOCK AWS just released one at Re:Invent. I think it even integrates with VS code and creates cloud formation templates for you

[@prasaugus]

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

[@djordje1999]

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

[@drith]

aggre

[@ItaloGomesV]

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

[@yzadil]

can you recommend a quick intro tutorial for D2? Thanks.

[@ОлегЯрмоленко-ф6ц]

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

[@worldnewsforu5623]

This creator won't tell their secrets .. I asked this question in this creator LinkedIn KZbin but he did not respond.. what he need is only we need to watch his videos and content for his earning .. he will not respond to us

[@parashar1505]

@@worldnewsforu5623 very true! I always find this bytebytego team to be really nasty!

[@agatehao]

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

[@hansisbrucker813]

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

[@superfliping]

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

[@jizhang2407]

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

[@praenubilus1980]

power point most likely😏

[@NarrowWare]

Adobe After effects for sure. Since the approach is the same in all videos (frame duration, transitions, etc) I would go for the hypothesis that one of the people behind bytebytego (they are 3 people) does the animation.

[@khomo12]

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

[@eltreum1]

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.

[@willytjandra]

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 😊

[@drevasa]

It has been learning on thr steam deck. Controls are very different. Love the series.

[@kirillstytsenko6414]

The animated videos are top notch! Could you explain what tools you used to make this?

[@danielgospodinow]

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.

[@anhcoder]

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

[@4guns]

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?

[@Rafael-nq2qk]

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?

[@5pmDataClub]

can you plz give link for Diagrams tool, I am unbale to find correct url

[@dupcode]

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

[@TheVincent0268]

For Angular: compodoc. I used to be a fan of these drawing/graph tools but stopped using them since I realized that the output lacks behind with the actual code very quickly.

[@TheCinefotografiando]

Clever way to rank top on next finetuning dataset crawl 💎

[@vedantamitpandya]

Just tell me first, where you guys are creating these diagrams!? @ByteByteGo

[@nuferusi]

"Animation tools: Adobe Illustrator and After Effects."

[@mti2fw]

They always animate diagrams manually? 😮

[@davemeech]

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.

[@work5079]

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

[@RHHS1985]

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

[@MonsieurSchue]

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?

[@rajaloni8704]

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

[@vigneshe3466]

which tool are you using for your videos?

[@invisibleinvisible83]

Thank you🙏🏻 we are using plantuml too

[@go_better]

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

[@escher4401]

What is the one used to do the background illustrations?

[@chenliang5263]

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

[@rembautimes8808]

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

[@DarthJarJar10]

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

[@tamarakepreyeomgbuayakimi.2841]

Me too.

[@christopher96]

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.

[@serdar_1978]

I am actually looking for a more modern uml with animation in your video, the ones in the example are very simple

[@cosmicrdt]

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

[@NarrowWare]

Adobe After effects for sure. Since the approach is the same in all videos (frame duration, transitions, etc) I would go for the hypothesis that one of the people behind bytebytego (they are 3 people) does the animation.

[@misaelpereira9679]

The best one imo is Diagrams

[@Infodatalyzer]

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.

[@anthonyjaguenaud34]

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 ?

[@jorge.orozco]

Do you have ProcessFlow Diagram? Yourdon Metodology?

[@ThyagoVitorSampaio]

GREAT JOB BRO! THANKS!

[@khushikareddy3513]

Is there any tool that generates a Software DESIGN PATTERNS from UML diagrams/Codes?

[@겉멋코딩]

I realized that I want this every-time thx

[@PS3PCDJ]

I'm sticking with the tried and tested graphviz

[@abbeyjv]

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

[@user-wb4yj6sw3k]

What you use to animate diagrams in your youtube videos

[@VaibhavShewale]

damn you changed the tile to something that someone recommended

[@Rahulsapkota]

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

[@ThatNiceDutchGuy]

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.

[@kantyDarius]

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

[@fannigurt]

You probably better to use PlantUML, because it will be more relevant for enterprise segment

[@ottomaier7127]

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

[@MohammedLamineMEBAREK]

any knows how thos diagrams are animated like in the video ?

[@onionsandwich]

THIS IS BEAUTIFUL !

[@zerokifaco6076]

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

[@NarrowWare]

Adobe After effects for sure. Since the approach is the same in all videos (frame duration, transitions, etc) I would go for the hypothesis that one of the people behind bytebytego (they are 3 people) does the animation.

[@frankie_goestohollywood]

Thank you 🙂 Love your channel.

[@nathanstanfordsr]

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

[@nagarava]

Can I use C++?

[@sarunas8002]

tried plantuml extensively. other than sequence diagraming it is bad. typically you want to diagram something that is more complex than two boxes. i found myself constantly fighting with it and then gave up

[@victorolvera6482]

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.

[@jeremiblurton_yt]

There are a number of low-code/no-code platforms that attempt to do this. They are good for more simple applications and some workflow automation but you can run into issues with anything more complex.

[@brodriguez11000]

@@jeremiblurton_yt Unreal Blueprints.

[@ragnar6704]

chatgpt paid version , I used it for the same use case and I am able to get good results

[@hottroddinn]

@@brodriguez11000- Are you talking about the Unreal engine one?

[@brodriguez11000]

@@hottroddinn Yes.

[@psychotrout]

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

[@ChaojianZhang]

Good survey!

[@rowenarrow]

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

[@hoven130]

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

[@vivasjimmy]

awesome tips thanks

[@ArtemYakovlev]

Truly amazing and useful content

[@dawidlaszuk]

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

[@morespinach9832]

One google away.

[@MuthukumarKB]

You missed the c4 model and structurizr dsl...

[@boulabiar]

But how you animate them like in this video?

[@morespinach9832]

Using Adobe tools

[@dimitrikalinin3301]

Beautiful, thank you!

[@AlvaroOByrne]

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

[@andrewparsons1041]

d2lang is also quite nice

[@munteanionut3993]

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

[@Viewpoint314]

How can I draw Neural Networks?

[@tech-jeweler]

thank you for this. leaving a thumbs up.

[@kerlianglim5662]

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

[@davidmalechek9443]

The presentation of the output of these tools is way better than the tools. Misleading.

[@wangyongt]

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

[@al-orange]

Graphviz

[@Rachelebanham]

+1 for PlantUML

[@lewotech]

I think freeform is very useful for creating diagrams.

[@dirceusilva3437]

Very good, thanks!

[@mePrafull]

Thank you

[@AhmedSalah-cs8jk]

thanks. this my first time to know there is somthing called ascii art

[@davidbayoalcaide7028]

what about D2lang?

[@transientaardvark6231]

Clickbait - these don''t "turn code into diagrams", they draw diagrams by code.

[@vladislavkomelkov7451]

What about c4?

[@touristtam]

So write diagram with code and not generate diagrams from code?

[@StephenRayner]

Xstate for writing complex state machines through diagrams

[@jeongyeollee5121]

How about D2?

[@Nine-zz6cs]

Nice , Thank you

[@MyrLin8]

excellent, thanks :)

[@viniciusbeloni3199]

D2Lang playground (its same lang used by Terrastruct)

[@LinuxForLife]

Nice! Thanks.