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 powered by Diagrams-As-Code on any slide.

ClOUD DIAGRAMS

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

Cloud Widget Usage Conventions

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.

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 valid 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[props, style...](path/to/code.py)

The props value accepts a comma-separated list of valid image manipulation properties . The CSS style… list can be used to activate custom styles or build-in styles on the rendered image.

Cloud Diagrams Image Manipulations

The full set of GitPitch supported inline image manipulation properties can be activated on your Cloud diagrams. For example, the following markdown snippet:

@snap[west span-50 text-center]
@cloud[width=500](src/cloud/demo.py)
@snapend

@snap[east span-50 text-center]
@cloud[width=300, skewx=-30, skewy=15, filter=invert](src/cloud/demo.py)
@snapend

Results in the rendering of the following slide:

CLOUD DIAGRAM IMAGE MANIPULATIONS

These manipulations include image sizing, opacity controls, filters, transformations, behaviors, and more. For details see the Inline Image Manipulations Guide .

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.

More Examples in the Diagrams-As-Code Docs

The @cloud widget renders cloud system architecture diagrams as pixel-perfect SVG images. The rendering engine has built-in support for a wide range of cloud components. You can learn further details and see numerous examples of each diagram type in the official Diagrams-As-Code guides: