Skip to content

Diagrams in Markdown#

We have two alternative #recipe for displaying diagrams in markdown:

Mermaid#

You can use Mermaid plugin to draw and preview diagrams in your content.

Draw.io#

Draw.io extension allows you to create, edit, and display your diagrams without leaving Visual Studio Code. The .drawio.svg or .drawio.png files can be automatically embedded and displayed in published Foams, no export needed. FYI, the diagram below was made using Draw.io! You can check the diagram here.

diagram-drawio-demo

Using Draw.io#

  1. Install Draw.io VS Code extension.
  2. Create a new *.drawio.svg or *.drawio.png file.
  3. Start drawing your diagram. Once you done, save it.
  4. Embed the diagram file as you embedding the image file, for example: ![My Diagram](my-diagram.drawio.svg)