How to make Quick Diagrams: MermaidJS and more

How to make Quick Diagrams: MermaidJS and more

December 29, 2023

An image is worth a 1000 words.

I cant disagree with that sentece since I discovered these tools:

  1. MermaidJS
  2. Python Diagrams and DrawIO

MermaidJS

A game changer for documenting processes and architecture diagrams:

Example A top down flow chart:

graph TD;
    Apps-->Double-Click;
    Double-Click-->.deb
    Double-Click-->.Appimage
    Apps-->Terminal;
    Terminal-->APT/NALA;

Dont be afraid, the MermaidJS docs are just amazing to follow: https://mermaid.js.org/intro/

Other Diagram Tools

How could it not be a possibility with Python?

  1. Python Diagrams

And if you want, you have a SelfHosted option:

  1. DrawIO
ℹ️
These tools play great with PPTs as a code: SliDev, Remark, MARP