Foam

Diagrams in Markdown

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

• Diagrams in Markdown
  • Mermaid
  • Draw.io
    • Using Draw.io

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.

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)

This site is open source. Improve this page.