Usage

There are two ways to use the plugin, both documented below. The end result is exactly the same, so which one you choose is a matter of personal preference.

Fenced code blocks

Fenced code blocks allow you to place diagram definitions in markdown.

```d2
shape: sequence_diagram
Alice -> John: Hello John, how are you?
Alice -> John.ack: John, can you hear me?
John.ack -> Alice: Hi Alice, I can hear you!
John -> Alice: I feel great!
```

Image tags

You can also link to external files using an image tag. Only local files with .d2 extension are supported.

![Diagram](diagram.d2)

Path to diagram must be relative to the markdown file. Given following documentation structure:

├── guide
│   ├── configuration.md
│   └── usage.md
├── flow.d2
└── index.md

To link to flow.d2 from usage.md you would use:

![Diagram](../flow.d2)

Imports

Diagrams included using image tags support imports.

importer.d2
```
a: @imported
a -> b
```

imported.d2
```
x: {
    shape: circle
}
```

In MkDocs:
![Diagram](../importer.d2)

Warning

This feature is somehwat broken due to caching of rendered diagrams. Diagrams are not re-rendered when an imported file changes. You can either update the main diagram (re-render is triggered by modification time, no changes are needed) or disable the cache altogether.

Accessibility

All diagrams are accessible by default.

<svg aria-label="ALT TEXT" role="img">

The value is taken from an image tag alt text:

![ALT TEXT](diagram.d2)

Or fenced code block attribute:

```d2 alt="ALT TEXT"
shape: sequence_diagram
A -> B: C
```

If fenced code block does not have alt attribute, default value "Diagram" is used.