Top 6 Tools to Turn Code into Beautiful Diagrams

Рет қаралды 536,135

Күн бұрын

Get a Free System Design PDF with 158 pages by subscribing to our weekly newsletter: bit.ly/bytebytegoytTopic
Animation tools: Adobe Illustrator and After Effects.
Checkout our bestselling System Design Interview books:
Volume 1: amzn.to/3Ou7gkd
Volume 2: amzn.to/3HqGozy
The digital version of System Design Interview books: bit.ly/3mlDSk9
ABOUT US:
Covering topics and trends in large-scale system design, from the authors of the best-selling System Design Interview series.

Пікірлер: 179

@-----0----- 3 ай бұрын

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 2 ай бұрын

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 3 ай бұрын

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 2 ай бұрын

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 24 күн бұрын

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

@pur3D3votion 3 ай бұрын

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!

@rembautimes8808 3 ай бұрын

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

@khomo12 3 ай бұрын

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

@go_better 3 ай бұрын

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

@ItaloGomesV 3 ай бұрын

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

@eltreum1 3 ай бұрын

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.

@djordje1999 3 ай бұрын

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

@drith 2 ай бұрын

aggre

@invisibleinvisible83 3 ай бұрын

Thank you🙏🏻 we are using plantuml too

@dimitrikalinin3301 3 ай бұрын

Beautiful, thank you!

@ArtemYakovlev 3 ай бұрын

Truly amazing and useful content

@TheCinefotografiando 3 ай бұрын

Clever way to rank top on next finetuning dataset crawl 💎

@rowenarrow 3 ай бұрын

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

@davemeech 3 ай бұрын

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.

@kantyDarius 2 ай бұрын

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

@user-rb7ho5gx2b 3 ай бұрын

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

@DarthJarJar10 3 ай бұрын

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

@tamarakepreyeomgbuayakimi.2841 2 ай бұрын

Me too.

@frankie_goestohollywood Ай бұрын

Thank you 🙂 Love your channel.

@Rafael-nq2qk 3 ай бұрын

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?

@user-vv9hf4yf1d 3 ай бұрын

I realized that I want this every-time thx

@tech-jeweler 3 ай бұрын

thank you for this. leaving a thumbs up.

@powernemo 3 ай бұрын

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

@dirceusilva3437 3 ай бұрын

Very good, thanks!

@onionsandwich 2 ай бұрын

THIS IS BEAUTIFUL !

@ThyagoVitorSampaio Ай бұрын

GREAT JOB BRO! THANKS!

@willytjandra 3 ай бұрын

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 😊

@LinuxForLife 3 ай бұрын

Nice! Thanks.

@vivasjimmy 2 ай бұрын

awesome tips thanks

@attaboyabhi 2 ай бұрын

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

@ChaojianZhang 2 ай бұрын

Good survey!

@Nine-zz6cs 3 ай бұрын

Nice , Thank you

@RHHS1985 Ай бұрын

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

@MyrLin8 Ай бұрын

excellent, thanks :)

@stonemannerie 3 ай бұрын

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

@GRASBOCK 3 ай бұрын

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

@eliaspfeffer 3 ай бұрын

Yeah, that’s what I want!

@ahmedanwer1767 3 ай бұрын

Yeah

@scottamolinari 3 ай бұрын

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 3 ай бұрын

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

@hoven130 3 ай бұрын

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

@madratsss 3 ай бұрын

❤❤❤ Thanks so much

@prasaugus 2 ай бұрын

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

@danielgospodinow 3 ай бұрын

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.

@Steve5c2781 2 ай бұрын

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

@work5079 2 ай бұрын

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

@chenliang5263 3 ай бұрын

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

@superfliping 23 күн бұрын

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

@theoryandapplication7197 Ай бұрын

thank you sir

@andrewparsons1041 3 ай бұрын

d2lang is also quite nice

@agatehao 2 ай бұрын

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

@Rahulsapkota 3 ай бұрын

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

@rajaloni8704 24 күн бұрын

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

@raitasorin 2 ай бұрын

Bro Ya Da Best

