Excalidraw Diagrams

Start off by creating your diagram in https://excalidraw.com

Click ‘Save as image’ and make sure the ‘Embed scene’ checkbox is enabled. This is required for loading your image back into Excalidraw should you wish to make changes later on. Name your file and export to SVG, saving it inside docs/images.

Embed

Add the following to embed it inside your documentation:

```{raw} html
:file: ../images/excalidraw-example.svg
```

It is preferred to use this convention over ![]() in order to retain the font used by Excalidraw.

VSCode Excalidraw Editor

Excalidraw images can be edited within vscode using an extension. The entries in .vscode/settings.json ensure that the extension is launched for the .svg files and that the export configuration is set correctly. If Ctrl+S save the image with a background, try exporting and saving through file browser instead (ensuring to select Embed scene and deselect Background).