Cloud Diagram Widget


Activate a GitPitch Paid Plan to unlock Cloud Diagram Widget support.

This guide describes the @cloud widget. This widget is a simple markdown syntax that can be used to create and render sophisticated cloud system architecture diagrams on any slide.

ClOUD DIAGRAMS

Click here to experience Cloud Diagrams live in a sample GitPitch slide deck.

Cloud System Architecture Diagrams

The @cloud widget renders cloud system architecture diagrams as pixel-perfect SVG images. The rendering engine has built-in support for the following cloud system components:

  • AWS
  • Azure
  • GCP
  • Kubernetes
  • Alibaba Cloud
  • Oracle Cloud
  • On-Premises Nodes
  • And much more…

Each cloud system archtecture diagram is defined using simple Python syntax within a dedicated source code file. The exact syntax is defined by the Diagrams As Code project.

Cloud Widget Usage Conventions

The following GitPitch conventions are required to use the @cloud widget:

  1. Diagram descriptions must be defined in a file within your local repository.
  2. Diagram description files must have a .py extension.
  3. Diagram descriptions must adhere to Diagrams As Code syntax.

If you follow these conventions you can then use the following @cloud widget markdown syntax to render a cloud system architecture diagram on any slide:


@cloud[style...](path/to/code.py)

The CSS style… list can make use of any custom styles you define. It can also make use of the built-in span styles giving you control over the rendering width and height of your cloud system architecture diagrams.

Note, if you are developing your slide decks using GitPitch Desktop then be aware of the current caching policy for your cloud system architecture diagrams.

Learn By Example - AWS Event Processing

This Python code defines a sample AWS Event Processing architecture:

from diagrams import Cluster, Diagram
from diagrams.aws.compute import ECS, EKS, Lambda
from diagrams.aws.database import Redshift
from diagrams.aws.integration import SQS
from diagrams.aws.storage import S3

with Diagram("Event Processing", show=False):
    source = EKS("k8s source")

    with Cluster("Event Flows"):
        with Cluster("Event Workers"):
            workers = [ECS("worker1"),
                       ECS("worker2"),
                       ECS("worker3")]

        queue = SQS("event queue")

        with Cluster("Processing"):
            handlers = [Lambda("proc1"),
                        Lambda("proc2"),
                        Lambda("proc3")]

    store = S3("events store")
    dw = Redshift("analytics")

    source >> workers >> queue >> handlers
    handlers >> store
    handlers >> dw

Assuming this sample Python code block is defined within src/aws-event-processing.py it can be used by the @cloud widget within your PITCHME.md markdown as follows:

---

@snap[west span-70]
@cloud[shadow](src/aws-event-processing.py)
@snapend

@snap[east span-25 text-center]
#### **AWS** Event Processing
@snapend

Results in the rendering of the following slide:

AWS EVENT PROCESSING

Click here to view this slide with a live GitPitch presentation.

Cloud Diagrams GitPitch Caching Policy

Python code diagram descriptions maintained within local repository files are converted to SVG images at runtime. This means whether you are developing or sharing a slide deck there can be a small rendering overhead due to the time taken to convert the python code to an image.

To ensure this processing overhead does not unduly interfere with smooth development workflows, in particular within GitPitch Desktop , each generated SVG image is cached for up to 60 seconds.

This means if you make changes to any Python code file you may not see those changes reflected on your slides for up to 60 seconds.