# Diagrams (GraphViz)

A fenced `dot` or `graphviz` block is laid out by GraphViz, in the app. This is
separate from Mermaid: GraphViz is better at dense graphs where the layout
matters more than the storytelling.

## A directed graph

```dot
digraph pipeline {
  rankdir=LR;
  node [shape=box, style=rounded, fontname="Helvetica", fontsize=11];
  edge [fontname="Helvetica", fontsize=9, color="#666666"];

  source   [label="Source file"];
  parse    [label="Parse"];
  math     [label="KaTeX"];
  mermaid  [label="Mermaid"];
  graphviz [label="GraphViz"];
  render   [label="Reading pane"];
  pdf      [label="PDF"];
  docx     [label="Word"];
  html     [label="HTML"];

  source -> parse;
  parse -> math     [label="$…$"];
  parse -> mermaid  [label="mermaid"];
  parse -> graphviz [label="dot"];
  math -> render;
  mermaid -> render;
  graphviz -> render;
  render -> pdf;
  render -> docx;
  render -> html;
}
```

## An undirected graph with clusters

```graphviz
graph modules {
  layout=dot;
  node [shape=ellipse, fontname="Helvetica", fontsize=11];

  subgraph cluster_main {
    label="Main process";
    style=dashed;
    color="#999999";
    ipc; openFiles; library; exportPdf;
  }

  subgraph cluster_renderer {
    label="Renderer";
    style=dashed;
    color="#999999";
    editor; preview; outline;
  }

  ipc -- openFiles;
  ipc -- library;
  ipc -- exportPdf;
  ipc -- editor;
  editor -- preview;
  preview -- outline;
}
```

## A state machine

```dot
digraph licence {
  rankdir=LR;
  node [shape=circle, fontname="Helvetica", fontsize=10, width=0.9];

  free  [label="Free"];
  pro   [label="Pro", peripheries=2];
  grace [label="Grace", style=dashed];

  free  -> pro   [label="purchase"];
  pro   -> grace [label="offline"];
  grace -> pro   [label="re-check"];
  grace -> free  [label="30 days"];
}
```