Attributes

The Astro D2 integration can be globally configured inside the astro.config.mjs configuration file of your project. In addition, individual diagrams can be customized using attributes.

Attributes are annotations that can be added to the opening code fence of a D2 diagram Markdown code block after the three backticks and the language identifier ```d2.

src/content/docs/example.md

```d2 foo=bar baz
x -> y
```

In the above example, the foo attribute is set to bar and the baz attribute is set to true.

Attributes

All attributes are optional and can be combined together. The following attributes are supported by the Astro D2 integration:

title

Default: 'Diagram'
Example: Title attribute

The title of the diagram that will be used as the alt attribute of the generated image.

src/content/docs/example.md

```d2 title="My custom diagram"
x -> y
```

width

Example: Width attribute

The width (in pixels) of the diagram. The height of the diagram will be adjusted to maintain the aspect ratio.

src/content/docs/example.md

```d2 width=50
x -> y
```

theme

Example: Theme attribute

The default theme to use for the diagram.

src/content/docs/example.md

```d2 theme=102
x -> y
```

See the D2 documentation for more information about the available themes.

darkTheme

Example: Dark theme attribute

The dark theme to use for the diagram when the user’s system preference is set to dark mode. To disable the dark theme for the diagram, set this attribute to 'false'.

src/content/docs/example.md

```d2 darkTheme=301
x -> y
```

See the D2 documentation for more information about the available themes.

sketch

Example: Sketch attribute

Overrides the global sketch configuration and defines whether to render the diagram as if it was sketched by hand.

src/content/docs/example.md

```d2 sketch
x -> y
```

pad

Example: Padding attribute

Overrides the global pad configuration and defines the padding (in pixels) around the rendered diagram.

src/content/docs/example.md

```d2 pad=10
x -> y
```

target

Example: Target attribute

Defines the target board to render when using composition. Use root to target the root board.

src/content/docs/example.md

```d2 target=numbers
# Root board
x -> y

layers: {
  # Board named "numbers" that does not inherit anything from root
  numbers: {
    1 -> 2
  }
}
```

animateInterval

Example: Animate interval attribute

When specified, the diagram will package multiple boards as 1 SVG which transitions through each board at the specified interval (in milliseconds).

src/content/docs/example.md

```d2 animateInterval=1000
x -> y

layers: {
  numbers: {
    1 -> 2
  }
}
```