Canvas DSL Example

These examples illustrate syntax and rendering patterns. Use the current Canvas policy and theme tokens for new decks; large or grouped architectures use HTML/CSS. Sample metrics are illustrative.

This example demonstrates Canvas DSL for creating animated architecture diagrams with step-by-step transitions.

When to Use Canvas DSL

Canvas DSL is ideal for simple diagrams with 4 or fewer elements and linear flow patterns. For complex multi-layer architectures, use :::html + :::css instead.

Complexity	Approach	Example
Simple (4 boxes or less)	:::canvas DSL	A -> B -> C linear flow
Medium (5+ boxes, multi-layer)	:::html + :::css	3-tier architecture
Complex (interactive)	:::html + :::script	Dashboards, simulators

Complete Example: Serverless API Pattern

---
remarp: true
version: 1
title: "Canvas DSL Demo"
author: "Cloud Skills Team"
date: 2026-03-22
lang: en

blocks:
  - name: canvas-demo
    title: "Canvas DSL Demo"
    duration: 5

theme:
  accent: "#FF9900"

transition:
  default: slide
  duration: 400
---

---
remarp: true
block: canvas-demo
---

# Canvas DSL Demo
Building animated architecture diagrams

:::notes
{timing: 30s}
Introduction to Canvas DSL capabilities.
:::

---
@type: canvas
@canvas-id: serverless-api

## Serverless API Pattern

:::canvas
# Step 1: Client entry point
box client "Client" at 30,150 size 80,40 color #232F3E step 1

# Step 2: API Gateway receives requests
icon apigw "API-Gateway" at 150,140 size 48 step 2
box api_label "API Gateway" at 125,200 size 100,30 color #FF9900 step 2

# Step 3: Lambda processes
icon lambda "Lambda" at 300,140 size 48 step 3
box compute_label "Compute" at 275,200 size 100,30 color #FF9900 step 3

# Step 4: DynamoDB stores data
icon dynamo "DynamoDB" at 450,140 size 48 step 4
box storage_label "Storage" at 425,200 size 100,30 color #3B48CC step 4

# Step 5: Arrows show data flow
arrow client -> api_label "HTTPS" step 5
arrow api_label -> compute_label "invoke" step 5
arrow compute_label -> storage_label "read/write" step 6
:::

:::notes
{timing: 3min}
{cue: demo}
Walk through each component as it appears.
- Step 1: Client makes request
- Step 2: API Gateway receives and validates
- Step 3: Lambda executes business logic
- Step 4: DynamoDB provides persistence
- Steps 5-6: Show the data flow
:::

---
@type: canvas
@canvas-id: data-pipeline

## Data Pipeline Flow

:::canvas
# Source layer
icon s3src "S3" at 50,100 size 48 step 1
box source "Source" at 30,160 size 90,30 color #3B48CC step 1

# Transform layer
icon lambda "Lambda" at 200,100 size 48 step 2
box transform "Transform" at 180,160 size 90,30 color #FF9900 step 2

# Destination layer
icon s3dst "S3" at 350,100 size 48 step 3
box dest "Destination" at 330,160 size 90,30 color #3B48CC step 3

# Flow arrows
arrow source -> transform "trigger" step 4
arrow transform -> dest "write" step 4
:::

:::notes
{timing: 2min}
Simple ETL pipeline visualization.
:::

Element Reference

Box Element

Rectangles with labels, positioned by coordinates.

:::canvas
box <id> "<label>" at <x>,<y> size <width>,<height> color <color> [step <n>]
:::

Example:

:::canvas
box user "User" at 50,100 size 80,40 color #232F3E
box web "Web App" at 200,100 size 100,50 color #FF9900 step 2
:::

Attribute	Description
id	Identifier for arrow connections; use letters, digits and underscores
label	Text displayed inside the box
at x,y	Top-left corner coordinates
size w,h	Width and height
color	Background color (hex or keyword)
step n	Appears at this step (optional)

Icon Element

AWS service icons with automatic resolution.

:::canvas
icon <id> "<service-name>" at <x>,<y> size <s> [step <n>]
:::

Example:

:::canvas
icon gw "API-Gateway" at 100,150 size 48
icon fn "Lambda" at 250,150 size 48 step 2
icon db "DynamoDB" at 400,150 size 48 step 3
:::

Supported service names:

Name	Service
Lambda	AWS Lambda
API-Gateway	Amazon API Gateway
DynamoDB	Amazon DynamoDB
S3	Amazon S3
EKS	Amazon EKS
EC2	Amazon EC2
RDS	Amazon RDS
CloudWatch	Amazon CloudWatch
SNS	Amazon SNS
SQS	Amazon SQS

