mirror of
https://github.com/foambubble/foam-template.git
synced 2025-06-07 20:08:54 +00:00
25 lines
1.2 KiB
Markdown
25 lines
1.2 KiB
Markdown
# Diagrams in Markdown
|
|
|
|
We have two alternative #recipe for displaying diagrams in markdown:
|
|
|
|
- [Diagrams in Markdown](#diagrams-in-markdown)
|
|
- [Mermaid](#mermaid)
|
|
- [Draw.io](#drawio)
|
|
- [Using Draw.io](#using-drawio)
|
|
|
|
## Mermaid
|
|
|
|
You can use [Mermaid](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) plugin to draw and preview diagrams in your content.
|
|
|
|
## Draw.io
|
|
|
|
[Draw.io](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) 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](../../assets/images/diagram-drawio-demo.drawio.svg).
|
|
|
|
|
|
|
|
### Using Draw.io
|
|
|
|
1. Install [Draw.io](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) 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: ``
|