Using the builtin mermaid js integration. It is really interesting how much better most plugins seem than the dedicated app out there. Goes for these diagrams (PlantUML), flashcards and more.
Example
flowchart TD 1[feeling sad] --> shopping --> still_empty_inside
Tutorial
- Use backtics with mermaid to start a diagram.
- first line:
- write the type of chart, example:
flowchart
. - write the direction of the chart:
flowchart TB
- TB (Top-Bottom)
- LR (Left Right)
- BT
- RL
- ...
- write the type of chart, example:
- First Node:
- single word
- multiple words:
1[two words]
. There needs to be an alphanumerical identifier, 1 in this case, but it can be anything. - Shape of the node:
- squared:
[]
- round:
()
- raute (yes/no):
{}
- squared:
- Arrows:
- normal arrow:
-->
, or the other way around - line:
===
- dotted line:
-.
or.-
- line with text:
A === |example text| B
- normal arrow:
flowchart TD A===|This is the text| B;