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

  1. Use backtics with mermaid to start a diagram.
  2. 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
      • ...
  3. 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): {}
  4. Arrows:
    • normal arrow: -->, or the other way around
    • line: ===
    • dotted line: -. or .-
    • line with text: A === |example text| B
flowchart TD
A===|This is the text| B;