---
description: Different diagram tools.
---

# 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"];
}
```

<!--
Sitemap

URL: https://doctopus.frankmayer.dev/index.md
Title: doctopus
Description: The simplest way to write beautiful documentation

URL: https://doctopus.frankmayer.dev/v0.3.0/config.md
Title: Config
Description: Doctopus build configuration.

URL: https://doctopus.frankmayer.dev/v0.3.0/diagrams.md
Title: Diagrams
Description: Different diagram tools.

URL: https://doctopus.frankmayer.dev/v0.3.0/favicon.md
Title: Favicon
Description: How to set a custom favicon for your docs.

URL: https://doctopus.frankmayer.dev/v0.3.0/homepage.md
Title: Homepage
Description: The special homepage (`/index.html`).

URL: https://doctopus.frankmayer.dev/v0.3.0/hooks.md
Title: Hooks
Description: Integrate external tools using pre- and post-build hooks for things like generating files.

URL: https://doctopus.frankmayer.dev/v0.3.0/index.md
Title: Index

URL: https://doctopus.frankmayer.dev/v0.3.0/math.md
Title: Math
Description: LaTeX math support.

URL: https://doctopus.frankmayer.dev/v0.3.0/syntax_highlighting.md
Title: Syntax Highlighting
Description: Code blocks with syntax highlighting.

URL: https://doctopus.frankmayer.dev/v0.3.1/config.md
Title: Config
Description: Doctopus build configuration.

URL: https://doctopus.frankmayer.dev/v0.3.1/diagrams.md
Title: Diagrams
Description: Different diagram tools.

URL: https://doctopus.frankmayer.dev/v0.3.1/favicon.md
Title: Favicon
Description: How to set a custom favicon for your docs.

URL: https://doctopus.frankmayer.dev/v0.3.1/homepage.md
Title: Homepage
Description: The special homepage (`/index.html`).

URL: https://doctopus.frankmayer.dev/v0.3.1/hooks.md
Title: Hooks
Description: Integrate external tools using pre- and post-build hooks for things like generating files.

URL: https://doctopus.frankmayer.dev/v0.3.1/index.md
Title: Index

URL: https://doctopus.frankmayer.dev/v0.3.1/math.md
Title: Math
Description: LaTeX math support.

URL: https://doctopus.frankmayer.dev/v0.3.1/syntax_highlighting.md
Title: Syntax Highlighting
Description: Code blocks with syntax highlighting.

URL: https://doctopus.frankmayer.dev/next/config.md
Title: Config
Description: Doctopus build configuration.

URL: https://doctopus.frankmayer.dev/next/diagrams.md
Title: Diagrams
Description: Different diagram tools.

URL: https://doctopus.frankmayer.dev/next/favicon.md
Title: Favicon
Description: How to set a custom favicon for your docs.

URL: https://doctopus.frankmayer.dev/next/homepage.md
Title: Homepage
Description: The special homepage (`/index.html`).

URL: https://doctopus.frankmayer.dev/next/hooks.md
Title: Hooks
Description: Integrate external tools using pre- and post-build hooks for things like generating files.

URL: https://doctopus.frankmayer.dev/next/math.md
Title: Math
Description: LaTeX math support.

URL: https://doctopus.frankmayer.dev/next/media.md
Title: Media
Description: More than just images.

URL: https://doctopus.frankmayer.dev/next/search.md
Title: Search
Description: Search pages by content.

URL: https://doctopus.frankmayer.dev/next/syntax_highlighting.md
Title: Syntax Highlighting
Description: Code blocks with syntax highlighting.
-->