Skip to main content Svelte Highlight v7.21.1

D2 language preview

1. System diagram

shapes, connections, and labels
horizon-dark
# request flow
client -> server: HTTP request
server -> db: query

server.shape: rectangle
db.shape: cylinder
client.shape: person
atom-one-dark
# request flow
client -> server: HTTP request
server -> db: query

server.shape: rectangle
db.shape: cylinder
client.shape: person
github-dark
# request flow
client -> server: HTTP request
server -> db: query

server.shape: rectangle
db.shape: cylinder
client.shape: person
dracula
# request flow
client -> server: HTTP request
server -> db: query

server.shape: rectangle
db.shape: cylinder
client.shape: person
nord
# request flow
client -> server: HTTP request
server -> db: query

server.shape: rectangle
db.shape: cylinder
client.shape: person
github
# request flow
client -> server: HTTP request
server -> db: query

server.shape: rectangle
db.shape: cylinder
client.shape: person

2. Containers and styles

nested objects and style attributes
horizon-dark
network: {
  web -> api: REST
  api -> cache: read

  cache.shape: cylinder
  api.style.fill: "#f5f5f5"
}

network.web -> network.api: internal
atom-one-dark
network: {
  web -> api: REST
  api -> cache: read

  cache.shape: cylinder
  api.style.fill: "#f5f5f5"
}

network.web -> network.api: internal
github-dark
network: {
  web -> api: REST
  api -> cache: read

  cache.shape: cylinder
  api.style.fill: "#f5f5f5"
}

network.web -> network.api: internal
dracula
network: {
  web -> api: REST
  api -> cache: read

  cache.shape: cylinder
  api.style.fill: "#f5f5f5"
}

network.web -> network.api: internal
nord
network: {
  web -> api: REST
  api -> cache: read

  cache.shape: cylinder
  api.style.fill: "#f5f5f5"
}

network.web -> network.api: internal
github
network: {
  web -> api: REST
  api -> cache: read

  cache.shape: cylinder
  api.style.fill: "#f5f5f5"
}

network.web -> network.api: internal

3. Multi-board composition

layers, scenarios, and steps
horizon-dark
title: Deployment

layers: {
  staging: {
    web -> db
  }
}

scenarios: {
  outage: {
    web -> db: down {style.stroke: red}
  }
}
atom-one-dark
title: Deployment

layers: {
  staging: {
    web -> db
  }
}

scenarios: {
  outage: {
    web -> db: down {style.stroke: red}
  }
}
github-dark
title: Deployment

layers: {
  staging: {
    web -> db
  }
}

scenarios: {
  outage: {
    web -> db: down {style.stroke: red}
  }
}
dracula
title: Deployment

layers: {
  staging: {
    web -> db
  }
}

scenarios: {
  outage: {
    web -> db: down {style.stroke: red}
  }
}
nord
title: Deployment

layers: {
  staging: {
    web -> db
  }
}

scenarios: {
  outage: {
    web -> db: down {style.stroke: red}
  }
}
github
title: Deployment

layers: {
  staging: {
    web -> db
  }
}

scenarios: {
  outage: {
    web -> db: down {style.stroke: red}
  }
}