Skip to content
Astro D2

Icons

The Astro D2 integration can be used to create diagrams with icons:

src/content/docs/example.md
```d2
container: Docker {
  icon: https://icons.terrastruct.com/dev%2Fdocker.svg
  style: {
    stroke: deepskyblue
    font-color: deepskyblue
    fill: white
  }
  nginx: NGINX {
    icon: https://icons.terrastruct.com/dev%2Fnginx.svg
    style: {
      stroke: green
      font-color: green
      stroke-dash: 3
      fill: white
    }
    astro: Astro {
      style: {
        stroke: "#d841c1"
        font-color: white
        fill: "#75297f"
      }
    }
  }
}
```

The above code block will be rendered as the following diagram:

Diagram

Relative paths

The Astro D2 integration supports rendering icons with paths relative to your Markdown file.

For example, considering a file located at src/content/docs/example.md and an icon located at src/assets/icon.svg, you can reference the icon as follows:

src/content/docs/example.md
```d2
network: {
  icon: ../../assets/icon.svg
}
```

The above code block will be rendered as the following diagram:

Diagram