Arrow Element

Connects elements with automatic orthogonal routing.

:::canvas
arrow <from-id> -> <to-id> "<label>" [color <color>] [style <dashed|dotted>] [step <n>]
:::

Example:

:::canvas
arrow api -> lambda "HTTP" step 2
arrow lambda -> api "Response" color #4CAF50 style dashed step 3
:::

Arrow routing:

• Straight: Elements on same axis
• L-shape: One side anchor, one top/bottom anchor
• Z-shape: Both same anchor type but offset

Circle Element

Circular nodes use the legacy static syntax. The parser records the label, but the current Canvas compiler does not draw it. Circles accept neither an ID nor a step attribute; use boxes for visible labels, arrow connections, or progressive reveal.

:::canvas
circle "<label>" at <x>,<y> radius <r> [color=<keyword>]
:::

Example:

:::canvas
circle "Start" at 50,100 radius 30 color=accent
circle "End" at 350,100 radius 30 color=accent
:::

Group Element

The parser accepts this legacy grouping syntax, but the current Canvas compiler does not draw its boundary. Use the HTML/CSS alternative below for visible groups.

:::canvas
group "<label>" containing <id1>, <id2>, ... [color <color>] [step <n>]
:::

Example:

:::canvas
icon apigw "API-Gateway" at 100,100 size 48
icon lambda "Lambda" at 200,100 size 48
icon dynamo "DynamoDB" at 300,100 size 48

group "AWS Cloud" containing apigw, lambda, dynamo color #232F3E step 1
:::

Step Animation Sequence

The step N attribute controls when elements appear. Elements without step appear immediately on slide entry. Steps are controlled with arrow keys.

Animation pattern:

:::canvas
# Layer 1 - appears first
icon client "CloudFront" at 50,150 size 48 step 1
box cdn "CDN" at 30,210 size 90,30 color #8E44AD step 1

# Layer 2 - appears second
icon alb "ALB" at 200,150 size 48 step 2
box lb "Load Balancer" at 175,210 size 100,30 color #FF9900 step 2

# Layer 3 - appears third
icon ecs "ECS" at 350,150 size 48 step 3
box compute "Containers" at 325,210 size 100,30 color #FF9900 step 3

# Connections - appear last
arrow cdn -> lb "HTTPS" step 4
arrow lb -> compute "forward" step 4
:::

Mermaid Integration

For simple flowcharts, use the Mermaid variant:

:::canvas mermaid
graph LR
    A[Client] --> B[API Gateway]
    B --> C[Lambda]
    C --> D[DynamoDB]
:::

Supported Mermaid types: graph, flowchart, sequenceDiagram, stateDiagram, erDiagram.

HTML Alternative for Complex Diagrams

When you have 5+ elements or multi-layer layouts, use :::html + :::css:

## Service Architecture

:::html
<div class="flow-h">
  <div class="flow-group bg-blue fragment" data-fragment-index="1">
    <div class="flow-group-label">Ingestion</div>
    <div class="icon-item">
      <img src="../common/aws-icons/services/Arch_Amazon-Kinesis_48.svg">
      <span>Kinesis</span>
    </div>
  </div>
  <div class="flow-arrow">-></div>
  <div class="flow-group bg-orange fragment" data-fragment-index="2">
    <div class="flow-group-label">Processing</div>
    <div class="flow-box">Lambda</div>
    <div class="flow-box">Step Functions</div>
  </div>
  <div class="flow-arrow">-></div>
  <div class="flow-group bg-green fragment" data-fragment-index="3">
    <div class="flow-group-label">Storage</div>
    <div class="flow-box">S3</div>
    <div class="flow-box">DynamoDB</div>
  </div>
</div>
:::

CSS utility classes (from theme.css):

• flow-h / flow-v: Horizontal/vertical flow container
• flow-group: Element group with background
• flow-box, flow-arrow, icon-item: Box, arrow, icon components
• bg-blue, bg-orange, bg-green: Color utilities
• class="fragment" with data-fragment-index="N": Sequential reveal (like step N)

Best Practices

1. Count elements first - Use canvas only for 4 or fewer boxes/icons
2. Use consistent step numbering - Group related elements in same step
3. Add speaker notes - Include :::notes with timing and cues
4. Test arrow routing - Complex layouts may need manual coordinate adjustment
5. Prefer icons over boxes - AWS icons improve visual recognition