Using ChatGPT-4 to Draw D2 Container Diagrsms

Declarative notations for generating diagrams represent a significant advancement in the field of visual representation and data modeling. Unlike traditional methods, where diagrams are manually drawn, declarative notations allow users to describe what they want in their diagrams using text-based language. This approach significantly simplifies the process of creating complex diagrams.

Declarative notation Tools and Libraries

Graphviz, Mermaid.js, and PlantUML are pivotal tools in the realm of declarative diagramming, transforming text-based descriptions into visual diagrams. Graphviz excels in data and workflow visualization, Mermaid.js integrates with web technologies for creating various charts, and PlantUML is renowned for its UML diagrams in software engineering. These tools demonstrate the power of text-to-diagram conversion, paving the way for D2, the focus of this article, which stands as an advanced tool in this domain, offering an innovative approach to diagram scripting by turning textual descriptions into detailed diagrams.

D2: Declarative Diagramming

D2 stands for Declarative Diagramming, a more recent advancement in the field of diagram scripting languages. It takes the concept of declarative notation a step further by focusing on the ease of scripting complex diagrams. D2 allows users to describe in a text-based language what they want their diagram to represent, and then it automatically generates the corresponding visual representation. This approach is particularly advantageous in fields where complex data needs to be visualized clearly and efficiently, such as in data analysis, system architecture design, and educational purposes.

In developing D2, design decisions prioritize readability over prototyping speed, with an emphasis on creating a programmer-friendly language that balances ease of use, speed, and clarity. These choices, reflective of modern programming and configuration languages, aim to avoid overly terse syntax, ensuring D2 evolves as a readable and consistent tool for diagram scripting. The following section will just show one single example, I used for my architecture diagrams.

D2 Containers Diagrams

AWS_Architecture: {
  label: "AWS Architecture"
  shape: rectangle

  Lambda_Service: {
    label: "AWS Lambda"
    shape: rectangle
  }

  RDS_Service: {
    label: "AWS RDS"
    shape: cylinder
  }

  API_Gateway: {
    label: "API Gateway"
    shape: rectangle
  }

  S3_Storage: {
    label: "S3 Bucket"
    shape: rectangle
  }

  VPC: {
    label: "VPC"
    shape: rectangle
  }

  Lambda_Service -> API_Gateway: "Triggers"
  API_Gateway -> S3_Storage: "Stores Data"
  Lambda_Service -> RDS_Service: "Connects to"
  VPC -> Lambda_Service: "Hosts"
  VPC -> RDS_Service: "Hosts"
}

AWS_Architecture.direction: down

In this diagram:

• “AWS Architecture” is the main container.
• “Lambda_Service”, “RDS_Service”, “API_Gateway”, “S3_Storage”, and “VPC” are sub-containers representing different components of the architecture.
• Arrows show the interactions, such as AWS Lambda triggering API Gateway, and API Gateway storing data in S3. AWS Lambda and RDS are both hosted within the VPC. AWS Lambda connects to AWS RDS for database operations.

To generate the equivalent diagram, you can do either of the following:

1. Go to their website https://play.d2lang.com/ and paste the notation, chose a layout engine, and press compile and diagram will get generated and you can download it.
2. Install the D2 local, you can find the instruction in my github repo https://github.com/omkamal/diagramsascode/blob/main/install_guide.adoc

The following diagram is the outcome of the notation above.

AWS Architecture D2 Container Diagrams Sample

D2 Container GPT Bot

Recently, I embarked on an exciting experiment involving the creation of a custom GPT bot, leveraging OpenAI’s innovative My GPT feature. This helpful tool (https://chat.openai.com/g/g-9KX7MZMS9-d2-container) allows users to input various forms of content, such as code snippets or entire articles, and the bot intelligently generates corresponding D2 Container diagrams. These diagrams can be easily transferred to the d2lang playground, where they are rendered in multiple formats like PNG or SVG. Additionally, there’s the option to utilize the d2 compiler for local diagram generation, offering a seamless integration between the AI’s output and my own development environment. This capability not only enhances the visualization of complex concepts but also streamlines the process of turning textual data into detailed, interpretable diagrams.

This process is remarkably user-friendly: one simply has to copy and paste the code directly into the bot. The AI then attempts to create a visual representation of this code in the form of a conceptual diagram. It’s important to note that while the bot is quite efficient, it’s not flawless and may occasionally produce errors in the diagrams. However, these can be manually corrected with relative ease.

This feature is especially beneficial for visual learners, as it converts complex code or text into easily understandable diagrams. It’s not just limited to code; the bot can also process written articles or even abstract ideas, mapping them out visually. This tool is an invaluable resource for anyone who finds it easier to comprehend and retain information through visual means, aiding in the understanding of intricate concepts, whether they’re code-based or theoretical. It’s a step forward in making learning and understanding more accessible and tailored to different learning styles.

D2 Container Diagram Notation for a typical REST API

Here is what I needed to create a fast diagram for a REST API application that is build over AWS Cloud.

Draw a sample architecture diagram for a typical REST API application, 
implemented in AWS, all shapes are rectangle except for the servers 
use the following shape url

https://icons.terrastruct.com/tech/022-server.svg

The following was the bot generated notation.

direction: right

rest_api_application: {
 label: "REST API Application"
 shape: rectangle

 user_interface: {
  label: "User Interface"
  shape: rectangle
 }

 api_gateway: {
  label: "API Gateway"
  shape: rectangle
 }

 load_balancer: {
  label: "Load Balancer"
  shape: rectangle
 }

 web_servers: {
  label: "Web Servers"
  shape: image
  icon: https://icons.terrastruct.com/tech/022-server.svg
 }

 application_logic: {
  label: "Application Logic"
  shape: rectangle
 }

 database: {
  label: "Database"
  shape: rectangle
 }

 external_services: {
  label: "External Services"
  shape: rectangle
 }

 user_interface -> api_gateway
 api_gateway -> load_balancer
 load_balancer -> web_servers
 web_servers -> application_logic
 application_logic -> database
 application_logic -> external_services
}

The generated diagram

The boot is available for free on my the following link, but it requires to have a ChatGPT Plus Subscription.

For more ideas on generating diagrams using notations and taking advantage of ChatGPT check my book “Diagrams as Code” at Amazon.