Code Drawing Widget

Designing images with a few lines of code is sometimes preferable as compared to using various design tools. You can use the ‘Code Drawing widget’ to create system architecture diagrams.

We'll cover the following

This widget uses “Diagram,” a Python library, which allows us to create system architecture diagrams with just a few lines of code. It supports AWS, Azure, GCP, Kubernetes, Alibaba Cloud, and Oracle Cloud. The images can be generated in PNG, JPG, SVG, and PDF format. For custom styling and more details, please refer to the official documentation.

This is what it looks like:

Press + to interact
Edit mode
Edit mode

You can edit the code to create your diagram however you see fit. Click the “Run” button to generate the diagram.

Learners won’t see the code; the diagram will be rendered directly.

Example

Press + to interact
from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB
graph_attr = {
  "fontsize": "0",
  "bgcolor": "yellow",
  "size": "8"
}
with Diagram("Grouped Workers", show=False, graph_attr=graph_attr, direction="TB"):
  ELB("lb") >> [EC2("worker1"),
                EC2("worker2"),
                EC2("worker3"),
                EC2("worker4"),
                EC2("worker5")] >> RDS("events")

The above Python code will render the following diagram.

code_drawing

  • Line 6-10: Custom styling can be used by passing the graph_attr to the Diagram function. It takes the object in string or bytes form to apply changes on the graph only (not nodes).