From Code to Canvas — Architectural Diagrams Made Easy with AI Magic Without the Drag-and-Drop Hassle

Unlock Effortless Architectural Diagrams with Code and AI

Are you fed up with the limitations of drag-and-drop tools for creating architectural diagrams? Embrace Diagram as Code and enjoy a seamless, efficient experience! This approach lets you craft diagrams with the precision of code, manage them with version control, and generate them effortlessly.

Explore how Diagram as Code, paired with AI tools like ChatGPT or other LLMs, can revolutionize your workflow:

1. AI-Powered Coding: Use LLMs to generate your diagram code, saving time and reducing errors.
2. Reusable Components: Create code snippets that you can easily recycle for future projects.
3. Version Control Excellence: Track changes, revert to previous versions, and collaborate efficiently using Git.
4. Automation: Integrate CI/CD pipelines to keep your diagrams up-to-date automatically.
5. Customization: Tailor your diagrams to match your project’s unique vision.

Join us as we guide you through:

• Setting up your development environment with ChatGPT and Diagrams Python.
• Writing code to define architectural elements and relationships.
• Utilizing AI for code generation and troubleshooting.
• Implementing version control for smooth collaboration.
• Automating diagram generation with CI/CD.
• Customizing your diagrams for the perfect look.

Forget the cumbersome drag-and-drop tools! This video will show you how to:

• Create diagrams effortlessly.
• Collaborate seamlessly with version control.
• Design beautiful, customized diagrams.

Ready to bring your architectural visions to life with code? Hit play and dive in!

New Version for Author:

Streamline Your Architectural Diagrams with AI and Code

Frustrated with traditional drag-and-drop tools for your architectural diagrams? Discover Diagram as Code, the smart solution for creating precise and manageable diagrams with ease!

This method lets you write your diagrams in code, enabling you to:

• Generate Code Effortlessly with AI: Let AI tools like ChatGPT handle the coding for you.
• Reuse and Save Time: Recycle code components for future projects effortlessly.
• Master Version Control: Track changes and collaborate seamlessly using Git.
• Automate with CI/CD: Ensure your diagrams are always current with automated pipelines.
• Customize to Perfection: Adjust styles and elements to match your vision exactly.

In this guide, we’ll cover:

• Setting up your environment with ChatGPT and Diagrams Python.
• Writing and managing code for your diagrams.
• Leveraging AI for efficient code creation.
• Using Git for version control and collaboration.
• Automating your workflow with CI/CD.
• Customizing your diagrams to meet your needs.

Ditch the drag-and-drop struggle! This video is your path to:

• Effortless diagram creation.
• Smooth collaboration and version control.
• Stunning, customized diagrams.

Ready to code your architectural ideas? Let’s get started!

Pre-Requiste:

For Mac

1. Install the Diagrams package using PIP

pip install diagrams

2. Install Graphviz (to render the diagrams) using BREW

brew install graphviz

Step 1: Request AI Assistance for Diagram Code Use ChatGPT to generate the code for your architecture diagram by:

• Copying and pasting your solution details
• Providing a brief description

