diff --git a/docs/examples/dagre.md b/docs/examples/dagre.md
index aa75f09f..39bf7cd0 100644
--- a/docs/examples/dagre.md
+++ b/docs/examples/dagre.md
@@ -39,11 +39,11 @@ See [/tour/dagre](/tour/dagre/).
{
name: 'Golang Queue',
svgContent: require('@site/static/img/examples/example-golang-queue-dagre.svg2'),
- code: "direction: right\n\nclasses: {\n base: {\n style: {\n bold: true\n font-size: 28\n }\n }\n\n person: {\n shape: person\n }\n\n animated: {\n style: {\n animated: true\n }\n }\n\n multiple: {\n style: {\n multiple: true\n }\n }\n\n enqueue: {\n label: Enqueue Task\n }\n\n dispatch: {\n label: Dispatch Task\n }\n\n library: {\n style: {\n bold: true\n font-size: 32\n fill: PapayaWhip\n fill-pattern: grain\n border-radius: 8\n font: mono\n }\n }\n\n task: {\n style: {\n bold: true\n font-size: 32\n }\n }\n}\n\nuser01: {\n label: User01\n class: [base; person; multiple]\n}\n\nuser02: {\n label: User02\n class: [base; person; multiple]\n}\n\nuser03: {\n label: User03\n class: [base; person; multiple]\n}\n\nuser01 -> container.task01: {\n label: Create Task\n class: [base; animated]\n}\nuser02 -> container.task02: {\n label: Create Task\n class: [base; animated]\n}\nuser03 -> container.task03: {\n label: Create Task\n class: [base; animated]\n}\n\ncontainer: Application {\n direction: right\n style: {\n bold: true\n font-size: 28\n }\n icon: https://icons.terrastruct.com/dev%2Fgo.svg\n\n task01: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task; multiple]\n }\n\n task02: {\n icon: https://icons.terrastruct.com/essentials%2F095-download.svg\n class: [task; multiple]\n }\n\n task03: {\n icon: https://icons.terrastruct.com/essentials%2F195-attachment.svg\n class: [task; multiple]\n }\n\n queue: {\n label: Queue Library\n icon: https://icons.terrastruct.com/dev%2Fgo.svg\n style: {\n bold: true\n font-size: 32\n fill: honeydew\n }\n\n producer: {\n label: Producer\n class: library\n }\n\n consumer: {\n label: Consumer\n class: library\n }\n\n database: {\n label: Ring\\nBuffer\n shape: cylinder\n style: {\n bold: true\n font-size: 32\n fill-pattern: lines\n font: mono\n }\n }\n\n producer -> database\n database -> consumer\n }\n\n worker01: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker02: {\n icon: https://icons.terrastruct.com/essentials%2F095-download.svg\n class: [task]\n }\n\n worker03: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker04: {\n icon: https://icons.terrastruct.com/essentials%2F195-attachment.svg\n class: [task]\n }\n\n task01 -> queue.producer: {\n class: [base; enqueue]\n }\n task02 -> queue.producer: {\n class: [base; enqueue]\n }\n task03 -> queue.producer: {\n class: [base; enqueue]\n }\n queue.consumer -> worker01: {\n class: [base; dispatch]\n }\n queue.consumer -> worker02: {\n class: [base; dispatch]\n }\n queue.consumer -> worker03: {\n class: [base; dispatch]\n }\n queue.consumer -> worker04: {\n class: [base; dispatch]\n }\n}"
+ code: "direction: right\n\nclasses: {\n base: {\n style: {\n bold: true\n font-size: 28\n }\n }\n\n person: {\n shape: person\n }\n\n animated: {\n style: {\n animated: true\n }\n }\n\n multiple: {\n style: {\n multiple: true\n }\n }\n\n enqueue: {\n label: Enqueue Task\n }\n\n dispatch: {\n label: Dispatch Task\n }\n\n library: {\n style: {\n bold: true\n font-size: 32\n fill: PapayaWhip\n fill-pattern: grain\n border-radius: 8\n font: mono\n }\n }\n\n task: {\n style: {\n bold: true\n font-size: 32\n }\n }\n}\n\nuser01: {\n label: User01\n class: [base; person; multiple]\n}\n\nuser02: {\n label: User02\n class: [base; person; multiple]\n}\n\nuser03: {\n label: User03\n class: [base; person; multiple]\n}\n\nuser01 -> container.task01: {\n label: Create Task\n class: [base; animated]\n}\nuser02 -> container.task02: {\n label: Create Task\n class: [base; animated]\n}\nuser03 -> container.task03: {\n label: Create Task\n class: [base; animated]\n}\n\ncontainer: Application {\n direction: right\n style: {\n bold: true\n font-size: 28\n }\n icon: https://icons.d2lang.com/dev%2Fgo.svg\n\n task01: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task; multiple]\n }\n\n task02: {\n icon: https://icons.d2lang.com/essentials%2F095-download.svg\n class: [task; multiple]\n }\n\n task03: {\n icon: https://icons.d2lang.com/essentials%2F195-attachment.svg\n class: [task; multiple]\n }\n\n queue: {\n label: Queue Library\n icon: https://icons.d2lang.com/dev%2Fgo.svg\n style: {\n bold: true\n font-size: 32\n fill: honeydew\n }\n\n producer: {\n label: Producer\n class: library\n }\n\n consumer: {\n label: Consumer\n class: library\n }\n\n database: {\n label: Ring\\nBuffer\n shape: cylinder\n style: {\n bold: true\n font-size: 32\n fill-pattern: lines\n font: mono\n }\n }\n\n producer -> database\n database -> consumer\n }\n\n worker01: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker02: {\n icon: https://icons.d2lang.com/essentials%2F095-download.svg\n class: [task]\n }\n\n worker03: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker04: {\n icon: https://icons.d2lang.com/essentials%2F195-attachment.svg\n class: [task]\n }\n\n task01 -> queue.producer: {\n class: [base; enqueue]\n }\n task02 -> queue.producer: {\n class: [base; enqueue]\n }\n task03 -> queue.producer: {\n class: [base; enqueue]\n }\n queue.consumer -> worker01: {\n class: [base; dispatch]\n }\n queue.consumer -> worker02: {\n class: [base; dispatch]\n }\n queue.consumer -> worker03: {\n class: [base; dispatch]\n }\n queue.consumer -> worker04: {\n class: [base; dispatch]\n }\n}"
},
{
name: 'Lambda Infra',
svgContent: require('@site/static/img/examples/example-lambda-infra-dagre.svg2'),
- code: "direction: right\n\ngithub: GitHub {\n shape: image\n icon: https://icons.terrastruct.com/dev%2Fgithub.svg\n style: {\n font-color: green\n font-size: 30\n }\n}\n\ngithub_actions: GitHub Actions {\n lambda_action: Lambda Action {\n icon: https://icons.terrastruct.com/dev%2Fgithub.svg\n style.multiple: true\n }\n style: {\n stroke: blue\n font-color: purple\n stroke-dash: 3\n fill: white\n }\n}\n\naws: AWS Cloud VPC {\n style: {\n font-color: purple\n fill: white\n opacity: 0.5\n }\n lambda01: Lambda01 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda02: Lambda02 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda03: Lambda03 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n}\n\ngithub -> github_actions: GitHub Action Flow {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda01: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda02: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda03: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\n\nexplanation: |md\n ```yaml\n deploy_source:\n name: deploy lambda from source\n runs-on: ubuntu-latest\n steps:\n - name: checkout source code\n uses: actions/checkout@v3\n - name: default deploy\n uses: appleboy/lambda-action@v0.1.7\n with:\n aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n aws_region: ${{ secrets.AWS_REGION }}\n function_name: gorush\n source: example/index.js\n ```\n| {near: bottom-center}"
+ code: "direction: right\n\ngithub: GitHub {\n shape: image\n icon: https://icons.d2lang.com/dev%2Fgithub.svg\n style: {\n font-color: green\n font-size: 30\n }\n}\n\ngithub_actions: GitHub Actions {\n lambda_action: Lambda Action {\n icon: https://icons.d2lang.com/dev%2Fgithub.svg\n style.multiple: true\n }\n style: {\n stroke: blue\n font-color: purple\n stroke-dash: 3\n fill: white\n }\n}\n\naws: AWS Cloud VPC {\n style: {\n font-color: purple\n fill: white\n opacity: 0.5\n }\n lambda01: Lambda01 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda02: Lambda02 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda03: Lambda03 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n}\n\ngithub -> github_actions: GitHub Action Flow {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda01: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda02: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda03: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\n\nexplanation: |md\n ```yaml\n deploy_source:\n name: deploy lambda from source\n runs-on: ubuntu-latest\n steps:\n - name: checkout source code\n uses: actions/checkout@v3\n - name: default deploy\n uses: appleboy/lambda-action@v0.1.7\n with:\n aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n aws_region: ${{ secrets.AWS_REGION }}\n function_name: gorush\n source: example/index.js\n ```\n| {near: bottom-center}"
},
]} layout="dagre" />
diff --git a/docs/examples/elk.md b/docs/examples/elk.md
index a51e8b7b..8a501a57 100644
--- a/docs/examples/elk.md
+++ b/docs/examples/elk.md
@@ -39,11 +39,11 @@ See [/tour/elk](/tour/elk/).
{
name: 'Golang Queue',
svgContent: require('@site/static/img/examples/example-golang-queue-elk.svg2'),
- code: "direction: right\n\nclasses: {\n base: {\n style: {\n bold: true\n font-size: 28\n }\n }\n\n person: {\n shape: person\n }\n\n animated: {\n style: {\n animated: true\n }\n }\n\n multiple: {\n style: {\n multiple: true\n }\n }\n\n enqueue: {\n label: Enqueue Task\n }\n\n dispatch: {\n label: Dispatch Task\n }\n\n library: {\n style: {\n bold: true\n font-size: 32\n fill: PapayaWhip\n fill-pattern: grain\n border-radius: 8\n font: mono\n }\n }\n\n task: {\n style: {\n bold: true\n font-size: 32\n }\n }\n}\n\nuser01: {\n label: User01\n class: [base; person; multiple]\n}\n\nuser02: {\n label: User02\n class: [base; person; multiple]\n}\n\nuser03: {\n label: User03\n class: [base; person; multiple]\n}\n\nuser01 -> container.task01: {\n label: Create Task\n class: [base; animated]\n}\nuser02 -> container.task02: {\n label: Create Task\n class: [base; animated]\n}\nuser03 -> container.task03: {\n label: Create Task\n class: [base; animated]\n}\n\ncontainer: Application {\n direction: right\n style: {\n bold: true\n font-size: 28\n }\n icon: https://icons.terrastruct.com/dev%2Fgo.svg\n\n task01: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task; multiple]\n }\n\n task02: {\n icon: https://icons.terrastruct.com/essentials%2F095-download.svg\n class: [task; multiple]\n }\n\n task03: {\n icon: https://icons.terrastruct.com/essentials%2F195-attachment.svg\n class: [task; multiple]\n }\n\n queue: {\n label: Queue Library\n icon: https://icons.terrastruct.com/dev%2Fgo.svg\n style: {\n bold: true\n font-size: 32\n fill: honeydew\n }\n\n producer: {\n label: Producer\n class: library\n }\n\n consumer: {\n label: Consumer\n class: library\n }\n\n database: {\n label: Ring\\nBuffer\n shape: cylinder\n style: {\n bold: true\n font-size: 32\n fill-pattern: lines\n font: mono\n }\n }\n\n producer -> database\n database -> consumer\n }\n\n worker01: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker02: {\n icon: https://icons.terrastruct.com/essentials%2F095-download.svg\n class: [task]\n }\n\n worker03: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker04: {\n icon: https://icons.terrastruct.com/essentials%2F195-attachment.svg\n class: [task]\n }\n\n task01 -> queue.producer: {\n class: [base; enqueue]\n }\n task02 -> queue.producer: {\n class: [base; enqueue]\n }\n task03 -> queue.producer: {\n class: [base; enqueue]\n }\n queue.consumer -> worker01: {\n class: [base; dispatch]\n }\n queue.consumer -> worker02: {\n class: [base; dispatch]\n }\n queue.consumer -> worker03: {\n class: [base; dispatch]\n }\n queue.consumer -> worker04: {\n class: [base; dispatch]\n }\n}"
+ code: "direction: right\n\nclasses: {\n base: {\n style: {\n bold: true\n font-size: 28\n }\n }\n\n person: {\n shape: person\n }\n\n animated: {\n style: {\n animated: true\n }\n }\n\n multiple: {\n style: {\n multiple: true\n }\n }\n\n enqueue: {\n label: Enqueue Task\n }\n\n dispatch: {\n label: Dispatch Task\n }\n\n library: {\n style: {\n bold: true\n font-size: 32\n fill: PapayaWhip\n fill-pattern: grain\n border-radius: 8\n font: mono\n }\n }\n\n task: {\n style: {\n bold: true\n font-size: 32\n }\n }\n}\n\nuser01: {\n label: User01\n class: [base; person; multiple]\n}\n\nuser02: {\n label: User02\n class: [base; person; multiple]\n}\n\nuser03: {\n label: User03\n class: [base; person; multiple]\n}\n\nuser01 -> container.task01: {\n label: Create Task\n class: [base; animated]\n}\nuser02 -> container.task02: {\n label: Create Task\n class: [base; animated]\n}\nuser03 -> container.task03: {\n label: Create Task\n class: [base; animated]\n}\n\ncontainer: Application {\n direction: right\n style: {\n bold: true\n font-size: 28\n }\n icon: https://icons.d2lang.com/dev%2Fgo.svg\n\n task01: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task; multiple]\n }\n\n task02: {\n icon: https://icons.d2lang.com/essentials%2F095-download.svg\n class: [task; multiple]\n }\n\n task03: {\n icon: https://icons.d2lang.com/essentials%2F195-attachment.svg\n class: [task; multiple]\n }\n\n queue: {\n label: Queue Library\n icon: https://icons.d2lang.com/dev%2Fgo.svg\n style: {\n bold: true\n font-size: 32\n fill: honeydew\n }\n\n producer: {\n label: Producer\n class: library\n }\n\n consumer: {\n label: Consumer\n class: library\n }\n\n database: {\n label: Ring\\nBuffer\n shape: cylinder\n style: {\n bold: true\n font-size: 32\n fill-pattern: lines\n font: mono\n }\n }\n\n producer -> database\n database -> consumer\n }\n\n worker01: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker02: {\n icon: https://icons.d2lang.com/essentials%2F095-download.svg\n class: [task]\n }\n\n worker03: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker04: {\n icon: https://icons.d2lang.com/essentials%2F195-attachment.svg\n class: [task]\n }\n\n task01 -> queue.producer: {\n class: [base; enqueue]\n }\n task02 -> queue.producer: {\n class: [base; enqueue]\n }\n task03 -> queue.producer: {\n class: [base; enqueue]\n }\n queue.consumer -> worker01: {\n class: [base; dispatch]\n }\n queue.consumer -> worker02: {\n class: [base; dispatch]\n }\n queue.consumer -> worker03: {\n class: [base; dispatch]\n }\n queue.consumer -> worker04: {\n class: [base; dispatch]\n }\n}"
},
{
name: 'Lambda Infra',
svgContent: require('@site/static/img/examples/example-lambda-infra-elk.svg2'),
- code: "direction: right\n\ngithub: GitHub {\n shape: image\n icon: https://icons.terrastruct.com/dev%2Fgithub.svg\n style: {\n font-color: green\n font-size: 30\n }\n}\n\ngithub_actions: GitHub Actions {\n lambda_action: Lambda Action {\n icon: https://icons.terrastruct.com/dev%2Fgithub.svg\n style.multiple: true\n }\n style: {\n stroke: blue\n font-color: purple\n stroke-dash: 3\n fill: white\n }\n}\n\naws: AWS Cloud VPC {\n style: {\n font-color: purple\n fill: white\n opacity: 0.5\n }\n lambda01: Lambda01 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda02: Lambda02 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda03: Lambda03 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n}\n\ngithub -> github_actions: GitHub Action Flow {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda01: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda02: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda03: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\n\nexplanation: |md\n ```yaml\n deploy_source:\n name: deploy lambda from source\n runs-on: ubuntu-latest\n steps:\n - name: checkout source code\n uses: actions/checkout@v3\n - name: default deploy\n uses: appleboy/lambda-action@v0.1.7\n with:\n aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n aws_region: ${{ secrets.AWS_REGION }}\n function_name: gorush\n source: example/index.js\n ```\n| {near: bottom-center}"
+ code: "direction: right\n\ngithub: GitHub {\n shape: image\n icon: https://icons.d2lang.com/dev%2Fgithub.svg\n style: {\n font-color: green\n font-size: 30\n }\n}\n\ngithub_actions: GitHub Actions {\n lambda_action: Lambda Action {\n icon: https://icons.d2lang.com/dev%2Fgithub.svg\n style.multiple: true\n }\n style: {\n stroke: blue\n font-color: purple\n stroke-dash: 3\n fill: white\n }\n}\n\naws: AWS Cloud VPC {\n style: {\n font-color: purple\n fill: white\n opacity: 0.5\n }\n lambda01: Lambda01 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda02: Lambda02 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda03: Lambda03 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n}\n\ngithub -> github_actions: GitHub Action Flow {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda01: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda02: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda03: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\n\nexplanation: |md\n ```yaml\n deploy_source:\n name: deploy lambda from source\n runs-on: ubuntu-latest\n steps:\n - name: checkout source code\n uses: actions/checkout@v3\n - name: default deploy\n uses: appleboy/lambda-action@v0.1.7\n with:\n aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n aws_region: ${{ secrets.AWS_REGION }}\n function_name: gorush\n source: example/index.js\n ```\n| {near: bottom-center}"
},
]} layout="elk" />
diff --git a/docs/examples/tala.md b/docs/examples/tala.md
index 7c754c0f..8aa65011 100644
--- a/docs/examples/tala.md
+++ b/docs/examples/tala.md
@@ -39,12 +39,12 @@ See [/tour/tala](/tour/tala/).
{
name: 'Golang Queue',
svgContent: require('@site/static/img/examples/example-golang-queue-tala.svg2'),
- code: "direction: right\n\nclasses: {\n base: {\n style: {\n bold: true\n font-size: 28\n }\n }\n\n person: {\n shape: person\n }\n\n animated: {\n style: {\n animated: true\n }\n }\n\n multiple: {\n style: {\n multiple: true\n }\n }\n\n enqueue: {\n label: Enqueue Task\n }\n\n dispatch: {\n label: Dispatch Task\n }\n\n library: {\n style: {\n bold: true\n font-size: 32\n fill: PapayaWhip\n fill-pattern: grain\n border-radius: 8\n font: mono\n }\n }\n\n task: {\n style: {\n bold: true\n font-size: 32\n }\n }\n}\n\nuser01: {\n label: User01\n class: [base; person; multiple]\n}\n\nuser02: {\n label: User02\n class: [base; person; multiple]\n}\n\nuser03: {\n label: User03\n class: [base; person; multiple]\n}\n\nuser01 -> container.task01: {\n label: Create Task\n class: [base; animated]\n}\nuser02 -> container.task02: {\n label: Create Task\n class: [base; animated]\n}\nuser03 -> container.task03: {\n label: Create Task\n class: [base; animated]\n}\n\ncontainer: Application {\n direction: right\n style: {\n bold: true\n font-size: 28\n }\n icon: https://icons.terrastruct.com/dev%2Fgo.svg\n\n task01: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task; multiple]\n }\n\n task02: {\n icon: https://icons.terrastruct.com/essentials%2F095-download.svg\n class: [task; multiple]\n }\n\n task03: {\n icon: https://icons.terrastruct.com/essentials%2F195-attachment.svg\n class: [task; multiple]\n }\n\n queue: {\n label: Queue Library\n icon: https://icons.terrastruct.com/dev%2Fgo.svg\n style: {\n bold: true\n font-size: 32\n fill: honeydew\n }\n\n producer: {\n label: Producer\n class: library\n }\n\n consumer: {\n label: Consumer\n class: library\n }\n\n database: {\n label: Ring\\nBuffer\n shape: cylinder\n style: {\n bold: true\n font-size: 32\n fill-pattern: lines\n font: mono\n }\n }\n\n producer -> database\n database -> consumer\n }\n\n worker01: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker02: {\n icon: https://icons.terrastruct.com/essentials%2F095-download.svg\n class: [task]\n }\n\n worker03: {\n icon: https://icons.terrastruct.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker04: {\n icon: https://icons.terrastruct.com/essentials%2F195-attachment.svg\n class: [task]\n }\n\n task01 -> queue.producer: {\n class: [base; enqueue]\n }\n task02 -> queue.producer: {\n class: [base; enqueue]\n }\n task03 -> queue.producer: {\n class: [base; enqueue]\n }\n queue.consumer -> worker01: {\n class: [base; dispatch]\n }\n queue.consumer -> worker02: {\n class: [base; dispatch]\n }\n queue.consumer -> worker03: {\n class: [base; dispatch]\n }\n queue.consumer -> worker04: {\n class: [base; dispatch]\n }\n}"
+ code: "direction: right\n\nclasses: {\n base: {\n style: {\n bold: true\n font-size: 28\n }\n }\n\n person: {\n shape: person\n }\n\n animated: {\n style: {\n animated: true\n }\n }\n\n multiple: {\n style: {\n multiple: true\n }\n }\n\n enqueue: {\n label: Enqueue Task\n }\n\n dispatch: {\n label: Dispatch Task\n }\n\n library: {\n style: {\n bold: true\n font-size: 32\n fill: PapayaWhip\n fill-pattern: grain\n border-radius: 8\n font: mono\n }\n }\n\n task: {\n style: {\n bold: true\n font-size: 32\n }\n }\n}\n\nuser01: {\n label: User01\n class: [base; person; multiple]\n}\n\nuser02: {\n label: User02\n class: [base; person; multiple]\n}\n\nuser03: {\n label: User03\n class: [base; person; multiple]\n}\n\nuser01 -> container.task01: {\n label: Create Task\n class: [base; animated]\n}\nuser02 -> container.task02: {\n label: Create Task\n class: [base; animated]\n}\nuser03 -> container.task03: {\n label: Create Task\n class: [base; animated]\n}\n\ncontainer: Application {\n direction: right\n style: {\n bold: true\n font-size: 28\n }\n icon: https://icons.d2lang.com/dev%2Fgo.svg\n\n task01: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task; multiple]\n }\n\n task02: {\n icon: https://icons.d2lang.com/essentials%2F095-download.svg\n class: [task; multiple]\n }\n\n task03: {\n icon: https://icons.d2lang.com/essentials%2F195-attachment.svg\n class: [task; multiple]\n }\n\n queue: {\n label: Queue Library\n icon: https://icons.d2lang.com/dev%2Fgo.svg\n style: {\n bold: true\n font-size: 32\n fill: honeydew\n }\n\n producer: {\n label: Producer\n class: library\n }\n\n consumer: {\n label: Consumer\n class: library\n }\n\n database: {\n label: Ring\\nBuffer\n shape: cylinder\n style: {\n bold: true\n font-size: 32\n fill-pattern: lines\n font: mono\n }\n }\n\n producer -> database\n database -> consumer\n }\n\n worker01: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker02: {\n icon: https://icons.d2lang.com/essentials%2F095-download.svg\n class: [task]\n }\n\n worker03: {\n icon: https://icons.d2lang.com/essentials%2F092-graph%20bar.svg\n class: [task]\n }\n\n worker04: {\n icon: https://icons.d2lang.com/essentials%2F195-attachment.svg\n class: [task]\n }\n\n task01 -> queue.producer: {\n class: [base; enqueue]\n }\n task02 -> queue.producer: {\n class: [base; enqueue]\n }\n task03 -> queue.producer: {\n class: [base; enqueue]\n }\n queue.consumer -> worker01: {\n class: [base; dispatch]\n }\n queue.consumer -> worker02: {\n class: [base; dispatch]\n }\n queue.consumer -> worker03: {\n class: [base; dispatch]\n }\n queue.consumer -> worker04: {\n class: [base; dispatch]\n }\n}"
},
{
name: 'Lambda Infra',
svgContent: require('@site/static/img/examples/example-lambda-infra-tala.svg2'),
- code: "direction: right\n\ngithub: GitHub {\n shape: image\n icon: https://icons.terrastruct.com/dev%2Fgithub.svg\n style: {\n font-color: green\n font-size: 30\n }\n}\n\ngithub_actions: GitHub Actions {\n lambda_action: Lambda Action {\n icon: https://icons.terrastruct.com/dev%2Fgithub.svg\n style.multiple: true\n }\n style: {\n stroke: blue\n font-color: purple\n stroke-dash: 3\n fill: white\n }\n}\n\naws: AWS Cloud VPC {\n style: {\n font-color: purple\n fill: white\n opacity: 0.5\n }\n lambda01: Lambda01 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda02: Lambda02 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda03: Lambda03 {\n icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n}\n\ngithub -> github_actions: GitHub Action Flow {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda01: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda02: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda03: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\n\nexplanation: |md\n ```yaml\n deploy_source:\n name: deploy lambda from source\n runs-on: ubuntu-latest\n steps:\n - name: checkout source code\n uses: actions/checkout@v3\n - name: default deploy\n uses: appleboy/lambda-action@v0.1.7\n with:\n aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n aws_region: ${{ secrets.AWS_REGION }}\n function_name: gorush\n source: example/index.js\n ```\n| {near: bottom-center}"
+ code: "direction: right\n\ngithub: GitHub {\n shape: image\n icon: https://icons.d2lang.com/dev%2Fgithub.svg\n style: {\n font-color: green\n font-size: 30\n }\n}\n\ngithub_actions: GitHub Actions {\n lambda_action: Lambda Action {\n icon: https://icons.d2lang.com/dev%2Fgithub.svg\n style.multiple: true\n }\n style: {\n stroke: blue\n font-color: purple\n stroke-dash: 3\n fill: white\n }\n}\n\naws: AWS Cloud VPC {\n style: {\n font-color: purple\n fill: white\n opacity: 0.5\n }\n lambda01: Lambda01 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda02: Lambda02 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n lambda03: Lambda03 {\n icon: https://icons.d2lang.com/aws%2FCompute%2FAWS-Lambda.svg\n shape: parallelogram\n style.fill: \"#B6DDF6\"\n }\n}\n\ngithub -> github_actions: GitHub Action Flow {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda01: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda02: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\ngithub_actions -> aws.lambda03: Update Lambda {\n style: {\n animated: true\n font-size: 20\n }\n}\n\nexplanation: |md\n ```yaml\n deploy_source:\n name: deploy lambda from source\n runs-on: ubuntu-latest\n steps:\n - name: checkout source code\n uses: actions/checkout@v3\n - name: default deploy\n uses: appleboy/lambda-action@v0.1.7\n with:\n aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n aws_region: ${{ secrets.AWS_REGION }}\n function_name: gorush\n source: example/index.js\n ```\n| {near: bottom-center}"
},
{
name: 'Stripe',
diff --git a/docs/tour/api.md b/docs/tour/api.md
index 47e92d2e..639d7da8 100644
--- a/docs/tour/api.md
+++ b/docs/tour/api.md
@@ -7,9 +7,7 @@ pagination_next: tour/man
D2 has an API built on top of its AST for **programmatically creating diagrams in Go**.
This package is `d2/d2oracle`.
-This API is exercised heavily by Terrastruct to implement [bidirectional edits](https://youtu.be/EhxVVkxv2Ns?t=150). We have [comprehensive test coverage](https://github.com/d2lang/d2/blob/master/d2oracle/edit_test.go) of these functions. If there's any confusion from the docs, there's almost certainly a test that answers your question. (We're also happy to help, just file a GitHub issue!)
-
-For a blog post detailing an example usage (building a SQL table diagram), see [https://terrastruct.com/blog/post/generate-diagrams-programmatically/](https://terrastruct.com/blog/post/generate-diagrams-programmatically/).
+D2 has [comprehensive test coverage](https://github.com/d2lang/d2/blob/master/d2oracle/edit_test.go) of these functions. If there's any confusion from the docs, there's almost certainly a test that answers your question. (We're also happy to help, just file a GitHub issue!)
:::info No mutations
All functions in `d2oracle` are pure: they do not mutate the original graph, they return a new one. If you are chaining calls, don't forget to use the resulting graph from the previous call.
diff --git a/docs/tour/cheat-sheet.md b/docs/tour/cheat-sheet.md
index a16ba5e7..f197929b 100644
--- a/docs/tour/cheat-sheet.md
+++ b/docs/tour/cheat-sheet.md
@@ -4,6 +4,6 @@ import WebPImage from '@site/src/components/WebPImage';
Click the preview to download the PDF.
-
+