Introduction to Diagram As Code!!!

Introduction to Diagram As Code!!!

ยท

4 min read

Welcome to Coding Adda

In this blog, we are going to talk about what is something called a Diagram as code. This might be something you might think "Oh!!, How come with writing some lines of code, we can create an entire diagram ??". Buddy, you are living in the ERA OF AI & DEVELOPMENT, anything is possible.

This is something that most tech enthusiasts love to do if they love to code. Consider the following diagram of the Joomla Architecture:

Now what if here there were no diagrams and I would have explained the whole scenario verbally without any reference or any diagrammatic explanation? You wouldn't be able to understand it right? You would think what am I saying? In our schools too, we were asked to draw a diagram for better understanding.


What is Diagram as Code?

Diagrams are a powerful way to visualize and communicate complex systems and ideas. Whether it's an architecture diagram, a network diagram, or a flowchart, a well-designed diagram can help you better understand and explain how things work. However, creating and managing diagrams can be a time-consuming and error-prone process. That's where Diagram as Code comes in.

Diagram as Code (DAC) is an approach to create and manage diagrams using code instead of manual drawing tools. With DAC, you define your diagrams as code, which can be versioned, tested, and shared like any other code. This approach can improve collaboration, reduce errors, and make it easier to keep diagrams up-to-date.


How to GET STARTED?

Follow these steps to get started with the installation:

  • Step 1: It requires Python 3.6 or higher, check your Python version first.

  • Step 2: It uses Graphviz to render the diagram, so you need to install Graphviz to use diagrams. After installing Graphviz (or already have it), install the diagrams. After installing it, make sure to add the

    • \bin path to the user variables

    • \bin\dot.exe path to the system variables

  • Step 3: Install diagrams using the following command

      # using pip (pip3)
      $ pip install diagrams
    
      # using pipenv
      $ pipenv install diagrams
    
  • Step 4: After completing this step, create a simple diagram.py file and enter the following code :

      # diagram.py
      from diagrams import Diagram
      from diagrams.aws.compute import EC2
      from diagrams.aws.database import RDS
      from diagrams.aws.network import ELB
    
      with Diagram("Web Service", show=False):
          ELB("lb") >> EC2("web") >> RDS("userdb")
    

    Code Explanation:

    This is how the following code works:

    • First we import Diagram class from diagrams module

    • Understand that DAC provides various subcategorical modules for everything you need, let it be from programming languages to flowchart objects to AWS, IBM, DigitalOcean.

    • These objects are known as Nodes. A node is a second object representing a node or system component. A node object consists of three parts: provider, resource type, and name.

    • So to access any particular category of a provider, we just get into the object as we usually do by using the (.) operator. Here we want to access the compute, network and database from AWS so we write the following code

        from diagrams.aws.compute import EC2
        from diagrams.aws.database import RDS
        from diagrams.aws.network import ELB
      
    • Now each category consists of various other subcategories, so we just import them. For eg, we want to import EC2 and it is under the compute category, we simply write "from diagrams.aws.compute import EC2".

    •       ELB("lb") >> EC2("web") >> RDS("userdb")
      
    • To write a text under a particular subcategory we write it as subcategory("name"). The >> operator is used to represent the arrow which we usually represent in a flowchart.

  • Step 5: Run the code using the following code:

      python diagram.py
    
  • Step 6: An image file will be created inside that folder (.png) with the file name which you gave inside { With Diagrams("") } function. So the final output will look as follows:


Let's create another flowchart of simple addition of 2 numbers. The code will look like this:

from diagrams import Diagram
from diagrams.programming.flowchart import StartEnd
from diagrams.programming.flowchart import InputOutput
from diagrams.programming.flowchart import Action

with Diagram("Addition", show=False):
    StartEnd("Start") >> InputOutput("Num1 Num2") >> Action("Sum") >> InputOutput("Print Sum") >> StartEnd("End")

Output will be as follows:

To get more clear idea on the implementation, you can checkout our video on DAC which is live on Youtube.

Isn't it amazing!!!! Now you can create Flowcharts / Diagrams by simply writing some lines of code.

In this blog, we have seen How to start with Diagram as Code and implemented a few simple diagrams. Hope you guys liked it, See you in the next one!!!

Adios Amigos ๐Ÿ‘‹๐Ÿ‘‹

Did you find this article valuable?

Support Coding Adda by becoming a sponsor. Any amount is appreciated!

ย