@hansisbrucker813 2 ай бұрын

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

@dupcode 2 ай бұрын

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

@vigneshe3466 9 күн бұрын

which tool are you using for your videos?

@Rachelebanham 3 ай бұрын

+1 for PlantUML

@jizhang2407 3 ай бұрын

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

@praenubilus1980 3 ай бұрын

power point most likely😏

@NarrowWare 3 ай бұрын

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.

@escher4401 Ай бұрын

What is the one used to do the background illustrations?

@VaibhavShewale 3 ай бұрын

damn you changed the tile to something that someone recommended

@PS3PCDJ Ай бұрын

I'm sticking with the tried and tested graphviz

@user-wb4yj6sw3k 3 ай бұрын

What you use to animate diagrams in your youtube videos

@abbeyjv 3 ай бұрын

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

@jorge.orozco 3 ай бұрын

Do you have ProcessFlow Diagram? Yourdon Metodology?

@MonsieurSchue 3 ай бұрын

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?

@ottomaier7127 Ай бұрын

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

@lewotech 2 ай бұрын

I think freeform is very useful for creating diagrams.

@christopher96 24 күн бұрын

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.

@AlvaroOByrne Ай бұрын

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

@victorolvera6482 3 ай бұрын

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 3 ай бұрын

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 3 ай бұрын

@@jeremiblurton_yt Unreal Blueprints.

@ragnar6704 3 ай бұрын

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

@hottroddinn 3 ай бұрын

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

@brodriguez11000 3 ай бұрын

@@hottroddinn Yes.

@zerokifaco6076 3 ай бұрын

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

@NarrowWare 3 ай бұрын

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

@Infodatalyzer 24 күн бұрын

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.

@rainmannoodles 2 ай бұрын

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

@BevPyfer 3 ай бұрын

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

@erneststaszuk4559 Ай бұрын

Mine not, but I’ve lost my inheritance.

@StephenRayner 3 ай бұрын

Xstate for writing complex state machines through diagrams

@cosmicrdt 3 ай бұрын

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

@NarrowWare 3 ай бұрын

@anhcoder 2 ай бұрын

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

@nagarava Ай бұрын

Can I use C++?

@syntheticperson 3 ай бұрын

cool

@nathanstanfordsr 2 ай бұрын

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

@wangyongt 3 ай бұрын

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

@MuthukumarKB 3 ай бұрын

You missed the c4 model and structurizr dsl...

@kerlianglim5662 3 ай бұрын

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

@CaPsNoII 3 күн бұрын

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

@DeWhiskeys 3 ай бұрын

Noticeable absence of Structurizer for C4 architecture and deployment diagrams

@munteanionut3993 3 ай бұрын

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

@dawidlaszuk 3 ай бұрын

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

@morespinach9832 3 ай бұрын

One google away.

@Delsto5 3 ай бұрын

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

@jowangtang4540 3 ай бұрын

Oh My Hecking God!!!

@jeongyeollee5121 2 ай бұрын

How about D2?

@davidbayoalcaide7028 27 күн бұрын

what about D2lang?

@boulabiar 3 ай бұрын

But how you animate them like in this video?

@morespinach9832 3 ай бұрын

Using Adobe tools

@vladislavkomelkov7451 2 ай бұрын

What about c4?

@leosmi1 2 ай бұрын

mermaid is in my top 5

@space-waves 3 ай бұрын

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

@morespinach9832 3 ай бұрын

Mermaid and D2 the picks.

@GamersGoneExtinct 3 ай бұрын

The title if the other-way around, wouldn't have clicked.

@jacobamason 3 ай бұрын

PLANT GANG

@27.Counting 3 ай бұрын

💎💎

@touristtam 9 күн бұрын

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

@-----0----- 3 ай бұрын

Script to Diagram

@denisblack9897 3 ай бұрын

Ask chatgpt to make a diagram in ascii

@vservicesvservices7095 3 ай бұрын

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.

@hottroddinn 3 ай бұрын

Yes. This is the exact use case people should be solving. However, there is always a bunch of absolutely garbage software which very, very few or no one uses and tried to be pushed on to buy.