Skip to content

Data attributes

Use HTML data-* attributes to add custom data attributes to the generated diagram element.

src/content/docs/example.md
```d2 data-testid=example
x -> y
```

The data-testid attribute is added to the generated <img> element:

<img data-testid="example" ... />

If the inline configuration option or inline attribute is used, the attribute is added to the generated <svg> element:

<svg data-testid="example" ...>...</svg>

Shorthand data attributes are set to 'true':

src/content/docs/example.md
```d2 data-test
x -> y
```

The above code block will be rendered with the data-test attribute set to 'true':

<img data-test="true" ... />