# D2 diagrams

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/help/writerside/llms.txt).

Writerside supports adding diagrams using [D2](https://d2lang.com/), a declarative language for diagramming.

> **Note:**
> Make sure that you have D2 installed as described in [the documentation](https://d2lang.com/tour/install).

To add a D2 diagram, use a [code block](code.html) with the language set to `d2`:

Semantic markup:

```XML
<code-block lang="d2">
    direction: right
    question: Do you write docs?
    yes: Use Writerside
    no: You should
    question -> yes: Yes
    question -> no: No
</code-block>
```

Markdown:

```PLAINTEXT
```d2
direction: right
question: Do you write docs?
yes: Use Writerside
no: You should
question -> yes: Yes
question -> no: No
```
```

The result will look as follows:

```D2
direction: right
question: Do you write docs?
yes: Use Writerside
no: You should
question -> yes: Yes
question -> no: No
```

## Reference D2 diagram from file

If you have a file with D2 code, you can reference it instead of copying the D2 code into the code block. For more information, see [Reference code from file](code.html#reference-code-from-file).

Semantic markup:

```XML
<code-block lang="D2" src="graph.d2"/>
```

Markdown:

```PLAINTEXT
```D2
```
{ src="graph.d2" }
```

Or via a relative path:

Semantic markup:

```XML
<code-block lang="D2" src="../codeSnippets/graph.d2"/>
```

Markdown:

```PLAINTEXT
```D2
```
{ src="../codeSnippets/graph.d2" }
```