Diagrams

diagrams
Author

Mine Çetinkaya-Rundel

Published

July 18, 2022

Diagrams

Quarto supports creating diagrams (flow charts, sequence diagrams, etc.) in with Mermaid and Graphviz.

To create a diagram with Mermaid, use a mermaid chunk. For example, Figure Figure 1 depicts how Quarto orchestrates rendering of documents.

```{mermaid}
%%| label: fig-mermaid
%%| fig-width: 6
%%| fig-cap: |
%%|   How Quarto orchestrates rendering of documents: start with 
%%|   a qmd file, use the Knitr or Jupyter engine to perform the 
%%|   computations and convert it to an md file, then use Pandoc 
%%|   to convert to various file formats including HTML, PDF, 
%%|   and Word.
flowchart LR
  A[qmd] --> B(Knitr)
  A[qmd] --> C(Jupyter)
  B(Knitr) --> D[md]
  C(Jupyter) --> D[md]
  D[md] --> E(pandoc)
  E(pandoc) --> F(HTML)
  E(pandoc) --> G(PDF)
  E(pandoc) --> H(Word)
  E(pandoc) --> I{and more}
```
flowchart LR
  A[qmd] --> B(Knitr)
  A[qmd] --> C(Jupyter)
  B(Knitr) --> D[md]
  C(Jupyter) --> D[md]
  D[md] --> E(pandoc)
  E(pandoc) --> F(HTML)
  E(pandoc) --> G(PDF)
  E(pandoc) --> H(Word)
  E(pandoc) --> I{and more}
Figure 1: How Quarto orchestrates rendering of documents: start with a qmd file, use the Knitr or Jupyter engine to perform the computations and convert it to an md file, then use Pandoc to convert to various file formats including HTML, PDF, and Word.

Note that diagrams can be treated as figures, with chunk options like fig-width and fig-cap. And prefixing the label with fig- allows us to cross-reference it and for the diagram to get figure numbering.

And Figure Figure 2 is the Graphviz version of this diagram. Note that it uses a different engine: dot.

```{dot}
//| label: fig-dot
//| fig-width: 3
//| fig-cap: |
//|   How Quarto orchestrates rendering of documents: start with 
//|   a qmd file, use the Knitr or Jupyter engine to perform the 
//|   computations and convert it to an md file, then use Pandoc 
//|   to convert to various file formats including HTML, PDF, 
//|   and Word.
graph G {
  layout=neato
  qmd -- Knitr;
  qmd -- Jupyter;
  Knitr -- md;
  Jupyter -- md;
  md -- pandoc;
  pandoc -- HTML;
  pandoc -- PDF;
  pandoc -- Word;
  pandoc -- more;
}
```
G qmd qmd Knitr Knitr qmd--Knitr Jupyter Jupyter qmd--Jupyter md md Knitr--md Jupyter--md pandoc pandoc md--pandoc HTML HTML pandoc--HTML PDF PDF pandoc--PDF Word Word pandoc--Word more more pandoc--more
Figure 2: How Quarto orchestrates rendering of documents: start with a qmd file, use the Knitr or Jupyter engine to perform the computations and convert it to an md file, then use Pandoc to convert to various file formats including HTML, PDF, and Word.

Couple of notes on creating diagrams with Quarto:

  • For Mermaid diagrams, use %%| for chunk options. For Graphviz, use //|.
  • The online editors for Mermaid and Graphviz are very helpful for interactively developing the code for a diagram:

Learn more

Diagrams