Canvas DSL Example

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
`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 for state diagrams or process flows.

:::canvas
circle <id> "<label>" at <x>,<y> radius <r> color <color> [step <n>]
:::

Example:

:::canvas
circle start "Start" at 50,100 radius 30 color #4CAF50
circle end "End" at 350,100 radius 30 color #f44336 step 3
:::

Group Element

Visual boundary around multiple elements.

:::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 step 4
arrow lb -> compute 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" 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" 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" 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
data-fragment-index="N": Sequential reveal (like step N)

Best Practices

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

When to Use Canvas DSL​

Complete Example: Serverless API Pattern​

Element Reference​

Box Element​

Icon Element​

Arrow Element​

Circle Element​

Group Element​

Step Animation Sequence​

Mermaid Integration​

HTML Alternative for Complex Diagrams​

Best Practices​

When to Use Canvas DSL

Complete Example: Serverless API Pattern

Element Reference

Box Element

Icon Element

Arrow Element

Circle Element

Group Element

Step Animation Sequence

Mermaid Integration

HTML Alternative for Complex Diagrams

Best Practices