VSCode extension — Architecture Diagrams as a Code (Diagrams Previewer)

Chia Li Yun
Javarevisited
Published in
2 min readMar 21, 2022
Photo by Nick Morrison on Unsplash

Diagrams are always helpful in bringing our messages across to the audience easily as we jot down our approach (be it writing proposals or documentations).

We would either use Draw.io/Lucidchart or any other online “whiteboard” tools to draw our diagrams manually — pulling the various shapes and then linking them up with lines/arrows. However, a major drawback about this is the poor maintainability. Should there be changes, we will need do some realignment to the whole diagram to include/remove certain components. This can be very disruptive and annoying especially when your diagram is huge.

You may have heard about Mermaid — creating diagrams and visualisations using text and code. However, Mermaid only supports flowchart, sequence diagram, gantt charts, class diagram and some other diagrams like git graph that is still in experimental mode.

Diagrams (Diagrams as a Code) provides you an alternative to drawing your cloud system architectures with simple Python code. It has support for the major cloud providers like AWS, Azure, GCP and Kubernetes. It now also supports On-Premise nodes as well as Programming Languages and Frameworks .

You will need to make sure the following items are installed as Diagrams are reliant on these components:

You may check out this Visual Studio Code extension (created by me 🤓) where you can easily preview the diagram of your code side by side — Diagrams Previewer. You may also find more detailed set up instructions under “Requirements (Set up)” section.

With this plugin, you no longer have to run the python command (e.g. python diagram.py) each time to generate the diagram.

Example of Diagrams Previewer

You may check out the sample codes provided on their official website to kickstart.

Feel free to give your review either on Visual Studio Marketplace, or you can reach out to me personally via email so that we can bring out a better product to serve you better! Thank you for reading! 🙇‍♀️

--

--

Chia Li Yun
Javarevisited

Recent graduate from university. Always excited about the new technologies and love to share with the tech community here!