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 Mendez 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
 
r0mymendez profile image
Romina Mendez

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
 
r0mymendez profile image
Romina Mendez

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

Collapse
 
mtwn105 profile image
Amit Wani

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

Collapse
 
r0mymendez profile image
Romina Mendez

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
 
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
 
r0mymendez profile image
Romina Mendez

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
 
srinivasuluparanduru profile image
Srinivasulu Paranduru

Nice one @r0mymendez

Collapse
 
cenotep882 profile image
Ceno

thanks for sharing

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
 
biswajitfsd profile image
Biswajit Patra

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

Collapse
 
r0mymendez profile image
Romina Mendez

Thank you so much!

Collapse
 
thatcoolguy profile image
dami

This is great

Collapse
 
aniruddhaadak profile image
ANIRUDDHA ADAK

Absolutely incredible! 😻.

Collapse
 
evrtrabajo profile image
Emmanuel Valverde Ramos

Do you know c4model.com/

Collapse
 
r0mymendez profile image
Romina Mendez

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

Collapse
 
cbgk46 profile image
Gokul krishnaa

Thanks for sharing the article! Very useful.

Collapse
 
rebeccapeltz profile image
Rebeccca Peltz

Thanks for sharing!

Collapse
 
ed_snodgrass profile image
Edward Snodgrass

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

Collapse
 
fidelisesq profile image
Fidelis Ikoroje

Good one. I will try this

Collapse
 
prajjuks profile image
Prajwal KS

Nice project

Collapse
 
bikashdaga profile image
Bikash Daga

Nice read!

Collapse
 
r0mymendez profile image
Romina Mendez

Thank you :)

Collapse
 
tu_do_f9d5110c9d19bac6c99 profile image
Tu Do

Did this support export as SVG file?