DEV Community

Cover image for Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content

Diagram-as-Code: Creating Dynamic and Interactive Documentation for Visual Content

Romina Elena Mendez Escobar on November 19, 2024

In this article, I will guide you step by step to create dynamic and interactive visual documentation using Diagram-as-Code tools. Instead of stati...
Collapse
 
v1bh0r profile image
Vibhor Mahajan •

I’ve used Plantuml with AWS icons in the past github.com/awslabs/aws-icons-for-p...

Plantuml is very versatile and has great tooling support with the IDEs providing preview capabilities.

Should I be considering this python library if I’m a Plantuml user?

Collapse
 
r_elena_mendez_escobar profile image
Romina Elena Mendez Escobar •

Thanks for sharing it because I didn't know it.

Collapse
 
v1bh0r profile image
Vibhor Mahajan • • Edited

I thought so. It is very brave for you to have put your work on the web. That’s always the best way to learn.
I see that you have mixed in mermaid in dev.to/r0mymendez/deploying-docs-a... 👌

All the best.

Collapse
 
picklerick63 profile image
picklerick63 •

Really interesting, thank you. I couldn't work out how bitwise operator >> was playing a part until I looked up and found that there's an operator overload at play here and this operator represents a connection aka edge between the components!

Collapse
 
ipoetdev profile image
Charles J. Fowler •

Mermaid

Collapse
 
r_elena_mendez_escobar profile image
Romina Elena Mendez Escobar •

Hello! If you check out my other article, you can see the implementation using Mermaid: dev.to/r0mymendez/deploying-docs-a...

Collapse
 
aniruddhaadak profile image
ANIRUDDHA ADAK •

Absolutely incredible! 😻.

Collapse
 
nestordgs profile image
Nestor Gutiérrez •

I like this because you can keep the diagram in the same repo, can always keep it up to date and anyone that clones the repo can have the diagram, I want to use it to diagram some workflows in my project.

Collapse
 
r_elena_mendez_escobar profile image
Romina Elena Mendez Escobar •

Yes! It's a great idea because you can also track the evolution of the architecture over time. Plus, if you ever need to reuse a previous version of the diagram for another project, it's easy to do with Git's version control.

Collapse
 
mtwn105 profile image
Amit Wani •

Next step is to make it AI generated. Based on prompt

Collapse
 
r_elena_mendez_escobar profile image
Romina Elena Mendez Escobar •

Yes! It is a good idea 💡

Collapse
 
mtwn105 profile image
Amit Wani •

I am building a chart generator similar to this based on data and prompt. MakeChart.app

Collapse
 
thatcoolguy profile image
Damilola Oshungboye •

This is great

Collapse
 
srinivasuluparanduru profile image
Srinivasulu Paranduru •

Nice one @r0mymendez

Collapse
 
biswajitfsd profile image
Biswajit Patra •

Thanks for sharing about a grate product.
I was looking for something like this.

Collapse
 
r_elena_mendez_escobar profile image
Romina Elena Mendez Escobar •

Thank you so much!

Collapse
 
dhanush9952 profile image
Dhanush •

This approach is especially useful for creating and updating architectural and flow diagrams programmatically, particularly in cloud infrastructure environments like AWS.

Collapse
 
fidelisesq profile image
Fidelis Ikoroje •

Good one. I will try this

Collapse
 
cenotep882 profile image
Ceno •

thanks for sharing

Collapse
 
creativedev profile image
Iasmim Oliveira •

really awesome! i was looking for a library like that

Collapse
 
r_elena_mendez_escobar profile image
Romina Elena Mendez Escobar •

Thank you ❤️

Collapse
 
ed_snodgrass profile image
Edward Snodgrass •

Thanks for sharing. I'm going to give this a try.

Collapse
 
rebeccapeltz profile image
Rebeccca Peltz •

Thanks for sharing!

Collapse
 
cbgk46 profile image
Gokul krishnaa •

Thanks for sharing the article! Very useful.

Collapse
 
evrtrabajo profile image
Emmanuel Valverde Ramos •

Do you know c4model.com/

Collapse
 
r_elena_mendez_escobar profile image
Romina Elena Mendez Escobar •

No, I didn't know about it, but thanks for sharing it

Collapse
 
madhurima_rawat profile image
Madhurima Rawat •

Thanks for this article! I had no idea a library like this existed—what a fantastic resource! 😊 The repository is amazing too—already starred it! ⭐ Keep up the incredible work; you're doing great! 🚀

Collapse
 
bikashdaga profile image
Bikash Daga •

Nice read!

Collapse
 
r_elena_mendez_escobar profile image
Romina Elena Mendez Escobar •

Thank you :)

Collapse
 
tu_do_f9d5110c9d19bac6c99 profile image
Tu Do •

Did this support export as SVG file?