Mermaid.js

Explain complex concepts with mermaid.js
Author

Emil Bengtsson

Published

September 5, 2025

A picture is worth a thousand words

(kind/mermaid "flowchart LR
 Concept --> easy{Easy to understand?}
 easy -->|Yes| Understanding
 easy -->|No| Diagram
 easy -->|No| wall(Wall of text)
 Diagram --> Understanding
 wall -->|Didn't get it| Concept
 wall -->|Finally| Understanding")
flowchart LR Concept --> easy{Easy to understand?} easy -->|Yes| Understanding easy -->|No| Diagram easy -->|No| wall(Wall of text) Diagram --> Understanding wall -->|Didn't get it| Concept wall -->|Finally| Understanding

With mermaid.js you can now use words to generate a picture. One of the trickier aspects in explaining complex ideas/concepts, is the infliction point where words start to pile up towards dizzying heights and you lose sight of what what you wanted to communicate.

source: src/scicloj/clay/mermaid.clj