I’m trying to create an animated diagram using the D2 language based on the documentation: https://d2lang.com/blog/animation
Here is the D2 source I am using(found it git: https://github.com/terrastruct/d2-docs/blob/master/static/bespoke-d2/animated.d2)
direction: right
title: {
label: Normal deployment
near: bottom-center
shape: text
style.font-size: 40
style.underline: true
}
local: {
code: {
icon: https://icons.terrastruct.com/dev/go.svg
}
}
local.code -> github.dev: commit
github: {
icon: https://icons.terrastruct.com/dev/github.svg
dev
master: {
workflows
}
dev -> master.workflows: merge trigger
}
github.master.workflows -> aws.builders: upload and run
aws: {
builders -> s3: upload binaries
ec2 <- s3: pull binaries
builders: {
icon: https://icons.terrastruct.com/aws/Developer%20Tools/AWS-CodeBuild_light-bg.svg
}
s3: {
icon: https://icons.terrastruct.com/aws/Storage/Amazon-S3-Glacier_light-bg.svg
}
ec2: {
icon: https://icons.terrastruct.com/aws/_Group%20Icons/EC2-instance-container_light-bg.svg
}
}
local.code -> aws.ec2: {
style.opacity: 0.0
}
scenarios: {
hotfix: {
title.label: Hotfix deployment
(local.code -> github.dev)[0].style: {
stroke: "#ca052b"
opacity: 0.1
}
github: {
dev: {
style.opacity: 0.1
}
master: {
workflows: {
style.opacity: 0.1
}
style.opacity: 0.1
}
(dev -> master.workflows)[0].style.opacity: 0.1
style.opacity: 0.1
style.fill: "#ca052b"
}
(github.master.workflows -> aws.builders)[0].style.opacity: 0.1
(local.code -> aws.ec2)[0]: {
style.opacity: 1
style.stroke-dash: 5
style.stroke: "#167c3c"
}
}
}I am running the command d2 -w input.d2 out.svg, which creates a directory named out with two SVG files: hotfix.svg and index.svg. The d2 server serves index.svg by default.
My question is: how can I generate and view the animation that switches between the normal deployment and hotfix deployment scenarios?
I have tried to follow the documentation but am not sure how to correctly set up and run the animation.