Excalidraw

The famous hand-drawn style whiteboard

The excalidraw plugin provides a true editor, integrated in the mkdocs dev server. So you can edit the drawing at dev time and display the output svg at build time.

Configuration

# mkdocs.yml

plugins:
  - search
  - excalidraw

The plugin need to store you excalidraw drawings (json and svg files). By default it stores these files under excalidraw/. So you are likely to have this layout:

my-project/
├── ...
├── mkdocs.yml
├── docs/
│   ├── index.md
│   └── utils.md
├── excalidraw/
│   ├── drawing0.json
│   └── drawing0.svg

You can change this folder with the directory option (the path is relative to the root directory, i.e. the directory where mkdocs.yml lives).

# mkdocs.yml

plugins:
  search:
  excalidraw:
    directory: assets/excalidraw

Syntax

The path to the json file is relative to the directory provided to the plugin. The title is injected as build time through a <title></title> tag inside the output svg file.

~{title}(path/to/file.json)