Skip to content

Diagrams in Markdown#

We have two alternative recipes for displaying diagrams in markdown:

Mermaid#

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

⚠️ Be aware that Mermaid diagrams don't automatically get rendered in published Foams in github-pages, and would require you to eject to another static site generation approach that supports Mermaid plugins.

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)