Try the prompt: “Generate the architecture code for <your solution details> using the diagrams Python package (https://github.com/mingrammer/diagrams)."

Step 2: Validate and Amend AI-Generated Code Examine the code for any errors and correct them. For example, I faced these issues:

Create a main.py file with the below code.

The AI imported Lambda from diagrams.aws.integration instead of diagrams.aws.compute.

Incorrect:

from diagrams import Diagram, Cluster, Edge
from diagrams.aws.network import VPC, InternetGateway, PrivateSubnet, PublicSubnet
from diagrams.aws.compute import EC2
from diagrams.aws.storage import S3
from diagrams.aws.database import RDS
from diagrams.aws.analytics import Redshift
from diagrams.aws.integration import Lambda

with Diagram("AWS Architecture", show=True, direction="LR", outformat="png"):
    # Top-level cluster representing the VPC
    with Cluster("VPC"):
        # Internet Gateway
        igw = InternetGateway("Internet Gateway")
        
        # Public Subnet
        with Cluster("Public Subnet"):
            ec2_public = EC2("EC2 Public")
        
        # Private Subnet
        with Cluster("Private Subnet"):
            ec2_private = EC2("EC2 Private")
            rds_instance = RDS("RDS")
            redshift_cluster = Redshift("Redshift")
            lambda_function = Lambda("Lambda")
        
        # Connectivity within the VPC
        ec2_public >> Edge(label="accesses") >> ec2_private
        ec2_private >> Edge(label="connects to") >> rds_instance
        ec2_private >> Edge(label="queries") >> redshift_cluster
        lambda_function >> Edge(label="invokes") >> ec2_private
    
    # S3 bucket outside the VPC
    s3_bucket = S3("S3 Bucket")
    s3_bucket >> Edge(label="stores data for") >> redshift_cluster

Corrected:

from diagrams import Diagram, Cluster, Edge
from diagrams.aws.network import VPC, InternetGateway, PrivateSubnet, PublicSubnet
from diagrams.aws.compute import EC2,Lambda
from diagrams.aws.storage import S3
from diagrams.aws.database import RDS
from diagrams.aws.analytics import Redshift

with Diagram("AWS Architecture", show=True, direction="LR", outformat="png"):
    # Top-level cluster representing the VPC
    with Cluster("VPC"):
        # Internet Gateway
        igw = InternetGateway("Internet Gateway")
        
        # Public Subnet
        with Cluster("Public Subnet"):
            ec2_public = EC2("EC2 Public")
        
        # Private Subnet
        with Cluster("Private Subnet"):
            ec2_private = EC2("EC2 Private")
            rds_instance = RDS("RDS")
            redshift_cluster = Redshift("Redshift")
            lambda_function = Lambda("Lambda")
        
        # Connectivity within the VPC
        ec2_public >> Edge(label="accesses") >> ec2_private
        ec2_private >> Edge(label="connects to") >> rds_instance
        ec2_private >> Edge(label="queries") >> redshift_cluster
        lambda_function >> Edge(label="invokes") >> ec2_private
    
    # S3 bucket outside the VPC
    s3_bucket = S3("S3 Bucket")
    s3_bucket >> Edge(label="stores data for") >> redshift_cluster

In the above code
Diagram — The highest level container of your diagram.

with Diagram("AWS Architecture", show=True, direction="LR", outformat="png"):

• “AWS Architecture”: Defines the filename for the generated image.
• direction: Sets the layout direction from Left to Right (LR). Alternatives are Right to Left (RL), Top to Bottom (TB), and Bottom to Top (BT).
• outformat: Specifies the output format, including “png”, “jpg”, “svg”, “pdf”, and “dot”.

Cluster — A nested container for grouping related components.

with Cluster("VPC"):
    ...
    with Cluster("Public Subnet"):
        ec2_public = EC2("EC2 Public")
    with Cluster("Private Subnet"):
        ec2_private = EC2("EC2 Private")
        rds_instance = RDS("RDS")
        redshift_cluster = Redshift("Redshift")
        lambda_function = Lambda("Lambda")

• “VPC”: Represents the Virtual Private Cloud cluster.
• “Public Subnet”: A sub-cluster for public-facing resources.
• “Private Subnet”: A sub-cluster for private resources.
• EC2(“EC2 Public”): An EC2 instance within the public subnet.
• EC2(“EC2 Private”), RDS(“RDS”), Redshift(“Redshift”), Lambda(“Lambda”): Components within the private subnet.

Edge — Defines the connections between components using directional arrows.

ec2_public >> Edge(label="accesses") >> ec2_private
ec2_private >> Edge(label="connects to") >> rds_instance
ec2_private >> Edge(label="queries") >> redshift_cluster
lambda_function >> Edge(label="invokes") >> ec2_private
s3_bucket >> Edge(label="stores data for") >> redshift_cluster

• >>: Right-pointing arrow indicating the flow of interaction.
• ec2_public >> Edge(label=”accesses”) >> ec2_private: The public EC2 instance accesses the private EC2 instance.
• ec2_private >> Edge(label=”connects to”) >> rds_instance: The private EC2 instance connects to the RDS instance.
• ec2_private >> Edge(label=”queries”) >> redshift_cluster: The private EC2 instance queries the Redshift cluster.
• lambda_function >> Edge(label=”invokes”) >> ec2_private: The Lambda function invokes the private EC2 instance.
• s3_bucket >> Edge(label=”stores data for”) >> redshift_cluster: The S3 bucket stores data for the Redshift cluster.

This diagram depicts a VPC with public and private subnets, featuring AWS resources such as EC2 instances, RDS, Redshift, and Lambda. The connections illustrate the interactions between these resources, with an external S3 bucket interacting with the Redshift cluster.

Refer to the below attached github link diagrams package documentation to verify the correct services.

GitHub - mingrammer/diagrams: :art: Diagram as Code for prototyping cloud system architectures

Step 3: Execute the Program Run your python script using below command:

python main.py

Output:

will be saved in aws aws_architecture.png

Note:

1. While I used ChatGPT in this example, you can also utilize other GPT models and LLMs.
2. This was tested on a Mac machine, but it should work on Windows, Linux, and other operating systems as well.
3. I employed AWS Stack, but the Diagrams library can be used with other cloud platforms too. See the attached GitHub links for more information.
4. I used Python, but there are repositories for other programming languages on GitHub as well.

Moving Forward

Improving the process step-by-step gives faster results. If you find a useful solution, please share it in your response.

Another challenge is keeping this information up-to-date. If you see outdated info, list the old description and what the new one should be. This will help me track changes.

If you know a better way to do things, let me know too. Keep it simple. I want to focus on the important stuff and apply the 80/20 rule: cover the main points without every detail.

Cheers and happy coding….!!!!