DEV Community

Cover image for Infrastructure diagrams as code

Infrastructure diagrams as code

Raoul Meyer on February 18, 2019

Creating a diagram of your infrastructure is quite a tedious job. I noticed that when, for example, someone new wants to understand our architectur...
Collapse
 
petertorres profile image
Pete Torres

GitHub understood this need, too. Mermaid is now supported in markdown. However, missing are the nice icons and large collection of node types that your solution provides.

github.blog/2022-02-14-include-dia...

Collapse
 
cjbrooks12 profile image
Casey Brooks

Very nice! I'd be interested to hear more about how it works under-the-hood to draw those diagrams.

On another note, have you heard of Mermaid.js or PlantUML? They are both programming-ish languages for drawing diagrams like these, you might find them very useful for infrastructure documentation!

Collapse
 
raoulmeyer profile image
Raoul Meyer

Thanks! For now it's a very thin wrapper around the network module of vis.js. Vis.js does all the hard work here, I mostly configured it with all the right settings that make sense in this case (and added some icons).

Thanks for mentioning those! I've heard of both but haven't given them an extensive look yet. I do like the idea of the documentation being actual code, but some specialized markup like these libraries use of course also has a lot of advantages.

Collapse
 
petertorres profile image
Pete Torres

Well done and thank you for writing this post! I realize tools such as Terraform provide the ability to generate GraphViz dot output, but it doesn't look pretty for complicated deployments. blast-radius improves on this, however I really appreciate how your solution provides a visual story similar to LucidChart diagrams.

Collapse
 
raoulmeyer profile image
Raoul Meyer

I hadn't heard of the tools you mention, they look very useful to me, maybe for a different use case though. Glad you like it!

Collapse
 
mpermar profile image
Martín Pérez

Well done Raoul. I believe if you now get rid of the library itself you might actually be into something!

I mean, you could use some markup language to define the diagram, or just invent the syntax and then auto-generate the code as it seems it is going to be pretty repetitive.

Collapse
 
nuculabs_dev profile image
Nucu Labs

Interesting post, I'm gonna stick with Visio tho.

Collapse
 
neomaxzero profile image
Maximiliano

Nice! This looks quite interesting.

Collapse
 
raoulmeyer profile image
Raoul Meyer

No it's not, but for now it mostly contains AWS icons. You can add any icons you want though! You can read how to do that in the documentation on Github.

Collapse
 
antirek profile image
Dmitriev Sergey

I was inspired your diagrams, really. And write my own diagram-as-code solution: github.com/antirek/network-diagram based on cytoscape.js diagram ;)

Collapse
 
andy9775 profile image
Andy

If pulumi supported something like this it would be super cool.

Collapse
 
raoulmeyer profile image
Raoul Meyer

Yes I was actually thinking about it, it would be quite easy to write something that converts whatever infrastructure as code to a diagram like this.

I hadn't heard of pulumi before but at a first glance it looks awesome.

Collapse
 
shreyasht profile image
Shreyash

This is awesome! Is there a way I can contribute?

Collapse
 
raoulmeyer profile image
Raoul Meyer

Thanks!

Of course, you can contribute by creating a pull request in github. If you want to discuss first how to approach things, you can create an issue instead. Very much appreciated!

Collapse
 
srshifu profile image
Ildar Sharafeev

Great article! There is also another way around - create infrastructure config from diagram: dev.to/srshifu/build-your-infrastr...

Collapse
 
raoulmeyer profile image
Raoul Meyer

That's very encouraging to hear, thanks!