Merge branch 'master' into increase-png-export-quality

README.md

@@ -4,7 +4,8 @@
     A modern diagram scripting language that turns text to diagrams.
   </h2>
 
-[Language docs](https://d2lang.com) | [Cheat sheet](./docs/assets/cheat_sheet.pdf) | [Comparisons](https://text-to-diagram.com)
+
+[Docs](https://d2lang.com) | [Cheat sheet](./docs/assets/cheat_sheet.pdf) | [Comparisons](https://text-to-diagram.com) | [Playground](https://play.d2lang.com)
 
 [![ci](https://github.com/terrastruct/d2/actions/workflows/ci.yml/badge.svg)](https://github.com/terrastruct/d2/actions/workflows/ci.yml)
 [![daily](https://github.com/terrastruct/d2/actions/workflows/daily.yml/badge.svg)](https://github.com/terrastruct/d2/actions/workflows/daily.yml)
@@ -13,6 +14,10 @@
 [![twitter](https://img.shields.io/twitter/follow/terrastruct?style=social)](https://twitter.com/terrastruct)
 [![license](https://img.shields.io/github/license/terrastruct/d2?color=9cf)](./LICENSE.txt)
 
+<a href="https://play.d2lang.com">
+<img src="./docs/assets/playground_button.png" alt="D2 Playground button" width="200" />
+</a>
+
 https://user-images.githubusercontent.com/3120367/206125010-bd1fea8e-248a-43e7-8f85-0bbfca0c6e2a.mp4
 
 </div>
@@ -33,9 +38,8 @@ https://user-images.githubusercontent.com/3120367/206125010-bd1fea8e-248a-43e7-8
 - <a href="#contributing" id="toc-contributing">Contributing</a>
 - <a href="#license" id="toc-license">License</a>
 - <a href="#related" id="toc-related">Related</a>
-  - <a href="#vscode-extension" id="toc-vscode-extension">VSCode extension</a>
+  - <a href="#official-plugins" id="toc-official-plugins">Official plugins</a>
-  - <a href="#vim-extension" id="toc-vim-extension">Vim extension</a>
+  - <a href="#community-plugins" id="toc-community-plugins">Community plugins</a>
-  - <a href="#language-docs" id="toc-language-docs">Language docs</a>
   - <a href="#misc" id="toc-misc">Misc</a>
 - <a href="#faq" id="toc-faq">FAQ</a>
 
@@ -206,13 +210,11 @@ let us know and we'll be happy to include it here!
 - **Telegram bot**: [https://github.com/meinside/telegram-d2-bot](https://github.com/meinside/telegram-d2-bot)
 - **Postgres importer**: [https://github.com/zekenie/d2-erd-from-postgres](https://github.com/zekenie/d2-erd-from-postgres)
 
-### Language docs
-
-[https://github.com/terrastruct/d2-docs](https://github.com/terrastruct/d2-docs)
-
 ### Misc
 
-- [https://github.com/terrastruct/text-to-diagram-site](https://github.com/terrastruct/text-to-diagram-site)
+- **Comparison site**: [https://github.com/terrastruct/text-to-diagram-site](https://github.com/terrastruct/text-to-diagram-site)
+- **Playground**: [https://github.com/terrastruct/d2-playground](https://github.com/terrastruct/d2-playground)
+- **Language docs**: [https://github.com/terrastruct/d2-docs](https://github.com/terrastruct/d2-docs)
 
 ## FAQ
 

ci/release/Dockerfile

@@ -0,0 +1,18 @@
+# https://hub.docker.com/repository/docker/terrastruct/d2
+FROM debian:latest
+
+ARG TARGETARCH
+
+COPY ./d2-*-linux-$TARGETARCH.tar.gz /tmp
+RUN mkdir -p /usr/local/lib/d2 \
+      && tar -C /usr/local/lib/d2 -xzf /tmp/d2-*-linux-"$TARGETARCH".tar.gz \
+      && /usr/local/lib/d2/d2-*/scripts/install.sh \
+      && rm -Rf /tmp/d2-*-linux-"$TARGETARCH".tar.gz
+
+WORKDIR /root/src
+EXPOSE 8080
+ENV PORT 8080
+ENV HOST 0.0.0.0
+ENV BROWSER false
+
+ENTRYPOINT ["/usr/local/bin/d2"]

ci/release/README.md

@@ -2,7 +2,7 @@
 
 ## _install.sh
 
-The template for the install script in the root of the repository.
+The template for the install script in the root of the d2 repository.
 
 ### gen_install.sh
 
@@ -23,12 +23,12 @@ it depends on from ../sub/lib.
 > variables as we must compile d2 directly on each release target to include dagre.
 > See https://github.com/terrastruct/d2/issues/31
 
-Use `--host-only` to build only the release for the host's OS-ARCH pair.
+Use `--host-only` to build only the release for the host's `$OS-$ARCH` pair.
 
 ### build_docker.sh
 
 Helper script called by build.sh to build D2 on each linux runner inside Docker.
-The Dockerfile is in ./builders/Dockerfile
+The Dockerfile is in ./linux/Dockerfile
 
 ### _build.sh
 

ci/release/aws/ensure.sh

@@ -0,0 +1,545 @@
+#!/bin/sh
+set -eu
+. "$(dirname "$0")/../../../ci/sub/lib.sh"
+cd -- "$(dirname "$0")/../../.."
+
+help() {
+  cat <<EOF
+usage: $0 [--dry-run] [--skip-create] [--skip-init] [--copy-id=id.pub]
+          [--run=jobregex]
+
+$0 creates and ensures the d2 builders in AWS.
+EOF
+}
+
+main() {
+  while flag_parse "$@"; do
+    case "$FLAG" in
+      h|help)
+        help
+        return 0
+        ;;
+      x)
+        flag_noarg && shift "$FLAGSHIFT"
+        set -x
+        export TRACE=1
+        ;;
+      dry-run)
+        flag_noarg && shift "$FLAGSHIFT"
+        export DRY_RUN=1
+        ;;
+      copy-id)
+        flag_nonemptyarg && shift "$FLAGSHIFT"
+        ID_PUB_PATH=$FLAGARG
+        ;;
+      run)
+        flag_reqarg && shift "$FLAGSHIFT"
+        JOBFILTER="$FLAGARG"
+        ;;
+      *)
+        flag_errusage "unrecognized flag $FLAGRAW"
+        ;;
+    esac
+  done
+  shift "$FLAGSHIFT"
+  if [ $# -gt 0 ]; then
+    flag_errusage "no arguments are accepted"
+  fi
+  if [ -z "${ID_PUB_PATH-}" ]; then
+    flag_errusage "--copy-id is required"
+  fi
+
+  JOBNAME=create runjob_filter create_remote_hosts
+  JOBNAME=init && runjob_filter init_remote_hosts
+
+  FGCOLOR=2 header summary
+  echo "export CI_D2_LINUX_AMD64=$CI_D2_LINUX_AMD64"
+  echo "export CI_D2_LINUX_ARM64=$CI_D2_LINUX_ARM64"
+  echo "export CI_D2_MACOS_AMD64=$CI_D2_MACOS_AMD64"
+  echo "export CI_D2_MACOS_ARM64=$CI_D2_MACOS_ARM64"
+  echo "export CI_D2_WINDOWS_AMD64=$CI_D2_WINDOWS_AMD64"
+}
+
+create_remote_hosts() {
+  bigheader create_remote_hosts
+
+  KEY_NAME=$(aws ec2 describe-key-pairs | jq -r .KeyPairs[0].KeyName)
+  KEY_NAME_WINDOWS=windows
+  VPC_ID=$(aws ec2 describe-vpcs | jq -r .Vpcs[0].VpcId)
+
+  JOBNAME=$JOBNAME/security-groups runjob_filter create_security_groups
+  JOBNAME=$JOBNAME/linux/amd64 runjob_filter create_linux_amd64
+  JOBNAME=$JOBNAME/linux/arm64 runjob_filter create_linux_arm64
+  JOBNAME=$JOBNAME/macos/amd64 runjob_filter create_macos_amd64
+  JOBNAME=$JOBNAME/macos/arm64 runjob_filter create_macos_arm64
+  JOBNAME=$JOBNAME/windows/amd64 runjob_filter create_windows_amd64
+}
+
+create_security_groups() {
+  header security-group
+  SG_ID=$(aws ec2 describe-security-groups --group-names ssh 2>/dev/null \
+    | jq -r .SecurityGroups[0].GroupId)
+  if [ -z "$SG_ID" ]; then
+    SG_ID=$(sh_c aws ec2 create-security-group \
+      --group-name ssh \
+      --description ssh \
+      --vpc-id "$VPC_ID" | jq -r .GroupId)
+  fi
+
+  header security-group-ingress
+  SG_RULES_COUNT=$(aws ec2 describe-security-groups --group-names ssh \
+    | jq -r '.SecurityGroups[0].IpPermissions | length')
+  if [ "$SG_RULES_COUNT" -eq 0 ]; then
+    sh_c aws ec2 authorize-security-group-ingress \
+      --group-id "$SG_ID" \
+      --protocol tcp \
+      --port 22 \
+      --cidr 0.0.0.0/0 >/dev/null
+  fi
+
+  header windows-security-group
+  SG_ID=$(aws ec2 describe-security-groups --group-names windows 2>/dev/null \
+    | jq -r .SecurityGroups[0].GroupId)
+  if [ -z "$SG_ID" ]; then
+    SG_ID=$(sh_c aws ec2 create-security-group \
+      --group-name windows \
+      --description windows \
+      --vpc-id "$VPC_ID" | jq -r .GroupId)
+  fi
+
+  header windows-security-group-ingress
+  SG_RULES_COUNT=$(aws ec2 describe-security-groups --group-names windows \
+    | jq -r '.SecurityGroups[0].IpPermissions | length')
+  if [ "$SG_RULES_COUNT" -ne 2 ]; then
+    sh_c aws ec2 authorize-security-group-ingress \
+      --group-id "$SG_ID" \
+      --protocol tcp \
+      --port 22 \
+      --cidr 0.0.0.0/0 >/dev/null
+    sh_c aws ec2 authorize-security-group-ingress \
+      --group-id "$SG_ID" \
+      --protocol tcp \
+      --port 3389 \
+      --cidr 0.0.0.0/0 >/dev/null
+  fi
+}
+
+create_linux_amd64() {
+  header linux-amd64
+  REMOTE_NAME=ci-d2-linux-amd64
+  state=$(aws ec2 describe-instances --filters \
+    'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=ci-d2-linux-amd64' \
+    | jq -r '.Reservations[].Instances[].State.Name')
+  if [ -z "$state" ]; then
+    sh_c aws ec2 run-instances \
+      --image-id=ami-0ecc74eca1d66d8a6 \
+      --count=1 \
+      --instance-type=t3.small \
+      --security-groups=ssh \
+      "--key-name=$KEY_NAME" \
+      --iam-instance-profile 'Name=AmazonSSMRoleForInstancesQuickSetup' \
+      --block-device-mappings '"DeviceName=/dev/sda1,Ebs={VolumeSize=64,VolumeType=gp3}"' \
+      --tag-specifications '"ResourceType=instance,Tags=[{Key=Name,Value=ci-d2-linux-amd64}]"' \
+        '"ResourceType=volume,Tags=[{Key=Name,Value=ci-d2-linux-amd64}]"' >/dev/null
+  fi
+  wait_remote_host_ip
+  log "CI_D2_LINUX_AMD64=ubuntu@$ip"
+  export CI_D2_LINUX_AMD64=ubuntu@$ip
+}
+
+create_linux_arm64() {
+  header linux-arm64
+  REMOTE_NAME=ci-d2-linux-arm64
+  state=$(aws ec2 describe-instances --filters \
+    'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=ci-d2-linux-arm64' \
+    | jq -r '.Reservations[].Instances[].State.Name')
+  if [ -z "$state" ]; then
+    sh_c aws ec2 run-instances \
+      --image-id=ami-06e2dea2cdda3acda \
+      --count=1 \
+      --instance-type=t4g.small \
+      --security-groups=ssh \
+      "--key-name=$KEY_NAME" \
+      --iam-instance-profile 'Name=AmazonSSMRoleForInstancesQuickSetup' \
+      --block-device-mappings '"DeviceName=/dev/sda1,Ebs={VolumeSize=64,VolumeType=gp3}"' \
+      --tag-specifications '"ResourceType=instance,Tags=[{Key=Name,Value=ci-d2-linux-arm64}]"' \
+        '"ResourceType=volume,Tags=[{Key=Name,Value=ci-d2-linux-arm64}]"' >/dev/null
+  fi
+  wait_remote_host_ip
+  log "CI_D2_LINUX_ARM64=ubuntu@$ip"
+  export CI_D2_LINUX_ARM64=ubuntu@$ip
+}
+
+create_macos_amd64() {
+  header macos-amd64-host
+  MACOS_AMD64_ID=$(aws ec2 describe-hosts --filter 'Name=state,Values=pending,available' 'Name=tag:Name,Values=ci-d2-macos-amd64' | jq -r '.Hosts[].HostId')
+  if [ -z "$MACOS_AMD64_ID" ]; then
+    MACOS_AMD64_ID=$(sh_c aws ec2 allocate-hosts --instance-type mac1.metal --quantity 1 --availability-zone us-west-2a \
+      --tag-specifications '"ResourceType=dedicated-host,Tags=[{Key=Name,Value=ci-d2-macos-amd64}]"' \
+      | jq -r .HostIds[0])
+  fi
+
+  header macos-amd64
+  REMOTE_NAME=ci-d2-macos-amd64
+  state=$(aws ec2 describe-instances --filters \
+    'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=ci-d2-macos-amd64' \
+    | jq -r '.Reservations[].Instances[].State.Name')
+  if [ -z "$state" ]; then
+    sh_c aws ec2 run-instances \
+      --image-id=ami-0dd2ded7568750663 \
+      --count=1 \
+      --instance-type=mac1.metal \
+      --security-groups=ssh \
+      "--key-name=$KEY_NAME" \
+      --iam-instance-profile 'Name=AmazonSSMRoleForInstancesQuickSetup' \
+      --placement "Tenancy=host,HostId=$MACOS_AMD64_ID" \
+      --block-device-mappings '"DeviceName=/dev/sda1,Ebs={VolumeSize=100,VolumeType=gp3}"' \
+      --tag-specifications '"ResourceType=instance,Tags=[{Key=Name,Value=ci-d2-macos-amd64}]"' \
+        '"ResourceType=volume,Tags=[{Key=Name,Value=ci-d2-macos-amd64}]"' >/dev/null
+  fi
+  wait_remote_host_ip
+  log "CI_D2_MACOS_AMD64=ec2-user@$ip"
+  export CI_D2_MACOS_AMD64=ec2-user@$ip
+}
+
+create_macos_arm64() {
+  header macos-arm64-host
+  MACOS_ARM64_ID=$(aws ec2 describe-hosts --filter 'Name=state,Values=pending,available' 'Name=tag:Name,Values=ci-d2-macos-arm64' | jq -r '.Hosts[].HostId')
+  if [ -z "$MACOS_ARM64_ID" ]; then
+    MACOS_ARM64_ID=$(sh_c aws ec2 allocate-hosts --instance-type mac2.metal --quantity 1 --availability-zone us-west-2a \
+      --tag-specifications '"ResourceType=dedicated-host,Tags=[{Key=Name,Value=ci-d2-macos-arm64}]"' \
+      | jq -r .HostIds[0])
+  fi
+
+  header macos-arm64
+  REMOTE_NAME=ci-d2-macos-arm64
+  state=$(aws ec2 describe-instances --filters \
+    'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=ci-d2-macos-arm64' \
+    | jq -r '.Reservations[].Instances[].State.Name')
+  if [ -z "$state" ]; then
+    sh_c aws ec2 run-instances \
+      --image-id=ami-0af0516ff2c43dbbe \
+      --count=1 \
+      --instance-type=mac2.metal \
+      --security-groups=ssh \
+      "--key-name=$KEY_NAME" \
+      --iam-instance-profile 'Name=AmazonSSMRoleForInstancesQuickSetup' \
+      --placement "Tenancy=host,HostId=$MACOS_ARM64_ID" \
+      --block-device-mappings '"DeviceName=/dev/sda1,Ebs={VolumeSize=100,VolumeType=gp3}"' \
+      --tag-specifications '"ResourceType=instance,Tags=[{Key=Name,Value=ci-d2-macos-arm64}]"' \
+        '"ResourceType=volume,Tags=[{Key=Name,Value=ci-d2-macos-arm64}]"' >/dev/null
+  fi
+  wait_remote_host_ip
+  log "CI_D2_MACOS_ARM64=ec2-user@$ip"
+  export CI_D2_MACOS_ARM64=ec2-user@$ip
+}
+
+create_windows_amd64() {
+  header windows-amd64
+  REMOTE_NAME=ci-d2-windows-amd64
+  state=$(aws ec2 describe-instances --filters \
+    'Name=instance-state-name,Values=pending,running,stopping,stopped' "Name=tag:Name,Values=$REMOTE_NAME" \
+    | jq -r '.Reservations[].Instances[].State.Name')
+  if [ -z "$state" ]; then
+    sh_c aws ec2 run-instances \
+      --image-id=ami-0c5300e833c2b32f3 \
+      --count=1 \
+      --instance-type=t3.medium \
+      --security-groups=windows \
+      "--key-name=$KEY_NAME_WINDOWS" \
+      --iam-instance-profile 'Name=AmazonSSMRoleForInstancesQuickSetup' \
+      --block-device-mappings '"DeviceName=/dev/sda1,Ebs={VolumeSize=64,VolumeType=gp3}"' \
+      --tag-specifications "'ResourceType=instance,Tags=[{Key=Name,Value=$REMOTE_NAME}]'" \
+        "'ResourceType=volume,Tags=[{Key=Name,Value=$REMOTE_NAME}]'" >/dev/null
+  fi
+  wait_remote_host_ip
+  log "CI_D2_WINDOWS_AMD64=Administrator@$ip"
+  export CI_D2_WINDOWS_AMD64=Administrator@$ip
+}
+
+wait_remote_host_ip() {
+  while true; do
+    ip=$(sh_c aws ec2 describe-instances \
+      --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' "Name=tag:Name,Values=$REMOTE_NAME" \
+      | jq -r '.Reservations[].Instances[].PublicIpAddress')
+    if [ -n "$ip" ]; then
+      alloc_static_ip
+      ip=$(sh_c aws ec2 describe-instances \
+        --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' "Name=tag:Name,Values=$REMOTE_NAME" \
+        | jq -r '.Reservations[].Instances[].PublicIpAddress')
+      ssh-keygen -R "$ip"
+      break
+    fi
+    sleep 5
+  done
+}
+
+alloc_static_ip() {
+  allocation_id=$(aws ec2 describe-addresses --filters "Name=tag:Name,Values=$REMOTE_NAME" | jq -r '.Addresses[].AllocationId')
+  if [ -z "$allocation_id" ]; then
+    sh_c aws ec2 allocate-address --tag-specifications "'ResourceType=elastic-ip,Tags=[{Key=Name,Value=$REMOTE_NAME}]'"
+    allocation_id=$(aws ec2 describe-addresses --filters "Name=tag:Name,Values=$REMOTE_NAME" | jq -r '.Addresses[].AllocationId')
+  fi
+
+  instance_id=$(aws ec2 describe-instances \
+    --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' "Name=tag:Name,Values=$REMOTE_NAME" \
+    | jq -r '.Reservations[].Instances[].InstanceId')
+  aws ec2 associate-address --instance-id "$instance_id" --allocation-id "$allocation_id"
+}
+
+init_remote_hosts() {
+  bigheader init_remote_hosts
+
+  JOBNAME=$JOBNAME/linux/amd64 runjob_filter REMOTE_HOST=$CI_D2_LINUX_AMD64 REMOTE_NAME=ci-d2-linux-amd64 init_remote_linux
+  JOBNAME=$JOBNAME/linux/arm64 runjob_filter REMOTE_HOST=$CI_D2_LINUX_ARM64 REMOTE_NAME=ci-d2-linux-arm64 init_remote_linux
+  JOBNAME=$JOBNAME/macos/amd64 runjob_filter REMOTE_HOST=$CI_D2_MACOS_AMD64 REMOTE_NAME=ci-d2-macos-amd64 init_remote_macos
+  JOBNAME=$JOBNAME/macos/arm64 runjob_filter REMOTE_HOST=$CI_D2_MACOS_ARM64 REMOTE_NAME=ci-d2-macos-arm64 init_remote_macos
+  JOBNAME=$JOBNAME/windows/amd64 runjob_filter REMOTE_HOST=$CI_D2_WINDOWS_AMD64 REMOTE_NAME=ci-d2-windows-amd64 init_remote_windows
+
+  # Windows and AWS SSM both defeated me.
+  FGCOLOR=3 bigheader "WARNING: WINDOWS INITIALIZATION MUST BE COMPLETED MANUALLY OVER RDP AND POWERSHELL!"
+}
+
+init_remote_linux() {
+  header "$REMOTE_NAME"
+  wait_remote_host
+
+  sh_c ssh_copy_id -i="$ID_PUB_PATH" "$REMOTE_HOST"
+
+  sh_c ssh "$REMOTE_HOST" sh -s -- <<EOF
+set -eux
+export DEBIAN_FRONTEND=noninteractive
+
+sudo -E apt-get update -y
+sudo -E apt-get dist-upgrade -y
+sudo -E apt-get update -y
+sudo -E apt-get install -y build-essential rsync
+
+# Docker from https://docs.docker.com/engine/install/ubuntu/
+sudo -E apt-get -y install \
+    ca-certificates \
+    curl \
+    gnupg \
+    lsb-release
+sudo mkdir -p /etc/apt/keyrings
+curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --yes --dearmor -o /etc/apt/keyrings/docker.gpg
+echo \
+  "deb [arch=\$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
+  \$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+sudo -E apt-get update -y
+sudo -E apt-get install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
+sudo groupadd docker || true
+sudo usermod -aG docker \$USER
+
+mkdir -p \$HOME/.local/bin
+mkdir -p \$HOME/.local/share/man
+EOF
+  init_remote_env
+
+  sh_c ssh "$REMOTE_HOST" sh -s -- <<EOF
+set -eux
+export DEBIAN_FRONTEND=noninteractive
+sudo -E apt-get autoremove -y
+EOF
+  sh_c ssh "$REMOTE_HOST" 'sudo reboot' || true
+}
+
+init_remote_macos() {
+  header "$REMOTE_NAME"
+  wait_remote_host
+
+  sh_c ssh_copy_id -i="$ID_PUB_PATH" "$REMOTE_HOST"
+
+  sh_c ssh "$REMOTE_HOST" '"/bin/bash -c \"\$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\""'
+
+  if sh_c ssh "$REMOTE_HOST" uname -m | grep -qF arm64; then
+    shellenv=$(sh_c ssh "$REMOTE_HOST" /opt/homebrew/bin/brew shellenv)
+  else
+    shellenv=$(sh_c ssh "$REMOTE_HOST" /usr/local/bin/brew shellenv)
+  fi
+  if ! echo "$shellenv" | sh_c ssh "$REMOTE_HOST" "IFS= read -r regex\; \"grep -qF \\\"\\\$regex\\\" ~/.zshrc\""; then
+    echo "$shellenv" | sh_c ssh "$REMOTE_HOST" "\"(echo && cat) >> ~/.zshrc\""
+  fi
+  if ! sh_c ssh "$REMOTE_HOST" "'grep -qF \\\$HOME/.local ~/.zshrc'"; then
+    sh_c ssh "$REMOTE_HOST" "\"(echo && cat) >> ~/.zshrc\"" <<EOF
+PATH=\$HOME/.local/bin:\$PATH
+MANPATH=\$HOME/.local/share/man:\$MANPATH
+EOF
+  fi
+  init_remote_env
+  sh_c ssh "$REMOTE_HOST" brew update
+  sh_c ssh "$REMOTE_HOST" brew upgrade
+  sh_c ssh "$REMOTE_HOST" brew install go rsync
+
+  sh_c ssh "$REMOTE_HOST" 'sudo reboot' || true
+}
+
+init_remote_env() {
+  sh_c ssh "$REMOTE_HOST" '"rm -f ~/.ssh/environment"'
+  sh_c ssh "$REMOTE_HOST" '"echo PATH=\$(echo \"echo \\\$PATH\" | \"\$SHELL\" -ils) >\$HOME/.ssh/environment"'
+  sh_c ssh "$REMOTE_HOST" '"echo MANPATH=\$(echo \"echo \\\$MANPATH\" | \"\$SHELL\" -ils) >>\$HOME/.ssh/environment"'
+
+  sh_c ssh "$REMOTE_HOST" "sudo sed -i.bak '\"s/#PermitUserEnvironment no/PermitUserEnvironment yes/\"' /etc/ssh/sshd_config"
+
+  if sh_c ssh "$REMOTE_HOST" uname | grep -qF Darwin; then
+    sh_c ssh "$REMOTE_HOST" "sudo launchctl stop com.openssh.sshd"
+  else
+    sh_c ssh "$REMOTE_HOST" "sudo systemctl restart sshd"
+    # ubuntu has $PATH hard coded in /etc/environment for some reason. It takes precedence
+    # over ~/.ssh/environment.
+    sh_c ssh "$REMOTE_HOST" "sudo rm /etc/environment"
+  fi
+}
+
+wait_remote_host() {
+  while true; do
+    if sh_c ssh "$REMOTE_HOST" true; then
+      break
+    fi
+    sleep 5
+  done
+}
+
+wait_remote_host_windows() {
+  instance_id=$(aws ec2 describe-instances \
+    --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' "Name=tag:Name,Values=$REMOTE_NAME" \
+    | jq -r '.Reservations[].Instances[].InstanceId')
+
+  while true; do
+    if sh_c aws ssm start-session --target "$instance_id" \
+    --document-name 'AWS-StartNonInteractiveCommand' \
+    --parameters "'{\"command\": [\"echo true\"]}'"; then
+      break
+    fi
+    sleep 5
+  done
+}
+
+init_remote_windows() {
+  header "$REMOTE_NAME"
+  wait_remote_host_windows
+
+  init_ps1=$(cat <<EOF
+\$ProgressPreference = 'SilentlyContinue'
+
+# Bootstrap PowerShell v7
+if ((\$PSVersionTable.PSVersion).Major -eq 5) {
+  Invoke-WebRequest -Uri https://www.nuget.org/api/v2/package/Microsoft.UI.Xaml/2.7.3 -OutFile .\microsoft.ui.xaml.2.7.3.zip
+  Expand-Archive -Force .\microsoft.ui.xaml.2.7.3.zip
+  Add-AppxPackage .\microsoft.ui.xaml.2.7.3\tools\AppX\x64\Release\Microsoft.UI.Xaml.2.7.appx
+
+  Invoke-WebRequest -Uri https://github.com/microsoft/winget-cli/releases/download/v1.3.2691/Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle -OutFile .\Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle
+  Invoke-WebRequest -Uri https://github.com/microsoft/winget-cli/releases/download/v1.3.2691/7bcb1a0ab33340daa57fa5b81faec616_License1.xml -OutFile .\7bcb1a0ab33340daa57fa5b81faec616_License1.xml
+  Invoke-WebRequest -Uri https://aka.ms/Microsoft.VCLibs.x64.14.00.Desktop.appx -OutFile Microsoft.VCLibs.x64.14.00.Desktop.appx
+  Add-AppxProvisionedPackage -online -PackagePath .\Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle -LicensePath .\7bcb1a0ab33340daa57fa5b81faec616_License1.xml -DependencyPackagePath Microsoft.VCLibs.x64.14.00.Desktop.appx
+  Add-AppxPackage .\Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle
+
+  winget install --silent --accept-package-agreements --accept-source-agreements Microsoft.DotNet.SDK.7
+  # Refresh env.
+  \$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")
+  dotnet tool install --global PowerShell --version 7.3.1
+  pwsh -c 'Enable-ExperimentalFeature PSNativeCommandErrorActionPreference'
+  pwsh .\Desktop\init.ps1
+  Exit
+}
+
+Set-StrictMode -Version Latest
+\$ErrorActionPreference = "Stop"
+\$PSNativeCommandUseErrorActionPreference = \$true
+
+if (-Not (Get-Command wix -errorAction SilentlyContinue)) {
+  dotnet tool install --global wix --version 4.0.0-preview.1
+}
+
+Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
+Start-Service sshd
+Set-Service -Name sshd -StartupType 'Automatic'
+
+New-ItemProperty -Path "HKLM:\SOFTWARE\OpenSSH" -Name DefaultShell -Value "C:\msys64\usr\bin\bash.exe" -PropertyType String -Force
+
+ConvertFrom-Json -InputObject @'
+$(perl -pe 's#\n#\r\n#' "$ID_PUB_PATH" | jq -Rs .)
+'@ | Out-File -Encoding utf8 "\$env:ProgramData\ssh\administrators_authorized_keys"
+# utf8BOM -> utf8: https://stackoverflow.com/a/34969243/4283659
+\$null = New-Item -Force "\$env:ProgramData\ssh\administrators_authorized_keys" -Value (Get-Content -Path "\$env:ProgramData\ssh\administrators_authorized_keys" | Out-String)
+get-acl "\$env:ProgramData\ssh\ssh_host_rsa_key" | set-acl "\$env:ProgramData\ssh\administrators_authorized_keys"
+
+if (-Not (Test-Path -Path C:\msys64)) {
+  Invoke-WebRequest -Uri "https://github.com/msys2/msys2-installer/releases/download/2022-10-28/msys2-x86_64-20221028.exe" -OutFile "./msys2-x86_64.exe"
+  ./msys2-x86_64.exe install --default-answer --confirm-command --root C:\msys64
+}
+C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64 -c 'pacman -Sy --noconfirm base-devel vim rsync man'
+C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64 -c 'curl -fsSL https://d2lang.com/install.sh | sh -s -- --tala'
+C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64 -c 'd2 --version'
+
+\$path = (Get-ItemProperty -Path 'Registry::HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Environment' -Name Path).Path
+if (\$path -notlike '*C:\msys64\usr\bin*') {
+  \$path = "\$path;C:\msys64\usr\bin"
+  Set-ItemProperty -Path 'Registry::HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Environment' -Name Path -Value \$path
+}
+if (\$path -notlike '*C:\msys64\usr\local\bin*') {
+  \$path = "\$path;C:\msys64\usr\local\bin"
+  Set-ItemProperty -Path 'Registry::HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Environment' -Name Path -Value \$path
+}
+(Get-ItemProperty -Path 'Registry::HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Environment' -Name Path).Path
+
+Restart-Computer
+EOF
+
+# To run a POSIX script:
+#   ssh "$CI_D2_WINDOWS_AMD64" sh -s -- <<EOF
+#   wix --version
+#   EOF
+# To run a command in a pure MSYS2 shell:
+#   ssh "$CI_D2_WINDOWS_AMD64" 'C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64 -c "\"d2 --version\""'
+# To run a pure MSYS2 shell:
+#   ssh -t "$CI_D2_WINDOWS_AMD64" 'C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64'
+
+# In case MSYS2 improves in the future and allows for noninteractive commands the
+# following will set the OpenSSH shell to MSYS2 instead of PowerShell.
+#
+# Right now, setting MSYS2 to the DefaultShell like this will make it start bash in
+# interactive mode always. Even for ssh "$CI_D2_WINDOWS_AMD64" echo hi. And so you'll end
+# up with a blank prompt on which to input commands instead of having it execute the
+# command you passed in via ssh.
+#
+# PowerShell as the default is better anyway as it gives us access to both the UNIX
+# userspace and Windows tools like wix/dotnet/winget.
+#
+# To set:
+#   <<EOF
+#   echo '@C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64' | Out-File C:\msys64\sshd_default_shell.cmd
+#   # utf8BOM -> utf8: https://stackoverflow.com/a/34969243/4283659
+#   \$null = New-Item -Force C:\msys64\sshd_default_shell.cmd -Value (Get-Content -Path C:\msys64\sshd_default_shell.cmd | Out-String)
+#   Set-ItemProperty -Path HKLM:\SOFTWARE\OpenSSH -Name DefaultShell -Value C:\msys64\sshd_default_shell.cmd
+#   EOF
+#
+# To undo:
+#   <<EOF
+#   Remove-ItemProperty -Path HKLM:\SOFTWARE\OpenSSH -Name DefaultShell
+#   rm C:\msys64\sshd_default_shell.cmd
+#   EOF
+)
+
+  gen_init_ps1=$(cat <<EOF
+ConvertFrom-Json -InputObject @'
+$(printf %s "$init_ps1" | perl -pe 'chomp if eof' | perl -pe 's#\n#\r\n#' | jq -Rs .)
+'@ | Out-File -Encoding utf8 C:\Users\Administrator\Desktop\init.ps1; C:\Users\Administrator\Desktop\init.ps1
+EOF
+)
+
+  # Windows and AWS SSM both defeated me.
+  FGCOLOR=3 bigheader "WARNING: WINDOWS INITIALIZATION MUST BE COMPLETED MANUALLY OVER RDP AND POWERSHELL!"
+
+  warn '1. Obtain Windows RDP password with:'
+  echo "  aws ec2 get-password-data --instance-id \$(aws ec2 describe-instances --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' "Name=tag:Name,Values=$REMOTE_NAME" | jq -r '.Reservations[].Instances[].InstanceId') --priv-launch-key windows.pem | jq -r .PasswordData" >&2
+  warn "2. RDP into $REMOTE_HOST and open PowerShell."
+  warn '3. Generate and execute C:\Users\Administrator\Desktop\init.ps1 with:'
+  printf '%s\n' "$gen_init_ps1" >&2
+  warn '4. Run the following to be notified once installation is successful:'
+  cat <<EOF
+  until ssh $REMOTE_HOST d2 --version; do echo 'failed: retrying in 5s' && sleep 5; done && printf 'success\a\n'
+EOF
+}
+
+main "$@"

ci/release/aws/ssh.sh

@@ -1,7 +1,7 @@
 #!/bin/sh
 set -eu
+. "$(dirname "$0")/../../../ci/sub/lib.sh"
 cd -- "$(dirname "$0")/../../.."
-. ./ci/sub/lib.sh
 
 help() {
   cat <<EOF
@@ -33,10 +33,11 @@ main() {
   done
   shift "$FLAGSHIFT"
 
-  REMOTE_HOST=$TSTRUCT_LINUX_AMD64_BUILDER; runjob linux-amd64 ssh "$REMOTE_HOST" "$@"
+  REMOTE_HOST=$CI_HOST_D2_LINUX_AMD64 && runjob linux-amd64 ssh "$REMOTE_HOST" "$@"
-  REMOTE_HOST=$TSTRUCT_LINUX_ARM64_BUILDER; runjob linux-arm64 ssh "$REMOTE_HOST" "$@"
+  REMOTE_HOST=$CI_HOST_D2_LINUX_ARM64 && runjob linux-arm64 ssh "$REMOTE_HOST" "$@"
-  REMOTE_HOST=$TSTRUCT_MACOS_AMD64_BUILDER; runjob macos-amd64 ssh "$REMOTE_HOST" "$@"
+  REMOTE_HOST=$CI_HOST_D2_MACOS_AMD64 && runjob macos-amd64 ssh "$REMOTE_HOST" "$@"
-  REMOTE_HOST=$TSTRUCT_MACOS_ARM64_BUILDER; runjob macos-arm64 ssh "$REMOTE_HOST" "$@"
+  REMOTE_HOST=$CI_HOST_D2_MACOS_ARM64 && runjob macos-arm64 ssh "$REMOTE_HOST" "$@"
+  REMOTE_HOST=$CI_HOST_D2_WINDOWS_AMD64 && runjob macos-arm64 ssh "$REMOTE_HOST" "$@"
 }
 
 main "$@"

ci/release/build.sh

@@ -1,7 +1,12 @@
 #!/bin/sh
 set -eu
+if [ ! -e "$(dirname "$0")/../../ci/sub/.git" ]; then
+  set -x
+  git submodule update --init
+  set +x
+fi
+. "$(dirname "$0")/../../ci/sub/lib.sh"
 cd -- "$(dirname "$0")/../.."
-. ./ci/sub/lib.sh
 
 help() {
   cat <<EOF
@@ -20,11 +25,12 @@ Flags:
   changed something and need to force rebuild, use this flag.
 
 --local
-  By default build.sh uses \$TSTRUCT_MACOS_AMD64_BUILDER, \$TSTRUCT_MACOS_ARM64_BUILDER,
+  By default build.sh uses \$CI_D2_LINUX_AMD64, \$CI_D2_LINUX_ARM64,
-  \$TSTRUCT_LINUX_AMD64_BUILDER and \$TSTRUCT_LINUX_ARM64_BUILDER to build the release
+  \$CI_D2_MACOS_AMD64 and \$CI_D2_MACOS_ARM64 to build the release
   archives. It's required for now due to the following issue:
-  https://github.com/terrastruct/d2/issues/31 With --local, build.sh will cross compile
+  https://github.com/terrastruct/d2/issues/31
-  locally. warning: This is only for testing purposes, do not use in production!
+  With --local, build.sh will cross compile locally. warning: This is only for testing
+  purposes, do not use in production!
 
 --host-only
   Use to build the release archive for the host OS-ARCH only. All logging is done to stderr
@@ -45,6 +51,13 @@ Flags:
 
 --uninstall
   Ensure a release using --host-only and uninstall it.
+
+--push-docker
+  Push the built docker image. Unfortunately dockerx requires the multi-arch images be
+  pushed if required in the same invocation as build. dockerx cannot load multi-arch
+  images into the daemon for push later. It's not slow though to use --push-docker after
+  building the image as nearly all artifacts are cached.
+  Automatically set if called from release.sh
 EOF
 }
 
@@ -69,7 +82,7 @@ main() {
         ;;
       run)
         flag_reqarg && shift "$FLAGSHIFT"
-        JOBFILTER="$FLAGARG"
+        JOBFILTER=$FLAGARG
         ;;
       host-only)
         flag_noarg && shift "$FLAGSHIFT"
@@ -96,6 +109,10 @@ main() {
         HOST_ONLY=1
         LOCAL=1
         ;;
+      push-docker)
+        flag_noarg && shift "$FLAGSHIFT"
+        PUSH_DOCKER=1
+        ;;
       *)
         flag_errusage "unrecognized flag $FLAGRAW"
         ;;
@@ -108,10 +125,13 @@ main() {
 
   VERSION=${VERSION:-$(git_describe_ref)}
   BUILD_DIR=ci/release/build/$VERSION
+  sh_c mkdir -p "$BUILD_DIR"
+  sh_c rm -f ci/release/build/latest
+  sh_c ln -s "$VERSION" ci/release/build/latest
   if [ -n "${HOST_ONLY-}" ]; then
     ensure_os
     ensure_arch
-    runjob "$OS-$ARCH" "build"
+    runjob "$OS/$ARCH" "build"
 
     if [ -n "${INSTALL-}" ]; then
       sh_c make -sC "ci/release/build/$VERSION/$OS-$ARCH/d2-$VERSION" install
@@ -121,12 +141,16 @@ main() {
     return 0
   fi
 
-  runjob linux-amd64 'OS=linux ARCH=amd64 build' &
+  runjob linux/amd64 'OS=linux ARCH=amd64 build' &
-  runjob linux-arm64 'OS=linux ARCH=arm64 build' &
+  runjob linux/arm64 'OS=linux ARCH=arm64 build' &
-  runjob macos-amd64 'OS=macos ARCH=amd64 build' &
+  runjob macos/amd64 'OS=macos ARCH=amd64 build' &
-  runjob macos-arm64 'OS=macos ARCH=arm64 build' &
+  runjob macos/arm64 'OS=macos ARCH=arm64 build' &
-  runjob windows-amd64 'OS=windows ARCH=amd64 build' &
+  runjob windows/amd64 'OS=windows ARCH=amd64 build' &
-  runjob windows-arm64 'OS=windows ARCH=arm64 build' &
+  runjob windows/arm64 'OS=windows ARCH=arm64 build' &
+  waitjobs
+
+  runjob linux/dockerimage 'OS=linux build_docker_image' &
+  runjob windows/amd64/msi 'OS=windows ARCH=amd64 build_windows_msi' &
   waitjobs
 }
 
@@ -148,10 +172,10 @@ build() {
     macos)
       case $ARCH in
         amd64)
-          REMOTE_HOST=$TSTRUCT_MACOS_AMD64_BUILDER build_remote_macos
+          REMOTE_HOST=$CI_D2_MACOS_AMD64 build_remote_macos
           ;;
         arm64)
-          REMOTE_HOST=$TSTRUCT_MACOS_ARM64_BUILDER build_remote_macos
+          REMOTE_HOST=$CI_D2_MACOS_ARM64 build_remote_macos
           ;;
         *)
           warn "no builder for OS=$OS ARCH=$ARCH, building locally..."
@@ -162,10 +186,10 @@ build() {
     linux)
       case $ARCH in
         amd64)
-          REMOTE_HOST=$TSTRUCT_LINUX_AMD64_BUILDER build_remote_linux
+          REMOTE_HOST=$CI_D2_LINUX_AMD64 build_remote_linux
           ;;
         arm64)
-          REMOTE_HOST=$TSTRUCT_LINUX_ARM64_BUILDER build_remote_linux
+          REMOTE_HOST=$CI_D2_LINUX_ARM64 build_remote_linux
           ;;
         *)
           warn "no builder for OS=$OS ARCH=$ARCH, building locally..."
@@ -218,13 +242,39 @@ VERSION=$VERSION \
 OS=$OS \
 ARCH=$ARCH \
 ARCHIVE=$ARCHIVE \
-./src/d2/ci/release/build_docker.sh"
+./src/d2/ci/release/build_in_docker.sh"
   sh_c mkdir -p "$HW_BUILD_DIR"
   sh_c rsync --archive --human-readable "$REMOTE_HOST:src/d2/$ARCHIVE" "$ARCHIVE"
 )}
 
-ssh() {
+build_docker_image() {
-  command ssh -o='StrictHostKeyChecking=accept-new' "$@"
+  D2_DOCKER_IMAGE=${D2_DOCKER_IMAGE:-terrastruct/d2}
+  flags='--load'
+  if [ -n "${PUSH_DOCKER-}" -o -n "${RELEASE-}" ]; then
+    flags='--push --platform linux/amd64,linux/arm64'
+  fi
+  sh_c docker buildx build $flags -t "$D2_DOCKER_IMAGE:$VERSION" -t "$D2_DOCKER_IMAGE:latest" --build-arg "VERSION=$VERSION" -f ./ci/release/Dockerfile "./ci/release/build/$VERSION"
+}
+
+build_windows_msi() {
+  REMOTE_HOST=$CI_D2_WINDOWS_AMD64
+
+  ln -sf "../build/$VERSION/windows-amd64/d2-$VERSION/bin/d2.exe" ./ci/release/windows/d2.exe
+  sh_c rsync --archive --human-readable --copy-links --delete ./ci/release/windows/ "'$REMOTE_HOST:windows\'"
+  if ! echo "$VERSION" | grep '[0-9]\.[0-9].[0-9]'; then
+    WIX_VERSION=0.0.0
+  else
+    WIX_VERSION=$VERSION
+  fi
+  sh_c ssh "$REMOTE_HOST" "'cd .\\windows && wix build -arch x64 -d D2Version=$WIX_VERSION .\d2.wxs'"
+
+  # --files-from shouldn't be necessary but for some reason selecting d2.msi directly
+  # makes rsync error with:
+  # ERROR: rejecting unrequested file-list name: .\\windows\\d2.msi
+  # rsync error: requested action not supported (code 4) at flist.c(1027) [Receiver=3.2.7]
+  rsync_files=$(mktempd)/rsync-files
+  echo d2.msi >$rsync_files
+  sh_c rsync --archive --human-readable --files-from "$rsync_files" "'$REMOTE_HOST:windows\\'" "./ci/release/build/$VERSION/d2-$VERSION-$OS-$ARCH.msi"
 }
 
 main "$@"

ci/release/build/.dockerignore

@@ -0,0 +1 @@
+**/d2*/

ci/release/build_in_docker.sh

@@ -5,7 +5,7 @@ cd -- "$(dirname "$0")/../.."
 
 tag="$(sh_c docker build \
   --build-arg GOVERSION="1.19.3.linux-$ARCH" \
-  -qf ./ci/release/builders/Dockerfile ./ci/release/builders)"
+  -qf ./ci/release/linux/Dockerfile ./ci/release/linux)"
 docker_run \
   -e DRY_RUN \
   -e HW_BUILD_DIR \

ci/release/builders/Dockerfile-centos

@@ -1,16 +0,0 @@
-FROM centos:7
-
-ARG GOVERSION=
-
-RUN curl -fsSL "https://go.dev/dl/go$GOVERSION.tar.gz" >/tmp/go.tar.gz
-RUN tar -C /usr/local -xzf /tmp/go.tar.gz
-
-ENV PATH="/usr/local/go/bin:$PATH"
-
-RUN yum install -y rsync wget
-RUN yum groupinstall -y 'Development Tools'
-
-RUN curl -fsSL https://ftp.gnu.org/gnu/gcc/gcc-5.2.0/gcc-5.2.0.tar.gz >/tmp/gcc.tar.gz
-RUN tar -C /usr/local -xzf /tmp/gcc.tar.gz
-RUN cd /usr/local/gcc-5.2.0 && ./contrib/download_prerequisites && mkdir -p build \
-  && cd build && ../configure --disable-multilib && make && make install

ci/release/builders/aws_copy_keys.sh

@@ -1,57 +0,0 @@
-#!/bin/sh
-set -eu
-cd -- "$(dirname "$0")/../../.."
-. ./ci/sub/lib.sh
-
-help() {
-  cat <<EOF
-usage: $0 [--dry-run] -i keys.pub
-
-$0 copies keys.pub to each builder and then deduplicates its .authorized_keys.
-EOF
-}
-
-main() {
-  while flag_parse "$@"; do
-    case "$FLAG" in
-      h|help)
-        help
-        return 0
-        ;;
-      dry-run)
-        flag_noarg && shift "$FLAGSHIFT"
-        DRY_RUN=1
-        ;;
-      i)
-        flag_nonemptyarg && shift "$FLAGSHIFT"
-        KEY_FILE=$FLAGARG
-        ;;
-      *)
-        flag_errusage "unrecognized flag $FLAGRAW"
-        ;;
-    esac
-  done
-  shift "$FLAGSHIFT"
-  if [ -z "${KEY_FILE-}" ]; then
-    echoerr "-i is required"
-    exit 1
-  fi
-
-  header linux-amd64
-  REMOTE_HOST=$TSTRUCT_LINUX_AMD64_BUILDER copy_keys
-  header linux-arm64
-  REMOTE_HOST=$TSTRUCT_LINUX_ARM64_BUILDER copy_keys
-  header macos-amd64
-  REMOTE_HOST=$TSTRUCT_MACOS_AMD64_BUILDER copy_keys
-  header macos-arm64
-  REMOTE_HOST=$TSTRUCT_MACOS_ARM64_BUILDER copy_keys
-}
-
-copy_keys() {
-  sh_c ssh-copy-id -fi "$KEY_FILE" "$REMOTE_HOST"
-  sh_c ssh "$REMOTE_HOST" 'cat .ssh/authorized_keys \| sort -u \> .ssh/authorized_keys.dedup'
-  sh_c ssh "$REMOTE_HOST" 'cp .ssh/authorized_keys.dedup .ssh/authorized_keys'
-  sh_c ssh "$REMOTE_HOST" 'rm .ssh/authorized_keys.dedup'
-}
-
-main "$@"

ci/release/builders/aws_ensure.sh

@@ -1,294 +0,0 @@
-#!/bin/sh
-set -eu
-cd -- "$(dirname "$0")/../../.."
-. ./ci/sub/lib.sh
-
-help() {
-  cat <<EOF
-usage: $0 [--dry-run] [--skip-create]
-
-$0 creates and ensures the d2 builders in AWS.
-EOF
-}
-
-main() {
-  while flag_parse "$@"; do
-    case "$FLAG" in
-      h|help)
-        help
-        return 0
-        ;;
-      dry-run)
-        flag_noarg && shift "$FLAGSHIFT"
-        DRY_RUN=1
-        ;;
-      skip-create)
-        flag_noarg && shift "$FLAGSHIFT"
-        SKIP_CREATE=1
-        ;;
-      *)
-        flag_errusage "unrecognized flag $FLAGRAW"
-        ;;
-    esac
-  done
-  shift "$FLAGSHIFT"
-  if [ $# -gt 0 ]; then
-    flag_errusage "no arguments are accepted"
-  fi
-
-  if [ -z "${SKIP_CREATE-}" ]; then
-    create_remote_hosts
-  fi
-  init_remote_hosts
-}
-
-create_remote_hosts() {
-  KEY_NAME=$(aws ec2 describe-key-pairs | jq -r .KeyPairs[0].KeyName)
-  VPC_ID=$(aws ec2 describe-vpcs | jq -r .Vpcs[0].VpcId)
-
-  header security-group
-  SG_ID=$(aws ec2 describe-security-groups --group-names ssh 2>/dev/null \
-    | jq -r .SecurityGroups[0].GroupId)
-  if [ -z "$SG_ID" ]; then
-    SG_ID=$(sh_c aws ec2 create-security-group \
-      --group-name ssh \
-      --description ssh \
-      --vpc-id "$VPC_ID" | jq -r .GroupId)
-  fi
-
-  header security-group-ingress
-  SG_RULES_COUNT=$(aws ec2 describe-security-groups --group-names ssh \
-    | jq -r '.SecurityGroups[0].IpPermissions | length')
-  if [ "$SG_RULES_COUNT" -eq 0 ]; then
-    sh_c aws ec2 authorize-security-group-ingress \
-      --group-id "$SG_ID" \
-      --protocol tcp \
-      --port 22 \
-      --cidr 0.0.0.0/0 >/dev/null
-  fi
-
-  header linux-amd64
-  state=$(aws ec2 describe-instances --filters \
-    'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=d2-builder-linux-amd64' \
-    | jq -r '.Reservations[].Instances[].State.Name')
-  if [ -z "$state" ]; then
-    sh_c aws ec2 run-instances \
-      --image-id=ami-071e6cafc48327ca2 \
-      --count=1 \
-      --instance-type=t2.small \
-      --security-groups=ssh \
-      "--key-name=$KEY_NAME" \
-      --tag-specifications '"ResourceType=instance,Tags=[{Key=Name,Value=d2-builder-linux-amd64}]"' \
-        '"ResourceType=volume,Tags=[{Key=Name,Value=d2-builder-linux-amd64}]"' >/dev/null
-  fi
-  while true; do
-    dnsname=$(sh_c aws ec2 describe-instances \
-      --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=d2-builder-linux-amd64' \
-      | jq -r '.Reservations[].Instances[].PublicDnsName')
-    if [ -n "$dnsname" ]; then
-      log "TSTRUCT_LINUX_AMD64_BUILDER=admin@$dnsname"
-      export TSTRUCT_LINUX_AMD64_BUILDER=admin@$dnsname
-      break
-    fi
-    sleep 5
-  done
-
-  header linux-arm64
-  state=$(aws ec2 describe-instances --filters \
-    'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=d2-builder-linux-arm64' \
-    | jq -r '.Reservations[].Instances[].State.Name')
-  if [ -z "$state" ]; then
-    sh_c aws ec2 run-instances \
-      --image-id=ami-0e67506f183e5ab60 \
-      --count=1 \
-      --instance-type=t4g.small \
-      --security-groups=ssh \
-      "--key-name=$KEY_NAME" \
-      --tag-specifications '"ResourceType=instance,Tags=[{Key=Name,Value=d2-builder-linux-arm64}]"' \
-        '"ResourceType=volume,Tags=[{Key=Name,Value=d2-builder-linux-arm64}]"' >/dev/null
-  fi
-  while true; do
-    dnsname=$(sh_c aws ec2 describe-instances \
-      --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=d2-builder-linux-arm64' \
-      | jq -r '.Reservations[].Instances[].PublicDnsName')
-    if [ -n "$dnsname" ]; then
-      log "TSTRUCT_LINUX_ARM64_BUILDER=admin@$dnsname"
-      export TSTRUCT_LINUX_ARM64_BUILDER=admin@$dnsname
-      break
-    fi
-    sleep 5
-  done
-
-  header "macos-amd64-host"
-  MACOS_AMD64_HOST_ID=$(aws ec2 describe-hosts --filter 'Name=state,Values=pending,available' 'Name=tag:Name,Values=d2-builder-macos-amd64' | jq -r '.Hosts[].HostId')
-  if [ -z "$MACOS_AMD64_HOST_ID" ]; then
-    MACOS_AMD64_HOST_ID=$(sh_c aws ec2 allocate-hosts --instance-type mac1.metal --quantity 1 --availability-zone us-west-2a \
-      --tag-specifications '"ResourceType=dedicated-host,Tags=[{Key=Name,Value=d2-builder-macos-amd64}]"' \
-      | jq -r .HostIds[0])
-  fi
-
-  header "macos-arm64-host"
-  MACOS_ARM64_HOST_ID=$(aws ec2 describe-hosts --filter 'Name=state,Values=pending,available' 'Name=tag:Name,Values=d2-builder-macos-arm64' | jq -r '.Hosts[].HostId')
-  if [ -z "$MACOS_ARM64_HOST_ID" ]; then
-    MACOS_ARM64_HOST_ID=$(sh_c aws ec2 allocate-hosts --instance-type mac2.metal --quantity 1 --availability-zone us-west-2a \
-      --tag-specifications '"ResourceType=dedicated-host,Tags=[{Key=Name,Value=d2-builder-macos-amd64}]"' \
-      | jq -r .HostIds[0])
-  fi
-
-  header macos-amd64
-  state=$(aws ec2 describe-instances --filters \
-    'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=d2-builder-macos-amd64' \
-    | jq -r '.Reservations[].Instances[].State.Name')
-  if [ -z "$state" ]; then
-    sh_c aws ec2 run-instances \
-      --image-id=ami-0dd2ded7568750663 \
-      --count=1 \
-      --instance-type=mac1.metal \
-      --security-groups=ssh \
-      "--key-name=$KEY_NAME" \
-      --placement "Tenancy=host,HostId=$MACOS_AMD64_HOST_ID" \
-      --tag-specifications '"ResourceType=instance,Tags=[{Key=Name,Value=d2-builder-macos-amd64}]"' \
-        '"ResourceType=volume,Tags=[{Key=Name,Value=d2-builder-macos-amd64}]"' >/dev/null
-  fi
-  while true; do
-    dnsname=$(sh_c aws ec2 describe-instances \
-      --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=d2-builder-macos-amd64' \
-      | jq -r '.Reservations[].Instances[].PublicDnsName')
-    if [ -n "$dnsname" ]; then
-      log "TSTRUCT_MACOS_AMD64_BUILDER=ec2-user@$dnsname"
-      export TSTRUCT_MACOS_AMD64_BUILDER=ec2-user@$dnsname
-      break
-    fi
-    sleep 5
-  done
-
-  header macos-arm64
-  state=$(aws ec2 describe-instances --filters \
-    'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=d2-builder-macos-arm64' \
-    | jq -r '.Reservations[].Instances[].State.Name')
-  if [ -z "$state" ]; then
-    sh_c aws ec2 run-instances \
-      --image-id=ami-0af0516ff2c43dbbe \
-      --count=1 \
-      --instance-type=mac2.metal \
-      --security-groups=ssh \
-      "--key-name=$KEY_NAME" \
-      --placement "Tenancy=host,HostId=$MACOS_ARM64_HOST_ID" \
-      --tag-specifications '"ResourceType=instance,Tags=[{Key=Name,Value=d2-builder-macos-arm64}]"' \
-        '"ResourceType=volume,Tags=[{Key=Name,Value=d2-builder-macos-arm64}]"' >/dev/null
-  fi
-  while true; do
-    dnsname=$(sh_c aws ec2 describe-instances \
-      --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' 'Name=tag:Name,Values=d2-builder-macos-arm64' \
-      | jq -r '.Reservations[].Instances[].PublicDnsName')
-    if [ -n "$dnsname" ]; then
-      log "TSTRUCT_MACOS_ARM64_BUILDER=ec2-user@$dnsname"
-      export TSTRUCT_MACOS_ARM64_BUILDER=ec2-user@$dnsname
-      break
-    fi
-    sleep 5
-  done
-}
-
-init_remote_hosts() {
-  header linux-amd64
-  REMOTE_HOST=$TSTRUCT_LINUX_AMD64_BUILDER init_remote_linux
-  header linux-arm64
-  REMOTE_HOST=$TSTRUCT_LINUX_ARM64_BUILDER init_remote_linux
-  header macos-amd64
-  REMOTE_HOST=$TSTRUCT_MACOS_AMD64_BUILDER init_remote_macos
-  header macos-arm64
-  REMOTE_HOST=$TSTRUCT_MACOS_ARM64_BUILDER init_remote_macos
-
-  FGCOLOR=2 header summary
-  log "export TSTRUCT_LINUX_AMD64_BUILDER=$TSTRUCT_LINUX_AMD64_BUILDER"
-  log "export TSTRUCT_LINUX_ARM64_BUILDER=$TSTRUCT_LINUX_ARM64_BUILDER"
-  log "export TSTRUCT_MACOS_AMD64_BUILDER=$TSTRUCT_MACOS_AMD64_BUILDER"
-  log "export TSTRUCT_MACOS_ARM64_BUILDER=$TSTRUCT_MACOS_ARM64_BUILDER"
-}
-
-init_remote_linux() {
-  wait_remote_host
-
-  sh_c ssh "$REMOTE_HOST" sh -s -- <<EOF
-set -eux
-export DEBIAN_FRONTEND=noninteractive
-
-sudo -E apt-get update -y
-sudo -E apt-get dist-upgrade -y
-sudo -E apt-get install -y build-essential rsync
-
-# Docker from https://docs.docker.com/engine/install/debian/
-sudo -E apt-get -y install \
-    ca-certificates \
-    curl \
-    gnupg \
-    lsb-release
-sudo mkdir -p /etc/apt/keyrings
-curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --batch --yes --dearmor -o /etc/apt/keyrings/docker.gpg
-echo \
-  "deb [arch=\$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \
-  \$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
-sudo -E apt-get update -y
-sudo -E apt-get install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
-sudo groupadd docker || true
-sudo usermod -aG docker \$USER
-
-mkdir -p \$HOME/.local/bin
-mkdir -p \$HOME/.local/share/man
-EOF
-  init_remote_env
-
-  sh_c ssh "$REMOTE_HOST" 'sudo reboot' || true
-}
-
-init_remote_macos() {
-  wait_remote_host
-
-  sh_c ssh "$REMOTE_HOST" '"/bin/bash -c \"\$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\""'
-
-  if sh_c ssh "$REMOTE_HOST" uname -m | grep -qF arm64; then
-    shellenv=$(sh_c ssh "$REMOTE_HOST" /opt/homebrew/bin/brew shellenv)
-  else
-    shellenv=$(sh_c ssh "$REMOTE_HOST" /usr/local/bin/brew shellenv)
-  fi
-  if ! echo "$shellenv" | sh_c ssh "$REMOTE_HOST" "IFS= read -r regex\; \"grep -qF \\\"\\\$regex\\\" ~/.zshrc\""; then
-    echo "$shellenv" | sh_c ssh "$REMOTE_HOST" "\"(echo && cat) >> ~/.zshrc\""
-  fi
-  if ! sh_c ssh "$REMOTE_HOST" "'grep -qF \\\$HOME/.local ~/.zshrc'"; then
-    sh_c ssh "$REMOTE_HOST" "\"(echo && cat) >> ~/.zshrc\"" <<EOF
-PATH=\$HOME/.local/bin:\$PATH
-MANPATH=\$HOME/.local/share/man:\$MANPATH
-EOF
-  fi
-
-  init_remote_env
-  sh_c ssh "$REMOTE_HOST" brew update
-  sh_c ssh "$REMOTE_HOST" brew upgrade
-  sh_c ssh "$REMOTE_HOST" brew install go rsync
-}
-
-init_remote_env() {
-  sh_c ssh "$REMOTE_HOST" '"rm -f ~/.ssh/environment"'
-  sh_c ssh "$REMOTE_HOST" '"echo PATH=\$(echo \"echo \\\$PATH\" | \"\$SHELL\" -ils) >\$HOME/.ssh/environment"'
-  sh_c ssh "$REMOTE_HOST" '"echo MANPATH=\$(echo \"echo \\\$MANPATH\" | \"\$SHELL\" -ils) >>\$HOME/.ssh/environment"'
-
-  sh_c ssh "$REMOTE_HOST" "sudo sed -i.bak '\"s/#PermitUserEnvironment no/PermitUserEnvironment yes/\"' /etc/ssh/sshd_config"
-
-  if sh_c ssh "$REMOTE_HOST" uname | grep -qF Darwin; then
-    sh_c ssh "$REMOTE_HOST" "sudo launchctl stop com.openssh.sshd"
-  else
-    sh_c ssh "$REMOTE_HOST" "sudo systemctl restart sshd"
-  fi
-}
-
-wait_remote_host() {
-  while true; do
-    if sh_c ssh "$REMOTE_HOST" true; then
-      break
-    fi
-    sleep 5
-  done
-}
-
-main "$@"

ci/release/changelogs/next.md

@@ -1,18 +1,20 @@
 #### Features 🚀
 
-- Diagram padding can now can be configured in the CLI (default 100px).
+- Diagram padding can now can be configured in the CLI (default 100px). [https://github.com/terrastruct/d2/pull/431](https://github.com/terrastruct/d2/pull/431)
-  [https://github.com/terrastruct/d2/pull/431](https://github.com/terrastruct/d2/pull/431)
+- Connection label backgrounds can now be set with the `style.fill` keyword. [https://github.com/terrastruct/d2/pull/452](https://github.com/terrastruct/d2/pull/452)
+- Add official Docker image. See [./docs/INSTALL.md#docker](./docs/INSTALL.md#docker). [#76](https://github.com/terrastruct/d2/issues/76)
+- Add `.msi` installer for convenient installation on Windows. [#379](https://github.com/terrastruct/d2/issues/379)
 
 #### Improvements 🧹
 
-- Fmt now preserves leading comment spacing.
+- `d2 fmt` now preserves leading comment spacing. [#400](https://github.com/terrastruct/d2/issues/400)
-  [#400](https://github.com/terrastruct/d2/issues/400)
+- Markdown can now be styled with keywords stroke and fill. [https://github.com/terrastruct/d2/pull/460](https://github.com/terrastruct/d2/pull/460)
 
 #### Bugfixes ⛑️
 
-- Fixed crash when sequence diagrams had no messages.
+- Fixed crash when sequence diagrams had no messages. [https://github.com/terrastruct/d2/pull/427](https://github.com/terrastruct/d2/pull/427)
-  [https://github.com/terrastruct/d2/pull/427](https://github.com/terrastruct/d2/pull/427)
+- Fixed `constraint` keyword setting label. [https://github.com/terrastruct/d2/issues/415](https://github.com/terrastruct/d2/issues/415)
-- Fixed `constraint` keyword setting label.
+- Fixed serialization affecting binary plugins (TALA). [https://github.com/terrastruct/d2/pull/426](https://github.com/terrastruct/d2/pull/426)
-  [https://github.com/terrastruct/d2/issues/415](https://github.com/terrastruct/d2/issues/415)
+- Fixed connections in elk layouts not going all the way to shape borders. [https://github.com/terrastruct/d2/pull/459](https://github.com/terrastruct/d2/pull/459)
-- Fixed serialization affecting binary plugins (TALA).
+- Fixed a connection rendering bug that could happen in firefox when there were no connection labels. [https://github.com/terrastruct/d2/pull/453](https://github.com/terrastruct/d2/pull/453)
-  [https://github.com/terrastruct/d2/pull/426](https://github.com/terrastruct/d2/pull/426)
+- Fixed a crash when external connection IDs were prefixes of a sequence diagram ID. [https://github.com/terrastruct/d2/pull/462](https://github.com/terrastruct/d2/pull/462)

ci/release/linux/Dockerfile

@@ -8,5 +8,5 @@ RUN curl -fsSL "https://go.dev/dl/go$GOVERSION.tar.gz" >/tmp/go.tar.gz
 RUN tar -C /usr/local -xzf /tmp/go.tar.gz
 ENV PATH="/usr/local/go/bin:$PATH"
 
-RUN apt-get install -y build-essential
+RUN apt-get install -y build-essential \
-RUN apt-get install -y rsync
+  rsync

ci/release/template/README.md.sh

@@ -20,27 +20,11 @@ EOF
 if [ "$OS" = windows ]; then
   cat <<EOF
 
-We currently do not have an \`.msi\` for automatic installation on Windows so this release
+This release is structured the same as our Unix releases for use with MSYS2.
-is structured the same as our Unix releases.
 
-Easiest way to use \`d2\` on Windows is to just \`chdir\` into the bin directory of this release
+You may find our \`.msi\` installer more convenient as it handles putting \`d2.exe\` into
-and invoke \`d2\` like \`./d2 <full-input-file-path>\`
-
-For installation you'll have to add the \`./bin/d2.exe\` binary to your \`\$PATH\`. Or add
-the \`./bin\` directory of this release to your \`\$PATH\`.
-
-See https://www.wikihow.com/Change-the-PATH-Environment-Variable-on-Windows
-
-Then you'll be able to call \`d2\` from the commandline in \`cmd.exe\` or \`pwsh.exe\`.
-
-We intend to have a \`.msi\` release installer sometime soon that handles putting \`d2.exe\` into
 your \`\$PATH\` for you.
 
-You can also use \`make install\` to install on Windows after first installing
-[MSYS2](https://www.msys2.org/) which emulates a Linux shell for Windows. Its terminal
-also enables \`d2\` to show colors in its output. The manpage will also become accessible
-with \`man d2\`.
-
 See https://github.com/terrastruct/d2/blob/master/docs/INSTALL.md#windows
 EOF
 fi

ci/release/template/scripts/lib.sh

@@ -273,7 +273,7 @@ header() {
 
 bigheader() {
   set -- "$(echo "$*" | sed "s/^/ * /")"
-  FGCOLOR=${FGCOLOR:-3} logp "/****************************************************************
+  FGCOLOR=${FGCOLOR:-6} logp "/****************************************************************
 $*
  ****************************************************************/"
 }

ci/release/windows/.gitignore

@@ -0,0 +1 @@
+d2.exe

ci/release/windows/d2.wxs

@@ -0,0 +1,39 @@
+<!--
+Wix documentation is nonexistent for v4. What exists is largely out of date and inconsistent.
+This file was pieced together from:
+1. https://www.firegiant.com/wix/tutorial/getting-started/
+  - This is for v3, I used wix convert to convert to v4
+2. https://wixtoolset.org/docs/reference/schema/wxs/
+3. Googling with trial and error
+-->
+<Wix xmlns="http://wixtoolset.org/schemas/v4/wxs">
+    <Package Name="D2" UpgradeCode="ac84fee7-eb67-4f5d-a08d-adef69538690" Language="1033" Codepage="utf-8" Version="$(var.D2Version)" Manufacturer="Terrastruct, Inc." InstallerVersion="200">
+        <SummaryInformation Keywords="Installer" Description="The D2 Installer" Manufacturer="Terrastruct, Inc." Codepage="1252" />
+        <Icon Id="d2.ico" SourceFile="d2.ico" />
+        <Property Id="ARPPRODUCTICON" Value="d2.ico" />
+
+        <Media Id="1" Cabinet="D2.cab" EmbedCab="yes" />
+
+        <Feature Id="Complete" Level="1">
+            <ComponentRef Id="Executable" />
+        </Feature>
+
+        <MajorUpgrade AllowSameVersionUpgrades='yes' DowngradeErrorMessage="A later version of [ProductName] is already installed. Setup will now exit."/>
+
+        <StandardDirectory Id="ProgramFiles64Folder">
+            <Directory Id="INSTALLDIR" Name="D2">
+                <Component Id="Executable" Guid="1090d036-c985-461f-94f6-3121dbcfcb48">
+                    <File Id="D2EXE" Name="d2.exe" Source="d2.exe" KeyPath="yes" />
+                    <Environment
+                      Id="D2PathEntry"
+                      Action="set"
+                      Part="last"
+                      Name="PATH"
+                      Permanent="no"
+                      System="yes"
+                      Value="[INSTALLDIR]" />
+                </Component>
+            </Directory>
+        </StandardDirectory>
+    </Package>
+</Wix>

ci/sub

@@ -1 +1 @@
-Subproject commit 7923b353a829cf289171baff0d0d017ae3d32278
+Subproject commit 2db232e4aa5225e22f95ff91914f91b59fe48d07

d2exporter/export.go

@@ -45,6 +45,8 @@ func applyStyles(shape *d2target.Shape, obj *d2graph.Object) {
 	}
 	if obj.Attributes.Style.Fill != nil {
 		shape.Fill = obj.Attributes.Style.Fill.Value
+	} else if obj.Attributes.Shape.Value == d2target.ShapeText {
+		shape.Fill = "transparent"
 	}
 	if obj.Attributes.Style.Stroke != nil {
 		shape.Stroke = obj.Attributes.Style.Stroke.Value
@@ -200,6 +202,10 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
 		connection.StrokeWidth, _ = strconv.Atoi(edge.Attributes.Style.StrokeWidth.Value)
 	}
 
+	if edge.Attributes.Style.Fill != nil {
+		connection.Fill = edge.Attributes.Style.Fill.Value
+	}
+
 	connection.FontSize = text.FontSize
 	if edge.Attributes.Style.FontSize != nil {
 		connection.FontSize, _ = strconv.Atoi(edge.Attributes.Style.FontSize.Value)

d2graph/d2graph.go

@@ -397,7 +397,10 @@ func (obj *Object) GetFill(theme *d2themes.Theme) string {
 
 func (obj *Object) GetStroke(theme *d2themes.Theme, dashGapSize interface{}) string {
 	shape := obj.Attributes.Shape.Value
-	if strings.EqualFold(shape, d2target.ShapeCode) || strings.EqualFold(shape, d2target.ShapeClass) || strings.EqualFold(shape, d2target.ShapeSQLTable) {
+	if strings.EqualFold(shape, d2target.ShapeCode) ||
+		strings.EqualFold(shape, d2target.ShapeClass) ||
+		strings.EqualFold(shape, d2target.ShapeSQLTable) ||
+		strings.EqualFold(shape, d2target.ShapeText) {
 		return theme.Colors.Neutrals.N1
 	}
 	if dashGapSize != 0.0 {

d2layouts/d2elklayout/layout.go

@@ -10,6 +10,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"math"
+	"strings"
 
 	"github.com/dop251/goja"
 
@@ -21,6 +22,7 @@ import (
 	"oss.terrastruct.com/d2/d2target"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
+	"oss.terrastruct.com/d2/lib/shape"
 )
 
 //go:embed elk.js
@@ -289,6 +291,14 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 			})
 		}
 
+		startIndex, endIndex := 0, len(points)-1
+		srcShape := shape.NewShape(d2target.DSL_SHAPE_TO_SHAPE_TYPE[strings.ToLower(edge.Src.Attributes.Shape.Value)], edge.Src.Box)
+		dstShape := shape.NewShape(d2target.DSL_SHAPE_TO_SHAPE_TYPE[strings.ToLower(edge.Dst.Attributes.Shape.Value)], edge.Dst.Box)
+
+		// trace the edge to the specific shape's border
+		points[startIndex] = shape.TraceToShapeBorder(srcShape, points[startIndex], points[startIndex+1])
+		points[endIndex] = shape.TraceToShapeBorder(dstShape, points[endIndex], points[endIndex-1])
+
 		if edge.Attributes.Label.Value != "" {
 			edge.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))
 		}

d2layouts/d2sequence/layout.go

@@ -88,7 +88,7 @@ func layoutSequenceDiagram(g *d2graph.Graph, obj *d2graph.Object) (*sequenceDiag
 	var edges []*d2graph.Edge
 	for _, edge := range g.Edges {
 		// both Src and Dst must be inside the sequence diagram
-		if strings.HasPrefix(edge.Src.AbsID(), obj.AbsID()) && strings.HasPrefix(edge.Dst.AbsID(), obj.AbsID()) {
+		if obj == g.Root || (strings.HasPrefix(edge.Src.AbsID(), obj.AbsID()+".") && strings.HasPrefix(edge.Dst.AbsID(), obj.AbsID()+".")) {
 			edges = append(edges, edge)
 		}
 	}

d2layouts/d2sequence/sequence_diagram.go

@@ -466,8 +466,8 @@ func (sd *sequenceDiagram) routeMessages() error {
 		} else {
 			return fmt.Errorf("could not find center of %s", message.Dst.AbsID())
 		}
-		isToDescendant := strings.HasPrefix(message.Dst.AbsID(), message.Src.AbsID())
+		isToDescendant := strings.HasPrefix(message.Dst.AbsID(), message.Src.AbsID()+".")
-		isFromDescendant := strings.HasPrefix(message.Src.AbsID(), message.Dst.AbsID())
+		isFromDescendant := strings.HasPrefix(message.Src.AbsID(), message.Dst.AbsID()+".")
 		isSelfMessage := message.Src == message.Dst
 
 		if isSelfMessage || isToDescendant || isFromDescendant {

d2renderers/d2svg/d2svg.go

@@ -432,6 +432,11 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		if connection.Color != "" {
 			fontColor = connection.Color
 		}
+
+		if connection.Fill != "" {
+			fmt.Fprintf(writer, `<rect x="%f" y="%f" width="%d" height="%d" style="fill:%s" />`,
+				labelTL.X, labelTL.Y, connection.LabelWidth, connection.LabelHeight, connection.Fill)
+		}
 		textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", connection.FontSize, fontColor)
 		x := labelTL.X + float64(connection.LabelWidth)/2
 		y := labelTL.Y + float64(connection.FontSize)
@@ -765,7 +770,16 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) (labelMask string,
 				)
 				// we need the self closing form in this svg/xhtml context
 				render = strings.ReplaceAll(render, "<hr>", "<hr />")
-				fmt.Fprintf(writer, `<div xmlns="http://www.w3.org/1999/xhtml" class="md">%v</div>`, render)
+
+				var mdStyle string
+				if targetShape.Fill != "" {
+					mdStyle = fmt.Sprintf("background-color:%s;", targetShape.Fill)
+				}
+				if targetShape.Stroke != "" {
+					mdStyle += fmt.Sprintf("color:%s;", targetShape.Stroke)
+				}
+
+				fmt.Fprintf(writer, `<div xmlns="http://www.w3.org/1999/xhtml" class="md" style="%s">%v</div>`, mdStyle, render)
 				fmt.Fprint(writer, `</foreignObject></g>`)
 			}
 		default:
@@ -1015,23 +1029,22 @@ func Render(diagram *d2target.Diagram, pad int) ([]byte, error) {
 				labelMasks = append(labelMasks, labelMask)
 			}
 		} else {
-			return nil, fmt.Errorf("unknow object of type %T", obj)
+			return nil, fmt.Errorf("unknown object of type %T", obj)
 		}
 	}
 
-	if len(labelMasks) > 0 {
+	// Note: we always want this since we reference it on connections even if there end up being no masked labels
-		fmt.Fprint(buf, strings.Join([]string{
+	fmt.Fprint(buf, strings.Join([]string{
-			fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="0" y="0" width="%d" height="%d">`,
+		fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="0" y="0" width="%d" height="%d">`,
-				labelMaskID, w, h,
+			labelMaskID, w, h,
-			),
+		),
-			fmt.Sprintf(`<rect x="0" y="0" width="%d" height="%d" fill="white"></rect>`,
+		fmt.Sprintf(`<rect x="0" y="0" width="%d" height="%d" fill="white"></rect>`,
-				w,
+			w,
-				h,
+			h,
-			),
+		),
-			strings.Join(labelMasks, "\n"),
+		strings.Join(labelMasks, "\n"),
-			`</mask>`,
+		`</mask>`,
-		}, "\n"))
+	}, "\n"))
-	}
 
 	embedFonts(buf)
 

d2target/d2target.go

@@ -207,6 +207,7 @@ type Connection struct {
 	StrokeDash  float64 `json:"strokeDash"`
 	StrokeWidth int     `json:"strokeWidth"`
 	Stroke      string  `json:"stroke"`
+	Fill        string  `json:"fill,omitempty"`
 
 	Text
 	LabelPosition   string  `json:"labelPosition"`

docs/CONTRIBUTING.md

@@ -1,19 +1,14 @@
 # Contributing
 
 <!-- toc -->
-
+- <a href="#ci" id="toc-ci">CI</a>
-- [CI](#ci)
+- <a href="#flow" id="toc-flow">Flow</a>
-- [Flow](#flow)
+- <a href="#logistics" id="toc-logistics">Logistics</a>
-- [Logistics](#logistics)
+- <a href="#dev" id="toc-dev">Dev</a>
-- [Dev](#dev)
+  - <a href="#content" id="toc-content">Content</a>
-  * [Content](#content)
+  - <a href="#tests" id="toc-tests">Tests</a>
-  * [Tests](#tests)
+  - <a href="#documentation" id="toc-documentation">Documentation</a>
-    + [Running tests](#running-tests)
+  - <a href="#questions" id="toc-questions">Questions</a>
-    + [Chaos tests](#chaos-tests)
-  * [Documentation](#documentation)
-  * [Questions](#questions)
-
-<!-- tocstop -->
 
 ## CI
 

docs/INSTALL.md

@@ -14,8 +14,9 @@ You may install `d2` through any of the following methods.
 - <a href="#from-source" id="toc-from-source">From source</a>
   - <a href="#source-release" id="toc-source-release">Source Release</a>
 - <a href="#windows" id="toc-windows">Windows</a>
-  - <a href="#msys2" id="toc-msys2">MSYS2</a>
+  - <a href="#release-archives" id="toc-release-archives">Release archives</a>
   - <a href="#wsl" id="toc-wsl">WSL</a>
+- <a href="#docker" id="toc-docker">Docker</a>
 - <a href="#coming-soon" id="toc-coming-soon">Coming soon</a>
 
 ## install.sh
@@ -157,6 +158,8 @@ You can always install from source:
 go install oss.terrastruct.com/d2@latest
 ```
 
+You need at least Go v1.18
+
 ### Source Release
 
 To install a release from source clone the repository and then:
@@ -172,33 +175,23 @@ fonts and icons. Furthermore, when installing a non versioned commit, installing
 will ensure that `d2 --version` works correctly by embedding the commit hash into the `d2`
 binary.
 
+Remember, you need at least Go v1.18
+
 ## Windows
 
-d2 builds and runs on Windows:
+We have prebuilt releases of d2 available for Windows via `.msi` installers. The installer
+will add the `d2` binary to your `$PATH` so that you can execute `d2` in `cmd.exe` or
+`pwsh.exe`.
 
-We have prebuilt standalone releases for Windows though they're structured in the same way
+### Release archives
-as our Unix releases.
 
-Easiest way to use d2 on Windows is to just `chdir` into the bin directory of the release
+We also have release archives for Windows structured in the same way as our Unix releases
-and invoke d2 like `./d2 <full-input-file-path>`
+for use with MSYS2.
-
-For installation, you'll have to put the `bin/d2.exe` binary into your `$PATH` or add the
-`bin` directory of the release into your `$PATH`.
-
-See https://www.wikihow.com/Change-the-PATH-Environment-Variable-on-Windows
-
-Then you'll be able to call `d2` from the commandline in `cmd.exe` or `pwsh.exe`.
-
-We intend to have a `.msi` release installer sometime soon that handles putting `d2` into
-your `$PATH` for you.
-
-### MSYS2
 
 <img width="1680" alt="Screenshot 2022-12-06 at 2 55 27 AM" src="https://user-images.githubusercontent.com/10180857/205892927-6f3e116c-1c4a-440a-9972-82c306aa9779.png">
 
-We recommend using [MSYS2](https://www.msys2.org/) or [Git
+See [MSYS2](https://www.msys2.org/) or [Git Bash](https://gitforwindows.org/#bash) (Git
-Bash](https://gitforwindows.org/#bash) (Git Bash is based on MSYS2) for an improved
+Bash is based on MSYS2).
-terminal experience.
 
 MSYS2 provides a unix style shell environment that is native to Windows (unlike
 [Cygwin](https://www.cygwin.com/)). MSYS2 allows `install.sh` to work, enables automatic
@@ -216,9 +209,23 @@ under plain Windows.
 aka Windows Subsystem for Linux if that's what you prefer. Installation is just like any
 other Linux system.
 
+## Docker
+
+https://hub.docker.com/repository/docker/terrastruct/d2
+
+We publish `amd64` and `arm64` images based on `debian:latest` for each release.
+
+Example usage:
+
+```sh
+echo 'x -> y' >helloworld.d2
+docker run --rm -it -u "$(id -u):$(id -g)" -v "$PWD:/root/src" \
+  -p 127.0.0.1:8080:8080 terrastruct/d2 --watch helloworld.d2
+# Visit http://127.0.0.1:8080
+```
+
 ## Coming soon
 
-- Docker image
 - rpm and deb packages
     - with repositories and standalone
 - homebrew core

e2etests/regression_test.go

@@ -40,6 +40,18 @@ b.1 -> b.1`,
 a: A
 b: B`,
 		},
+		{
+			name: "sequence_diagram_name_crash",
+			script: `foo: {
+	shape: sequence_diagram
+	a -> b
+}
+foobar: {
+	shape: sequence_diagram
+	c -> d
+}
+foo -> foobar`,
+		},
 	}
 
 	runa(t, tcs)

e2etests/stable_test.go

@@ -917,12 +917,13 @@ y: {
   }
 }
 
-x -> y: {
+x -> y: in style {
   style: {
     stroke: green
     opacity: 0.5
     stroke-width: 2
     stroke-dash: 5
+	fill: lavender
   }
 }
 `,
@@ -1041,6 +1042,7 @@ size S -> size M: custom 15 {
 }
 size XXXL -> custom 64: custom 48 {
 	style.font-size: 48
+	style.fill: lavender
 }
 `,
 		}, {
@@ -1481,6 +1483,36 @@ a.note: "just\na\nlong\nnote\nhere"`,
 			script: `shape: sequence_diagram
 alice -> bob: what does it mean to be well-adjusted
 bob -> alice: The ability to play bridge or golf as if they were games
+`,
+		},
+		{
+			name: "markdown_stroke_fill",
+			script: `
+container.md: |md
+# a header
+
+a line of text and an
+
+	{
+		indented: "block",
+		of: "json",
+	}
+
+walk into a bar.
+| {
+	style.stroke: darkorange
+}
+
+container -> no container
+
+no container: |md
+they did it in style
+|
+
+no container.style: {
+	stroke: red
+	fill: "#CEEDEE"
+}
 `,
 		},
 	}

e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="1427" height="568" viewBox="-100 -100 1427 568"><style type="text/css">
 }
 
 ]]>
-</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0" y="0" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="75.500000" dy="0.000000">ninety</tspan><tspan x="75.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="211" y="8" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="422" y="0" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="503.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="503.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="503.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="644" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="721.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="864" y="242" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.500000" y="308.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="858" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="1072" y="8" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1149.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 721.000000 136.000000 C 721.000000 180.400000 749.500000 207.049065 859.962840 265.377574" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 935.000000 136.000000 C 935.000000 180.400000 935.000000 202.000000 935.000000 238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 1149.500000 136.000000 C 1149.500000 180.400000 1120.900000 207.000000 1010.042356 265.142121" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><style type="text/css"><![CDATA[
+</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="0" y="0" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="75.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="75.500000" dy="0.000000">ninety</tspan><tspan x="75.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="211" y="8" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="286.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="422" y="0" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="503.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="503.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="503.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="644" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="721.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="864" y="242" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.500000" y="308.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="858" y="8" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="935.000000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="1072" y="8" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1149.500000" y="74.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 721.000000 136.000000 C 721.000000 180.400000 749.500000 207.049065 859.962840 265.377574" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 935.000000 136.000000 C 935.000000 180.400000 935.000000 202.000000 935.000000 238.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 1149.500000 136.000000 C 1149.500000 180.400000 1120.900000 207.000000 1010.042356 265.142121" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4049001157)"/></g><mask id="4049001157" maskUnits="userSpaceOnUse" x="0" y="0" width="1427" height="568">
+<rect x="0" y="0" width="1427" height="568" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="1227" height="568" viewBox="-88 -88 1227 568"><style type="text/css">
 }
 
 ]]>
-</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="714" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="789.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="789.500000" dy="0.000000">ninety</tspan><tspan x="789.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="194" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="269.500000" y="86.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="12" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="93.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="93.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="93.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="885" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="962.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="546" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="617.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="540" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="617.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="365" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="442.500000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 962.000000 156.000000 L 962.000000 194.000000 S 962.000000 204.000000 952.000000 204.000000 L 662.750000 204.000000 S 652.750000 204.000000 652.750000 214.000000 L 652.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 617.000000 156.000000 L 617.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 442.500000 156.000000 L 442.500000 194.000000 S 442.500000 204.000000 452.500000 204.000000 L 571.250000 204.000000 S 581.250000 204.000000 581.250000 214.000000 L 581.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><style type="text/css"><![CDATA[
+</style><g id="&#34;ninety\nnine&#34;"><g class="shape" ><rect x="714" y="12" width="151" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="789.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="789.500000" dy="0.000000">ninety</tspan><tspan x="789.500000" dy="21.000000">nine</tspan></text></g><g id="eighty&#xD;eight"><g class="shape" ><rect x="194" y="20" width="151" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="269.500000" y="86.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eighty&#xD;eight</text></g><g id="&#34;seventy&#xD;\nseven&#34;"><g class="shape" ><rect x="12" y="12" width="162" height="142" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="93.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="93.000000" dy="0.000000">seventy&#xD;</tspan><tspan x="93.000000" dy="21.000000">seven</tspan></text></g><g id="&#34;a\\yode&#34;"><g class="shape" ><rect x="885" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="962.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\yode</text></g><g id="there"><g class="shape" ><rect x="546" y="254" width="143" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="617.500000" y="320.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">there</text></g><g id="&#39;a\&#34;ode&#39;"><g class="shape" ><rect x="540" y="28" width="154" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="617.000000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\&#34;ode</text></g><g id="&#34;a\\node&#34;"><g class="shape" ><rect x="365" y="28" width="155" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="442.500000" y="94.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a\node</text></g><g id="(&#34;a\\yode&#34; -&gt; there)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 962.000000 156.000000 L 962.000000 194.000000 S 962.000000 204.000000 952.000000 204.000000 L 662.750000 204.000000 S 652.750000 204.000000 652.750000 214.000000 L 652.750000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><g id="(&#39;a\&#34;ode&#39; -&gt; there)[0]"><path d="M 617.000000 156.000000 L 617.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><g id="(&#34;a\\node&#34; -&gt; there)[0]"><path d="M 442.500000 156.000000 L 442.500000 194.000000 S 442.500000 204.000000 452.500000 204.000000 L 571.250000 204.000000 S 581.250000 204.000000 581.250000 214.000000 L 581.250000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3044386072)"/></g><mask id="3044386072" maskUnits="userSpaceOnUse" x="0" y="0" width="1227" height="568">
+<rect x="0" y="0" width="1227" height="568" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="366" height="552" viewBox="-100 -100 366 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="A"><g class="shape" ><rect x="13" y="0" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="0" y="226" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 83.000000 127.000000 C 83.000000 166.000000 83.000000 186.000000 83.000000 223.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3774985050)"/></g><style type="text/css"><![CDATA[
+</style><g id="A"><g class="shape" ><rect x="13" y="0" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="0" y="226" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="83.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 83.000000 127.000000 C 83.000000 166.000000 83.000000 186.000000 83.000000 223.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3774985050)"/></g><mask id="3774985050" maskUnits="userSpaceOnUse" x="0" y="0" width="366" height="552">
+<rect x="0" y="0" width="366" height="552" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="366" height="552" viewBox="-88 -88 366 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="A"><g class="shape" ><rect x="25" y="12" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="238" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 95.000000 139.000000 L 95.000000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1550694221)"/></g><style type="text/css"><![CDATA[
+</style><g id="A"><g class="shape" ><rect x="25" y="12" width="140" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><g id="B"><g class="shape" ><rect x="12" y="238" width="166" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:0;" /></g><text class="text-bold" x="95.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">goodbye</text></g><g id="(A -&gt; B)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 95.000000 139.000000 L 95.000000 235.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1550694221)"/></g><mask id="1550694221" maskUnits="userSpaceOnUse" x="0" y="0" width="366" height="552">
+<rect x="0" y="0" width="366" height="552" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/regression/sequence_diagram_name_crash/dagre/board.exp.json

@@ -0,0 +1,529 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "foo",
+      "type": "sequence_diagram",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 448,
+      "height": 520,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 0,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "foo",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 43,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "foobar",
+      "type": "sequence_diagram",
+      "pos": {
+        "x": 0,
+        "y": 620
+      },
+      "width": 448,
+      "height": 520,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 0,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "foobar",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 84,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "foo.a",
+      "type": "",
+      "pos": {
+        "x": 24,
+        "y": 110
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foo.b",
+      "type": "",
+      "pos": {
+        "x": 274,
+        "y": 110
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foobar.c",
+      "type": "",
+      "pos": {
+        "x": 24,
+        "y": 730
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "c",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foobar.d",
+      "type": "",
+      "pos": {
+        "x": 274,
+        "y": 730
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "d",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [
+    {
+      "id": "foo.(a -> b)[0]",
+      "src": "foo.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foo.b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 99,
+          "y": 366
+        },
+        {
+          "x": 349,
+          "y": 366
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 4
+    },
+    {
+      "id": "foobar.(c -> d)[0]",
+      "src": "foobar.c",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foobar.d",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 99,
+          "y": 986
+        },
+        {
+          "x": 349,
+          "y": 986
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 4
+    },
+    {
+      "id": "(foo -> foobar)[0]",
+      "src": "foo",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foobar",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 224,
+          "y": 520
+        },
+        {
+          "x": 224,
+          "y": 560
+        },
+        {
+          "x": 224,
+          "y": 580
+        },
+        {
+          "x": 224,
+          "y": 620
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(foo.a -- )[0]",
+      "src": "foo.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a-lifeline-end-2251863791",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 99,
+          "y": 236
+        },
+        {
+          "x": 99,
+          "y": 496
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foo.b -- )[0]",
+      "src": "foo.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "b-lifeline-end-668380428",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 349,
+          "y": 236
+        },
+        {
+          "x": 349,
+          "y": 496
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foobar.c -- )[0]",
+      "src": "foobar.c",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "c-lifeline-end-955173837",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 99,
+          "y": 856
+        },
+        {
+          "x": 99,
+          "y": 1116
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foobar.d -- )[0]",
+      "src": "foobar.d",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "d-lifeline-end-2106864010",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 349,
+          "y": 856
+        },
+        {
+          "x": 349,
+          "y": 1116
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    }
+  ]
+}

e2etests/testdata/regression/sequence_diagram_name_crash/elk/board.exp.json

@@ -0,0 +1,520 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "foo",
+      "type": "sequence_diagram",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 448,
+      "height": 520,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 0,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "foo",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 43,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "foobar",
+      "type": "sequence_diagram",
+      "pos": {
+        "x": 12,
+        "y": 632
+      },
+      "width": 448,
+      "height": 520,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 0,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "foobar",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 84,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "foo.a",
+      "type": "",
+      "pos": {
+        "x": 36,
+        "y": 122
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foo.b",
+      "type": "",
+      "pos": {
+        "x": 286,
+        "y": 122
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foobar.c",
+      "type": "",
+      "pos": {
+        "x": 36,
+        "y": 742
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "c",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foobar.d",
+      "type": "",
+      "pos": {
+        "x": 286,
+        "y": 742
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "d",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [
+    {
+      "id": "foo.(a -> b)[0]",
+      "src": "foo.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foo.b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 111,
+          "y": 378
+        },
+        {
+          "x": 361,
+          "y": 378
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 4
+    },
+    {
+      "id": "foobar.(c -> d)[0]",
+      "src": "foobar.c",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foobar.d",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 111,
+          "y": 998
+        },
+        {
+          "x": 361,
+          "y": 998
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 4
+    },
+    {
+      "id": "(foo -> foobar)[0]",
+      "src": "foo",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foobar",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 236,
+          "y": 532
+        },
+        {
+          "x": 236,
+          "y": 632
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(foo.a -- )[0]",
+      "src": "foo.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a-lifeline-end-2251863791",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 111,
+          "y": 248
+        },
+        {
+          "x": 111,
+          "y": 508
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foo.b -- )[0]",
+      "src": "foo.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "b-lifeline-end-668380428",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 361,
+          "y": 248
+        },
+        {
+          "x": 361,
+          "y": 508
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foobar.c -- )[0]",
+      "src": "foobar.c",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "c-lifeline-end-955173837",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 111,
+          "y": 868
+        },
+        {
+          "x": 111,
+          "y": 1128
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foobar.d -- )[0]",
+      "src": "foobar.d",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "d-lifeline-end-2106864010",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 361,
+          "y": 868
+        },
+        {
+          "x": 361,
+          "y": 1128
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    }
+  ]
+}

e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="600" height="456" viewBox="-76 -26 600 456"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="456">
+<rect x="0" y="0" width="600" height="456" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="600" height="456" viewBox="-76 -26 600 456"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">A</text></g><g id="b"><g class="shape" ><rect x="274" y="74" width="150" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="349.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">B</text></g><g id="(a -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><g id="(b -- )[0]"><path d="M 349.000000 202.000000 L 349.000000 329.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#1373979537)"/></g><mask id="1373979537" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="456">
+<rect x="0" y="0" width="600" height="456" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="375" height="796" viewBox="-76 -26 375 796"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><style type="text/css"><![CDATA[
+</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="0" y="0" width="375" height="796">
+<rect x="0" y="0" width="375" height="796" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="375" height="796" viewBox="-76 -26 375 796"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><style type="text/css"><![CDATA[
+</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 669.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#2289024205)"/></g><g id="b.1"><g class="shape" ><rect x="93" y="314" width="12" height="242" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g></g><g id="b.(1 -&gt; 1)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 330.000000 L 189.000000 330.000000 S 199.000000 330.000000 199.000000 340.000000 L 199.000000 400.000000 S 199.000000 410.000000 189.000000 410.000000 L 109.000000 410.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><g id="b.(1 -&gt; 1)[1]"><path d="M 107.000000 460.000000 L 189.000000 460.000000 S 199.000000 460.000000 199.000000 470.000000 L 199.000000 530.000000 S 199.000000 540.000000 189.000000 540.000000 L 109.000000 540.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2289024205)"/></g><mask id="2289024205" maskUnits="userSpaceOnUse" x="0" y="0" width="375" height="796">
+<rect x="0" y="0" width="375" height="796" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="486" height="552" viewBox="-100 -100 486 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="87" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="173" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 93.558654 127.588117 C 64.154867 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><g id="(a -&gt; c)[0]"><path d="M 192.441346 127.588117 C 221.845133 166.000000 229.500000 186.000000 229.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="87" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="143.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="173" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="229.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 93.558654 127.588117 C 64.154867 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><g id="(a -&gt; c)[0]"><path d="M 192.441346 127.588117 C 221.845133 166.000000 229.500000 186.000000 229.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1704832080)"/></g><mask id="1704832080" maskUnits="userSpaceOnUse" x="0" y="0" width="486" height="552">
+<rect x="0" y="0" width="486" height="552" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="446" height="552" viewBox="-88 -88 446 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="31" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3433333173)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3433333173)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="31" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="87.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="145" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="201.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3433333173)"/></g><g id="(a -&gt; c)[0]"><path d="M 106.166667 140.000000 L 106.166667 178.000000 S 106.166667 188.000000 116.166667 188.000000 L 191.500000 188.000000 S 201.500000 188.000000 201.500000 198.000000 L 201.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3433333173)"/></g><mask id="3433333173" maskUnits="userSpaceOnUse" x="0" y="0" width="446" height="552">
+<rect x="0" y="0" width="446" height="552" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/sanity/basic/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2910090598)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2910090598)"/></g><mask id="2910090598" maskUnits="userSpaceOnUse" x="0" y="0" width="313" height="552">
+<rect x="0" y="0" width="313" height="552" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/sanity/basic/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="313" height="552" viewBox="-88 -88 313 552"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#26378777)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 68.500000 140.000000 L 68.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#26378777)"/></g><mask id="26378777" maskUnits="userSpaceOnUse" x="0" y="0" width="313" height="552">
+<rect x="0" y="0" width="313" height="552" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="414" height="752" viewBox="-100 -100 414 752"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="1" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="51" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="50" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 178.000000 C 107.000000 216.000000 107.000000 236.000000 107.000000 251.000000 C 107.000000 266.000000 107.000000 336.000000 107.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2635509857)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="1" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="0" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="107.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="51" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="50" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="107.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 107.000000 178.000000 C 107.000000 216.000000 107.000000 236.000000 107.000000 251.000000 C 107.000000 266.000000 107.000000 336.000000 107.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2635509857)"/></g><mask id="2635509857" maskUnits="userSpaceOnUse" x="0" y="0" width="414" height="752">
+<rect x="0" y="0" width="414" height="752" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="464" height="862" viewBox="-88 -88 464 862"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="13" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="88" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2473032921)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="13" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="12" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="144.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="a.b"><g class="shape" ><rect x="88" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="87" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="144.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 144.000000 215.000000 L 144.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2473032921)"/></g><mask id="2473032921" maskUnits="userSpaceOnUse" x="0" y="0" width="464" height="862">
+<rect x="0" y="0" width="464" height="862" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/sanity/empty/dagre/sketch.exp.svg

@@ -18,4 +18,7 @@ width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css"><![CDATA[]]></style></svg>
+</style><mask id="121760133" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
+<rect x="0" y="0" width="200" height="200" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[]]></style></svg>

e2etests/testdata/sanity/empty/elk/sketch.exp.svg

@@ -18,4 +18,7 @@ width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
 }
 
 ]]>
-</style><style type="text/css"><![CDATA[]]></style></svg>
+</style><mask id="121760133" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
+<rect x="0" y="0" width="200" height="200" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[]]></style></svg>

e2etests/testdata/stable/all_shapes/elk/board.exp.json

@@ -752,7 +752,7 @@
           "y": 392
         },
         {
-          "x": 854.5,
+          "x": 855,
           "y": 492
         }
       ],
@@ -827,7 +827,7 @@
       "route": [
         {
           "x": 1062,
-          "y": 378
+          "y": 361
         },
         {
           "x": 1062,
@@ -865,11 +865,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 93.5,
+          "x": 93,
           "y": 138
         },
         {
-          "x": 93.5,
+          "x": 94,
           "y": 252
         }
       ],
@@ -904,11 +904,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 93.5,
+          "x": 93,
           "y": 378
         },
         {
-          "x": 93.5,
+          "x": 94,
           "y": 492
         }
       ],
@@ -943,11 +943,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 290.5,
+          "x": 291,
           "y": 138
         },
         {
-          "x": 290.5,
+          "x": 291,
           "y": 252
         }
       ],
@@ -982,11 +982,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 290.5,
+          "x": 290,
           "y": 378
         },
         {
-          "x": 290.5,
+          "x": 291,
           "y": 492
         }
       ],
@@ -1099,12 +1099,12 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 478.5,
+          "x": 478,
           "y": 138
         },
         {
-          "x": 478.5,
+          "x": 479,
-          "y": 238
+          "y": 240
         }
       ],
       "animated": false,

e2etests/testdata/stable/all_shapes_multiple/elk/board.exp.json

@@ -752,7 +752,7 @@
           "y": 392
         },
         {
-          "x": 854.5,
+          "x": 855,
           "y": 492
         }
       ],
@@ -827,7 +827,7 @@
       "route": [
         {
           "x": 1062,
-          "y": 378
+          "y": 361
         },
         {
           "x": 1062,
@@ -865,11 +865,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 93.5,
+          "x": 93,
           "y": 138
         },
         {
-          "x": 93.5,
+          "x": 94,
           "y": 252
         }
       ],
@@ -904,11 +904,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 93.5,
+          "x": 93,
           "y": 378
         },
         {
-          "x": 93.5,
+          "x": 94,
           "y": 492
         }
       ],
@@ -943,11 +943,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 290.5,
+          "x": 291,
           "y": 138
         },
         {
-          "x": 290.5,
+          "x": 291,
           "y": 252
         }
       ],
@@ -982,11 +982,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 290.5,
+          "x": 290,
           "y": 378
         },
         {
-          "x": 290.5,
+          "x": 291,
           "y": 492
         }
       ],
@@ -1099,12 +1099,12 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 478.5,
+          "x": 478,
           "y": 138
         },
         {
-          "x": 478.5,
+          "x": 479,
-          "y": 238
+          "y": 240
         }
       ],
       "animated": false,

e2etests/testdata/stable/all_shapes_shadow/elk/board.exp.json

@@ -752,7 +752,7 @@
           "y": 392
         },
         {
-          "x": 854.5,
+          "x": 855,
           "y": 492
         }
       ],
@@ -827,7 +827,7 @@
       "route": [
         {
           "x": 1062,
-          "y": 378
+          "y": 361
         },
         {
           "x": 1062,
@@ -865,11 +865,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 93.5,
+          "x": 93,
           "y": 138
         },
         {
-          "x": 93.5,
+          "x": 94,
           "y": 252
         }
       ],
@@ -904,11 +904,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 93.5,
+          "x": 93,
           "y": 378
         },
         {
-          "x": 93.5,
+          "x": 94,
           "y": 492
         }
       ],
@@ -943,11 +943,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 290.5,
+          "x": 291,
           "y": 138
         },
         {
-          "x": 290.5,
+          "x": 291,
           "y": 252
         }
       ],
@@ -982,11 +982,11 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 290.5,
+          "x": 290,
           "y": 378
         },
         {
-          "x": 290.5,
+          "x": 291,
           "y": 492
         }
       ],
@@ -1099,12 +1099,12 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 478.5,
+          "x": 478,
           "y": 138
         },
         {
-          "x": 478.5,
+          "x": 479,
-          "y": 238
+          "y": 240
         }
       ],
       "animated": false,

e2etests/testdata/stable/arrowhead_adjustment/elk/board.exp.json

@@ -235,7 +235,7 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 49.66666666666667,
+          "x": 50,
           "y": 138
         },
         {
@@ -278,8 +278,8 @@
           "y": 374
         },
         {
-          "x": 178.33333333333331,
+          "x": 178,
-          "y": 474
+          "y": 477
         }
       ],
       "animated": false,
@@ -313,8 +313,8 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 77.91666666666667,
+          "x": 78,
-          "y": 138
+          "y": 120
         },
         {
           "x": 77.91666666666667,
@@ -360,8 +360,8 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 211.66666666666666,
+          "x": 212,
-          "y": 474
+          "y": 477
         },
         {
           "x": 211.66666666666666,
@@ -380,8 +380,8 @@
           "y": 188
         },
         {
-          "x": 106.16666666666667,
+          "x": 106,
-          "y": 138
+          "y": 103
         }
       ],
       "animated": false,

e2etests/testdata/stable/chaos1/elk/board.exp.json

@@ -269,7 +269,7 @@
       "route": [
         {
           "x": 303,
-          "y": 138
+          "y": 121
         },
         {
           "x": 303,

e2etests/testdata/stable/chaos1/elk/sketch.exp.svg

@@ -18,10 +18,10 @@ width="630" height="869" viewBox="-88 -88 630 869"><style type="text/css">
 }
 
 ]]>
-</style><g id="aaa"><g class="shape" ><rect x="12" y="364" width="430" height="317" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="227.000000" y="397.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 85 36 C 85 12 144.85 12 151.5 12 C 158.15 12 218 12 218 36 V 114 C 218 138 158.15 138 151.5 138 C 144.85 138 85 138 85 114 V 36 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 85 36 C 85 60 144.85 60 151.5 60 C 158.15 60 218 60 218 36" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="151.500000" y="90.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 238 120.5231 L 238 12 L 368 12 L 368 120.5231 C 346.3333 97.2206 324.6667 97.2206 303 120.5231 C 281.3333 143.8256 259.6667 143.8256 238 120.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="303.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 87 439 V 520 H 153 V 565 L 183 520 H 219 V 439 H 87 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="153.000000" y="482.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="239" y="439" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="303.000000" y="505.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 303.000000 567.000000 L 303.000000 679.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#3854911297)"/><text class="text-italic" x="303.500000" y="629.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 303.000000 142.000000 L 303.000000 437.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#3854911297)"/><text class="text-italic" x="303.500000" y="294.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="3854911297" maskUnits="userSpaceOnUse" x="0" y="0" width="630" height="869">
+</style><g id="aaa"><g class="shape" ><rect x="12" y="364" width="430" height="317" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="227.000000" y="397.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">aaa</text></g><g id="ddd"><g class="shape" ><path d="M 85 36 C 85 12 144.85 12 151.5 12 C 158.15 12 218 12 218 36 V 114 C 218 138 158.15 138 151.5 138 C 144.85 138 85 138 85 114 V 36 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 85 36 C 85 60 144.85 60 151.5 60 C 158.15 60 218 60 218 36" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="151.500000" y="90.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ddd</text></g><g id="eee"><g class="shape" ><path d="M 238 120.5231 L 238 12 L 368 12 L 368 120.5231 C 346.3333 97.2206 324.6667 97.2206 303 120.5231 C 281.3333 143.8256 259.6667 143.8256 238 120.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="303.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">eee</text></g><g id="aaa.bbb"><g class="shape" ><path d="M 87 439 V 520 H 153 V 565 L 183 520 H 219 V 439 H 87 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="153.000000" y="482.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">bbb</text></g><g id="aaa.ccc"><g class="shape" ><rect x="239" y="439" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="303.000000" y="505.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">ccc</text></g><g id="(aaa.ccc -- aaa)[0]"><path d="M 303.000000 567.000000 L 303.000000 679.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="629.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">111</text></g><g id="(eee &lt;- aaa.ccc)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><path d="M 303.000000 125.000000 L 303.000000 437.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" mask="url(#4025362291)"/><text class="text-italic" x="303.500000" y="286.000000" style="text-anchor:middle;font-size:16px;fill:#676C7E">222</text></g><mask id="4025362291" maskUnits="userSpaceOnUse" x="0" y="0" width="630" height="869">
 <rect x="0" y="0" width="630" height="869" fill="white"></rect>
 <rect x="292.000000" y="613.000000" width="23" height="21" fill="black"></rect>
-<rect x="291.000000" y="278.000000" width="25" height="21" fill="black"></rect>
+<rect x="291.000000" y="270.000000" width="25" height="21" fill="black"></rect>
 </mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";

e2etests/testdata/stable/chaos2/dagre/board.exp.json

@@ -174,8 +174,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -253,8 +253,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -532,8 +532,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,

e2etests/testdata/stable/chaos2/elk/board.exp.json

@@ -174,8 +174,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -253,8 +253,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -532,8 +532,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -704,7 +704,7 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 552.6666666666666,
+          "x": 553,
           "y": 796
         },
         {
@@ -798,8 +798,8 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 566.5,
+          "x": 567,
-          "y": 213
+          "y": 209
         },
         {
           "x": 566.5,
@@ -853,8 +853,8 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 487.90000000000003,
+          "x": 488,
-          "y": 213
+          "y": 209
         },
         {
           "x": 487.90000000000003,
@@ -900,7 +900,7 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 540.3000000000001,
+          "x": 540,
           "y": 213
         },
         {
@@ -1010,7 +1010,7 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 514.1,
+          "x": 514,
           "y": 213
         },
         {
@@ -1022,8 +1022,8 @@
           "y": 223
         },
         {
-          "x": 508.50000000000006,
+          "x": 509,
-          "y": 520
+          "y": 575
         }
       ],
       "animated": false,
@@ -1112,7 +1112,7 @@
       "labelPercentage": 0,
       "route": [
         {
-          "x": 464.33333333333337,
+          "x": 464,
           "y": 796
         },
         {

e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="724" height="626" viewBox="-100 -100 724 626"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="524" height="426" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="50" width="444" height="326" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="80" y="100" width="364" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="130" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="187.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 245.659544 173.545716 C 273.333333 154.932384 282.500000 150.000000 285.250000 150.000000 C 288.000000 150.000000 291.666667 162.600000 294.416667 181.500000 C 297.166667 200.400000 297.166667 225.600000 294.416667 244.500000 C 291.666667 263.400000 273.333333 271.067616 247.319087 253.570489" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 245.791667 183.835630 C 300.000000 156.944882 317.500000 150.000000 322.750000 150.000000 C 328.000000 150.000000 335.000000 162.600000 340.250000 181.500000 C 345.500000 200.400000 345.500000 225.600000 340.250000 244.500000 C 335.000000 263.400000 300.000000 269.055118 247.583334 243.053150" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 243.047451 236.531831 C 244.066667 235.317672 244.266667 235.079418 246.571765 232.333427" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="0" y="0" width="524" height="426" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="40" y="50" width="444" height="326" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="80" y="100" width="364" height="226" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="262.000000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="130" y="150" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="187.000000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 245.659544 173.545716 C 273.333333 154.932384 282.500000 150.000000 285.250000 150.000000 C 288.000000 150.000000 291.666667 162.600000 294.416667 181.500000 C 297.166667 200.400000 297.166667 225.600000 294.416667 244.500000 C 291.666667 263.400000 273.333333 271.067616 247.319087 253.570489" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 245.791667 183.835630 C 300.000000 156.944882 317.500000 150.000000 322.750000 150.000000 C 328.000000 150.000000 335.000000 162.600000 340.250000 181.500000 C 345.500000 200.400000 345.500000 225.600000 340.250000 244.500000 C 335.000000 263.400000 300.000000 269.055118 247.583334 243.053150" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 243.047451 236.531831 C 244.066667 235.317672 244.266667 235.079418 246.571765 232.333427" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3367121272)"/></g><mask id="3367121272" maskUnits="userSpaceOnUse" x="0" y="0" width="724" height="626">
+<rect x="0" y="0" width="724" height="626" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="774" height="801" viewBox="-88 -88 774 801"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="574" height="601" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="299.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="424" height="451" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="299.000000" y="116.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="162" y="162" width="264" height="276" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="294.000000" y="187.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="237" y="237" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 162.000000 540.000000 L 162.000000 609.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 237.000000 89.000000 L 237.000000 158.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 294.000000 365.000000 L 294.000000 443.000000 S 294.000000 453.000000 304.000000 453.000000 L 426.000000 453.000000 S 436.000000 453.000000 436.000000 443.000000 L 436.000000 91.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="12" y="12" width="574" height="601" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="299.000000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="a.b"><g class="shape" ><rect x="87" y="87" width="424" height="451" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="299.000000" y="116.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">b</text></g><g id="a.b.c"><g class="shape" ><rect x="162" y="162" width="264" height="276" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="294.000000" y="187.000000" style="text-anchor:middle;font-size:20px;fill:#0A0F25">c</text></g><g id="a.b.c.d"><g class="shape" ><rect x="237" y="237" width="114" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="294.000000" y="303.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="(a.b -&gt; a)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 162.000000 540.000000 L 162.000000 609.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><g id="a.(b -&gt; b.c)[0]"><path d="M 237.000000 89.000000 L 237.000000 158.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><g id="a.(b.c.d -&gt; b)[0]"><path d="M 294.000000 365.000000 L 294.000000 443.000000 S 294.000000 453.000000 304.000000 453.000000 L 426.000000 453.000000 S 436.000000 453.000000 436.000000 443.000000 L 436.000000 91.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3197861395)"/></g><mask id="3197861395" maskUnits="userSpaceOnUse" x="0" y="0" width="774" height="801">
+<rect x="0" y="0" width="774" height="801" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="313" height="778" viewBox="-100 -100 313 778"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="0" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 45.000993 127.969391 C 38.269912 166.000000 38.300000 186.000000 44.791388 222.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(b -&gt; c)[0]"><path d="M 45.000993 353.969391 C 38.269912 392.000000 38.300000 412.000000 44.791388 448.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(c -&gt; b)[0]"><path d="M 67.999007 450.030609 C 74.730088 412.000000 74.700000 392.000000 68.208612 355.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(b -&gt; a)[0]"><path d="M 67.999007 224.030609 C 74.730088 186.000000 74.700000 166.000000 68.208612 129.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="0" y="452" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="518.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 45.000993 127.969391 C 38.269912 166.000000 38.300000 186.000000 44.791388 222.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(b -&gt; c)[0]"><path d="M 45.000993 353.969391 C 38.269912 392.000000 38.300000 412.000000 44.791388 448.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(c -&gt; b)[0]"><path d="M 67.999007 450.030609 C 74.730088 412.000000 74.700000 392.000000 68.208612 355.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><g id="(b -&gt; a)[0]"><path d="M 67.999007 224.030609 C 74.730088 186.000000 74.700000 166.000000 68.208612 129.936733" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4076825876)"/></g><mask id="4076825876" maskUnits="userSpaceOnUse" x="0" y="0" width="313" height="778">
+<rect x="0" y="0" width="313" height="778" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="313" height="778" viewBox="-88 -88 313 778"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="12" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 49.666667 140.000000 L 49.666667 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(b -&gt; c)[0]"><path d="M 49.666667 366.000000 L 49.666667 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(c -&gt; b)[0]"><path d="M 87.333333 462.000000 L 87.333333 368.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(b -&gt; a)[0]"><path d="M 87.333333 236.000000 L 87.333333 142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="12" y="238" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c"><g class="shape" ><rect x="12" y="464" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="530.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 49.666667 140.000000 L 49.666667 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(b -&gt; c)[0]"><path d="M 49.666667 366.000000 L 49.666667 460.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(c -&gt; b)[0]"><path d="M 87.333333 462.000000 L 87.333333 368.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><g id="(b -&gt; a)[0]"><path d="M 87.333333 236.000000 L 87.333333 142.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1451019722)"/></g><mask id="1451019722" maskUnits="userSpaceOnUse" x="0" y="0" width="313" height="778">
+<rect x="0" y="0" width="313" height="778" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/class/dagre/sketch.exp.svg

@@ -30,7 +30,10 @@ width="539" height="568" viewBox="-100 -100 539 568"><style type="text/css">
 <text class="text" x="30.000000" y="304.000000" style="text-anchor:start;font-size:20px;fill:black">getJobs()</text>
 <text class="text" x="319.000000" y="304.000000" style="text-anchor:end;font-size:20px;fill:rgb(13, 50, 178)">Job[]</text><text class="text" x="10.000000" y="350.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">+</text>
 <text class="text" x="30.000000" y="350.000000" style="text-anchor:start;font-size:20px;fill:black">setTimeout(seconds int)</text>
-<text class="text" x="319.000000" y="350.000000" style="text-anchor:end;font-size:20px;fill:rgb(13, 50, 178)">void</text></g></g><style type="text/css"><![CDATA[
+<text class="text" x="319.000000" y="350.000000" style="text-anchor:end;font-size:20px;fill:rgb(13, 50, 178)">void</text></g></g><mask id="2152229000" maskUnits="userSpaceOnUse" x="0" y="0" width="539" height="568">
+<rect x="0" y="0" width="539" height="568" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/class/elk/sketch.exp.svg

@@ -30,7 +30,10 @@ width="539" height="568" viewBox="-88 -88 539 568"><style type="text/css">
 <text class="text" x="42.000000" y="316.000000" style="text-anchor:start;font-size:20px;fill:black">getJobs()</text>
 <text class="text" x="331.000000" y="316.000000" style="text-anchor:end;font-size:20px;fill:rgb(13, 50, 178)">Job[]</text><text class="text" x="22.000000" y="362.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">+</text>
 <text class="text" x="42.000000" y="362.000000" style="text-anchor:start;font-size:20px;fill:black">setTimeout(seconds int)</text>
-<text class="text" x="331.000000" y="362.000000" style="text-anchor:end;font-size:20px;fill:rgb(13, 50, 178)">void</text></g></g><style type="text/css"><![CDATA[
+<text class="text" x="331.000000" y="362.000000" style="text-anchor:end;font-size:20px;fill:rgb(13, 50, 178)">void</text></g></g><mask id="2958505152" maskUnits="userSpaceOnUse" x="0" y="0" width="539" height="568">
+<rect x="0" y="0" width="539" height="568" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg

@@ -26,7 +26,10 @@ width="955" height="818" viewBox="-100 -100 955 818"><style type="text/css">
 </text><text class="text-mono" x="0" y="6.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<tspan fill="#0086b3">panic</tspan>(<tspan fill="#dd1144">&quot;crypto:&#160;RegisterHash&#160;of&#160;unknown&#160;hash&#160;function&quot;</tspan>)
 </text><text class="text-mono" x="0" y="7.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;}
 </text><text class="text-mono" x="0" y="8.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;hashes[h]&#160;=&#160;f
-</text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="321" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="377.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="321" y="492" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="378.000000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 377.500000 128.000000 C 377.500000 166.000000 377.500000 186.000000 377.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4057567940)"/></g><g id="(hey -&gt; y)[0]"><path d="M 377.500000 394.000000 C 377.500000 432.000000 377.500000 452.000000 377.500000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4057567940)"/></g><style type="text/css"><![CDATA[
+</text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="321" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="377.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="321" y="492" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="378.000000" y="558.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 377.500000 128.000000 C 377.500000 166.000000 377.500000 186.000000 377.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4057567940)"/></g><g id="(hey -&gt; y)[0]"><path d="M 377.500000 394.000000 C 377.500000 432.000000 377.500000 452.000000 377.500000 488.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4057567940)"/></g><mask id="4057567940" maskUnits="userSpaceOnUse" x="0" y="0" width="955" height="818">
+<rect x="0" y="0" width="955" height="818" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg

@@ -26,7 +26,10 @@ width="955" height="818" viewBox="-88 -88 955 818"><style type="text/css">
 </text><text class="text-mono" x="0" y="6.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<tspan fill="#0086b3">panic</tspan>(<tspan fill="#dd1144">&quot;crypto:&#160;RegisterHash&#160;of&#160;unknown&#160;hash&#160;function&quot;</tspan>)
 </text><text class="text-mono" x="0" y="7.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;}
 </text><text class="text-mono" x="0" y="8.000000em" xml:space="preserve">&#160;&#160;&#160;&#160;hashes[h]&#160;=&#160;f
-</text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="333" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="389.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="333" y="504" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="390.000000" y="570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 389.500000 140.000000 L 389.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4046676353)"/></g><g id="(hey -&gt; y)[0]"><path d="M 389.500000 406.000000 L 389.500000 500.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4046676353)"/></g><style type="text/css"><![CDATA[
+</text><text class="text-mono" x="0" y="9.000000em" xml:space="preserve">}</text></g></g></g><g id="x"><g class="shape" ><rect x="333" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="389.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="333" y="504" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="390.000000" y="570.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; hey)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 389.500000 140.000000 L 389.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4046676353)"/></g><g id="(hey -&gt; y)[0]"><path d="M 389.500000 406.000000 L 389.500000 500.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#4046676353)"/></g><mask id="4046676353" maskUnits="userSpaceOnUse" x="0" y="0" width="955" height="818">
+<rect x="0" y="0" width="955" height="818" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text-bold {
 	font-family: "font-bold";
 }

e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="494" height="1178" viewBox="-100 -100 494 1178"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="41" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="40" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="0" y="652" width="294" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="685.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="91" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="90" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="40" y="702" width="214" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="731.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="90" y="752" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="818.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 147.000000 178.000000 C 147.000000 216.000000 147.000000 236.000000 147.000000 251.000000 C 147.000000 266.000000 147.000000 336.000000 147.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3808341037)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 147.000000 504.000000 C 147.000000 542.000000 147.000000 562.000000 147.000000 577.000000 C 147.000000 592.000000 147.000000 612.000000 147.000000 627.000000 C 147.000000 642.000000 147.000000 712.000000 147.000000 748.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3808341037)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="41" y="0" width="213" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="40" y="326" width="214" height="226" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="359.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="0" y="652" width="294" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="685.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="91" y="50" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.500000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="90" y="376" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="442.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="40" y="702" width="214" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="147.000000" y="731.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="90" y="752" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="147.000000" y="818.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 147.000000 178.000000 C 147.000000 216.000000 147.000000 236.000000 147.000000 251.000000 C 147.000000 266.000000 147.000000 336.000000 147.000000 372.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3808341037)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 147.000000 504.000000 C 147.000000 542.000000 147.000000 562.000000 147.000000 577.000000 C 147.000000 592.000000 147.000000 612.000000 147.000000 627.000000 C 147.000000 642.000000 147.000000 712.000000 147.000000 748.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3808341037)"/></g><mask id="3808341037" maskUnits="userSpaceOnUse" x="0" y="0" width="494" height="1178">
+<rect x="0" y="0" width="494" height="1178" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/connected_container/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="614" height="1403" viewBox="-88 -88 614 1403"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="88" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="87" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="12" y="784" width="414" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="817.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="163" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="162" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="87" y="864" width="264" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="893.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="162" y="939" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 219.000000 215.000000 L 219.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1997561525)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 219.000000 601.000000 L 219.000000 935.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1997561525)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="88" y="12" width="263" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.500000" y="45.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">a</text></g><g id="c"><g class="shape" ><rect x="87" y="398" width="264" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="431.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">c</text></g><g id="f"><g class="shape" ><rect x="12" y="784" width="414" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="817.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">f</text></g><g id="a.b"><g class="shape" ><rect x="163" y="87" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.500000" y="153.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="c.d"><g class="shape" ><rect x="162" y="473" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="539.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">d</text></g><g id="f.h"><g class="shape" ><rect x="87" y="864" width="264" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="219.000000" y="893.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="f.h.g"><g class="shape" ><rect x="162" y="939" width="114" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="219.000000" y="1005.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">g</text></g><g id="(a.b -&gt; c.d)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 219.000000 215.000000 L 219.000000 469.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1997561525)"/></g><g id="(c.d -&gt; f.h.g)[0]"><path d="M 219.000000 601.000000 L 219.000000 935.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1997561525)"/></g><mask id="1997561525" maskUnits="userSpaceOnUse" x="0" y="0" width="614" height="1403">
+<rect x="0" y="0" width="614" height="1403" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg

@@ -18,7 +18,10 @@ width="786" height="1530" viewBox="-100 -100 786 1530"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="416" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="333" y="226" width="253" height="878" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="459.500000" y="259.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="0" y="502" width="293" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="535.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="404" y="1204" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="459.500000" y="1270.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="416" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="40" y="552" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="581.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="383" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="90" y="602" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 472.750000 128.000000 C 472.750000 166.000000 472.750000 236.000000 472.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 434.660405 403.723672 C 412.134956 442.000000 406.250000 462.000000 406.250000 477.000000 C 406.250000 492.000000 365.650000 569.600000 206.920003 638.409063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 148.471500 828.336433 C 380.900000 868.000000 439.500000 888.000000 439.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 439.500000 1056.000000 C 439.500000 1094.000000 441.300000 1164.000000 447.791388 1200.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(f -&gt; g)[0]"><path d="M 508.941346 1202.411883 C 538.345133 1164.000000 546.000000 1144.000000 546.000000 1108.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 330.619728 598.681599 C 268.500000 621.200000 316.500000 603.800000 256.260544 625.636803" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="416" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="333" y="226" width="253" height="878" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="459.500000" y="259.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="0" y="502" width="293" height="326" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="535.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="404" y="1204" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="459.500000" y="1270.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="416" y="276" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="472.500000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="40" y="552" width="213" height="226" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="146.500000" y="581.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="383" y="928" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="439.500000" y="994.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="90" y="602" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="146.500000" y="668.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 472.750000 128.000000 C 472.750000 166.000000 472.750000 236.000000 472.750000 272.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 434.660405 403.723672 C 412.134956 442.000000 406.250000 462.000000 406.250000 477.000000 C 406.250000 492.000000 365.650000 569.600000 206.920003 638.409063" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 148.471500 828.336433 C 380.900000 868.000000 439.500000 888.000000 439.500000 924.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 439.500000 1056.000000 C 439.500000 1094.000000 441.300000 1164.000000 447.791388 1200.063267" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(f -&gt; g)[0]"><path d="M 508.941346 1202.411883 C 538.345133 1164.000000 546.000000 1144.000000 546.000000 1108.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 330.619728 598.681599 C 268.500000 621.200000 316.500000 603.800000 256.260544 625.636803" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3377918310)"/></g><mask id="3377918310" maskUnits="userSpaceOnUse" x="0" y="0" width="786" height="1530">
+<rect x="0" y="0" width="786" height="1530" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/container_edges/elk/sketch.exp.svg

@@ -18,7 +18,10 @@ width="754" height="1308" viewBox="-88 -88 754 1308"><style type="text/css">
 }
 
 ]]>
-</style><g id="a"><g class="shape" ><rect x="162" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="87" y="253" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="285.000000" y="286.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="12" y="639" width="413" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="672.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="445" y="639" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="500.500000" y="705.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="162" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="87" y="719" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="748.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="295" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="351.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="162" y="794" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="860.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 218.500000 140.000000 L 218.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 218.500000 456.000000 L 218.500000 790.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 87.000000 1072.000000 L 87.000000 1110.000000 S 87.000000 1120.000000 97.000000 1120.000000 L 556.000000 1120.000000 S 566.000000 1120.000000 566.000000 1110.000000 L 566.000000 198.000000 S 566.000000 188.000000 556.000000 188.000000 L 361.500000 188.000000 S 351.500000 188.000000 351.500000 198.000000 L 351.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 351.500000 456.000000 L 351.500000 574.000000 S 351.500000 584.000000 361.500000 584.000000 L 472.000000 584.000000 S 482.000000 584.000000 482.000000 594.000000 L 482.000000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(f -&gt; g)[0]"><path d="M 519.000000 637.000000 L 519.000000 208.000000 S 519.000000 198.000000 509.000000 198.000000 L 371.500000 198.000000 S 361.500000 198.000000 361.500000 208.000000 L 361.500000 249.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 228.500000 531.000000 L 228.500000 715.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><style type="text/css"><![CDATA[
+</style><g id="a"><g class="shape" ><rect x="162" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="g"><g class="shape" ><rect x="87" y="253" width="396" height="276" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="285.000000" y="286.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">g</text></g><g id="d"><g class="shape" ><rect x="12" y="639" width="413" height="431" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="672.000000" style="text-anchor:middle;font-size:28px;fill:#0A0F25">d</text></g><g id="f"><g class="shape" ><rect x="445" y="639" width="111" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="500.500000" y="705.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">f</text></g><g id="g.b"><g class="shape" ><rect x="162" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="d.h"><g class="shape" ><rect x="87" y="719" width="263" height="276" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="218.500000" y="748.000000" style="text-anchor:middle;font-size:24px;fill:#0A0F25">h</text></g><g id="g.e"><g class="shape" ><rect x="295" y="328" width="113" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="351.500000" y="394.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">e</text></g><g id="d.h.c"><g class="shape" ><rect x="162" y="794" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="218.500000" y="860.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">c</text></g><g id="(a -&gt; g.b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 218.500000 140.000000 L 218.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g.b -&gt; d.h.c)[0]"><path d="M 218.500000 456.000000 L 218.500000 790.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(d -&gt; g.e)[0]"><path d="M 87.000000 1072.000000 L 87.000000 1110.000000 S 87.000000 1120.000000 97.000000 1120.000000 L 556.000000 1120.000000 S 566.000000 1120.000000 566.000000 1110.000000 L 566.000000 198.000000 S 566.000000 188.000000 556.000000 188.000000 L 361.500000 188.000000 S 351.500000 188.000000 351.500000 198.000000 L 351.500000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g.e -&gt; f)[0]"><path d="M 351.500000 456.000000 L 351.500000 574.000000 S 351.500000 584.000000 361.500000 584.000000 L 472.000000 584.000000 S 482.000000 584.000000 482.000000 594.000000 L 482.000000 635.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(f -&gt; g)[0]"><path d="M 519.000000 637.000000 L 519.000000 208.000000 S 519.000000 198.000000 509.000000 198.000000 L 371.500000 198.000000 S 361.500000 198.000000 361.500000 208.000000 L 361.500000 249.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><g id="(g -&gt; d.h)[0]"><path d="M 228.500000 531.000000 L 228.500000 715.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3139620414)"/></g><mask id="3139620414" maskUnits="userSpaceOnUse" x="0" y="0" width="754" height="1308">
+<rect x="0" y="0" width="754" height="1308" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/font_sizes/dagre/board.exp.json

@@ -591,6 +591,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "stroke": "#0D32B2",
+      "fill": "lavender",
       "label": "custom 48",
       "fontSize": 48,
       "fontFamily": "DEFAULT",

e2etests/testdata/stable/font_sizes/elk/board.exp.json

@@ -573,6 +573,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "stroke": "#0D32B2",
+      "fill": "lavender",
       "label": "custom 48",
       "fontSize": 48,
       "fontFamily": "DEFAULT",

e2etests/testdata/stable/giant_markdown_test/dagre/board.exp.json

@@ -14,8 +14,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,

e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg

@@ -774,7 +774,7 @@ width="3251" height="5500" viewBox="-100 -100 3251 5500"><style type="text/css">
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
   margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="226.000000" width="3051" height="4848"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><h1>Markdown: Syntax</h1>
+</style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="226.000000" width="3051" height="4848"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><h1>Markdown: Syntax</h1>
 <ul>
 <li><a href="#overview">Overview</a>
 <ul>
@@ -1031,7 +1031,10 @@ title for the link, surrounded in quotes. For example:</p>
 <h3>Code</h3>
 <p>Unlike a pre-formatted code block, a code span indicates code within a
 normal paragraph. For example:</p>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1469" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1525.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1469" y="5174" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1525.500000" y="5240.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1525.500000 128.000000 C 1525.500000 166.000000 1525.500000 186.000000 1525.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1762730444)"/></g><g id="(md -&gt; b)[0]"><path d="M 1525.500000 5076.000000 C 1525.500000 5114.000000 1525.500000 5134.000000 1525.500000 5170.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1762730444)"/></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1469" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1525.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1469" y="5174" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1525.500000" y="5240.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1525.500000 128.000000 C 1525.500000 166.000000 1525.500000 186.000000 1525.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3004641400)"/></g><g id="(md -&gt; b)[0]"><path d="M 1525.500000 5076.000000 C 1525.500000 5114.000000 1525.500000 5134.000000 1525.500000 5170.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3004641400)"/></g><mask id="3004641400" maskUnits="userSpaceOnUse" x="0" y="0" width="3251" height="5500">
+<rect x="0" y="0" width="3251" height="5500" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/giant_markdown_test/elk/board.exp.json

@@ -14,8 +14,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,

e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg

@@ -774,7 +774,7 @@ width="3251" height="5500" viewBox="-88 -88 3251 5500"><style type="text/css">
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
   margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="238.000000" width="3051" height="4848"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><h1>Markdown: Syntax</h1>
+</style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="238.000000" width="3051" height="4848"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><h1>Markdown: Syntax</h1>
 <ul>
 <li><a href="#overview">Overview</a>
 <ul>
@@ -1031,7 +1031,10 @@ title for the link, surrounded in quotes. For example:</p>
 <h3>Code</h3>
 <p>Unlike a pre-formatted code block, a code span indicates code within a
 normal paragraph. For example:</p>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1481" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1481" y="5186" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="5252.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1537.500000 140.000000 L 1537.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3631954546)"/></g><g id="(md -&gt; b)[0]"><path d="M 1537.500000 5088.000000 L 1537.500000 5182.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#3631954546)"/></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="1481" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="1481" y="5186" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="1537.500000" y="5252.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 1537.500000 140.000000 L 1537.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2933553414)"/></g><g id="(md -&gt; b)[0]"><path d="M 1537.500000 5088.000000 L 1537.500000 5182.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2933553414)"/></g><mask id="2933553414" maskUnits="userSpaceOnUse" x="0" y="0" width="3251" height="5500">
+<rect x="0" y="0" width="3251" height="5500" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/hr/dagre/board.exp.json

@@ -14,8 +14,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "transparent",
-      "stroke": "#0D32B2",
+      "stroke": "#0A0F25",
       "shadow": false,
       "3d": false,
       "multiple": false,

e2etests/testdata/stable/hr/dagre/sketch.exp.svg

@@ -774,11 +774,14 @@ width="938" height="786" viewBox="-100 -100 938 786"><style type="text/css">
 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
   margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="226.000000" width="738" height="134"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p><strong>Note:</strong> This document is itself written using Markdown; you
+</style><g id="md"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="226.000000" width="738" height="134"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="background-color:transparent;color:#0A0F25;"><p><strong>Note:</strong> This document is itself written using Markdown; you
 can <a href="/projects/markdown/syntax.text">see the source for it by adding '.text' to the URL</a>.</p>
 <hr />
 <h2>Overview</h2>
-</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="313" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="369.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="313" y="460" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="369.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 369.000000 128.000000 C 369.000000 166.000000 369.000000 186.000000 369.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#434308343)"/></g><g id="(md -&gt; b)[0]"><path d="M 369.000000 362.000000 C 369.000000 400.000000 369.000000 420.000000 369.000000 456.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#434308343)"/></g><style type="text/css"><![CDATA[
+</div></foreignObject></g></g><g id="a"><g class="shape" ><rect x="313" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="369.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><rect x="313" y="460" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="369.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; md)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 369.000000 128.000000 C 369.000000 166.000000 369.000000 186.000000 369.000000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#255996187)"/></g><g id="(md -&gt; b)[0]"><path d="M 369.000000 362.000000 C 369.000000 400.000000 369.000000 420.000000 369.000000 456.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#255996187)"/></g><mask id="255996187" maskUnits="userSpaceOnUse" x="0" y="0" width="938" height="786">
+<rect x="0" y="0" width="938" height="786" fill="white"></rect>
+
+</mask><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }