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.
Click here to experience Cloud Diagrams live in a sample GitPitch slide deck.
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:
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:
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:
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.
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:
Click here to view this slide with a live GitPitch presentation.
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.