# Diagrams

Three diagram tools are supported by Doctopus: D2, Pikchr, and Graphviz. Choose the one that best suits your needs.

## D2

Excels at developer productivity and readability, offering a modern, intuitive syntax and versatile layout engine support.

~~~markdown
```d2
direction: down

start: Start {
  shape: oval
}

q1: Is graph layout the main problem? {
  shape: diamond
}

q2: Do you want procedural placement control? {
  shape: diamond
}

graphviz: Graphviz
pikchr: Pikchr
d2lang: D2

start -> q1
q1 -> graphviz: Yes
q1 -> q2: No
q2 -> pikchr: Yes
q2 -> d2lang: No
```
~~~

```d2
direction: down

start: Start {
  shape: oval
}

q1: Is graph layout the main problem? {
  shape: diamond
}

q2: Do you want procedural placement control? {
  shape: diamond
}

graphviz: Graphviz
pikchr: Pikchr
d2lang: D2

start -> q1
q1 -> graphviz: Yes
q1 -> q2: No
q2 -> pikchr: Yes
q2 -> d2lang: No
```

## Pikchr

Excels at precise technical illustrations, providing a language optimized for relative positioning.

~~~markdown
```pikchr
down

Start: oval "Start" fit
arrow

Q1: box invis width 2.6in height 1.0in "Is graph layout the" "main problem?"
line from Q1.w to Q1.n to Q1.e to Q1.s close

A1: arrow from Q1.e right 1.5in "Yes" above
GV: box "Graphviz" fit with .w at A1.end

A2: arrow from Q1.s down 1.0in "No" ljust
Q2: box invis width 3.0in height 1.0in "Do you want procedural" "placement control?" with .n at A2.end
line from Q2.w to Q2.n to Q2.e to Q2.s close

A3: arrow from Q2.e right 1.5in "Yes" above
PK: box "Pikchr" fit with .w at A3.end

A4: arrow from Q2.s down 1.0in "No" ljust
D2Lang: box "D2" fit with .n at A4.end
```
~~~

```pikchr
down

Start: oval "Start" fit
arrow

Q1: box invis width 2.6in height 1.0in "Is graph layout the" "main problem?"
line from Q1.w to Q1.n to Q1.e to Q1.s close

A1: arrow from Q1.e right 1.5in "Yes" above
GV: box "Graphviz" fit with .w at A1.end

A2: arrow from Q1.s down 1.0in "No" ljust
Q2: box invis width 3.0in height 1.0in "Do you want procedural" "placement control?" with .n at A2.end
line from Q2.w to Q2.n to Q2.e to Q2.s close

A3: arrow from Q2.e right 1.5in "Yes" above
PK: box "Pikchr" fit with .w at A3.end

A4: arrow from Q2.s down 1.0in "No" ljust
D2Lang: box "D2" fit with .n at A4.end
```

## Graphviz

Excels at automated large-scale graph layouts, utilizing mature, mathematically robust algorithms for complex relational data.

`dot` is the most commonly used tool in the Graphviz ecosystem. It is used by PlantUML under the hood.

~~~markdown
```dot
digraph DecisionTree {
  rankdir=TB;
  node [shape=box];
  edge [];

  start [shape=oval, label="Start"];
  q1 [shape=diamond, label="Is graph layout\nthe main problem?"];
  q2 [shape=diamond, label="Do you want procedural\nplacement control?"];

  graphviz [label="Graphviz"];
  pikchr [label="Pikchr"];
  d2lang [label="D2"];

  start -> q1;
  q1 -> graphviz [xlabel="Yes"];
  q1 -> q2 [xlabel="No"];
  q2 -> pikchr [xlabel="Yes"];
  q2 -> d2lang [xlabel="No"];
}
```
~~~

```dot
digraph DecisionTree {
  rankdir=TB;
  node [shape=box];
  edge [];

  start [shape=oval, label="Start"];
  q1 [shape=diamond, label="Is graph layout\nthe main problem?"];
  q2 [shape=diamond, label="Do you want procedural\nplacement control?"];

  graphviz [label="Graphviz"];
  pikchr [label="Pikchr"];
  d2lang [label="D2"];

  start -> q1;
  q1 -> graphviz [xlabel="Yes"];
  q1 -> q2 [xlabel="No"];
  q2 -> pikchr [xlabel="Yes"];
  q2 -> d2lang [xlabel="No"];
}
```

You can also pick a different layout engine from the fence language, for example `circo`, `fdp`, `neato`, `osage`, `patchwork`, `sfdp`, or `twopi`.

~~~markdown
```circo
digraph DecisionTree {
  rankdir=TB;
  node [shape=box];
  edge [];

  start [shape=oval, label="Start"];
  q1 [shape=diamond, label="Is graph layout\nthe main problem?"];
  q2 [shape=diamond, label="Do you want procedural\nplacement control?"];

  graphviz [label="Graphviz"];
  pikchr [label="Pikchr"];
  d2lang [label="D2"];

  start -> q1;
  q1 -> graphviz [xlabel="Yes"];
  q1 -> q2 [xlabel="No"];
  q2 -> pikchr [xlabel="Yes"];
  q2 -> d2lang [xlabel="No"];
}
```
~~~

```circo
digraph DecisionTree {
  rankdir=TB;
  node [shape=box];
  edge [];

  start [shape=oval, label="Start"];
  q1 [shape=diamond, label="Is graph layout\nthe main problem?"];
  q2 [shape=diamond, label="Do you want procedural\nplacement control?"];

  graphviz [label="Graphviz"];
  pikchr [label="Pikchr"];
  d2lang [label="D2"];

  start -> q1;
  q1 -> graphviz [xlabel="Yes"];
  q1 -> q2 [xlabel="No"];
  q2 -> pikchr [xlabel="Yes"];
  q2 -> d2lang [xlabel="No"];
}
```