mermaid.js

markdown is a wonderful technology. so I was excited when a colleague told me there was a markdown language for graphs.

mermaid, which is a javascript library and a CLI, syntax looks like this:

graph LR
    Beginning --> Middle
    Middle --> End

which is rendered into this:

the LR part tells us it’s going left to right. we could swap in TD to make it go top to bottom:

graph TD
    Beginning --> Middle
    Middle --> End

all sorts of fun to be had

graph TD
    P1([P1]) --> F1
    P2([P2]) --> F1
    F1([F1]) --> F2
    F2([F2]) --> F3
    F3([F3]) --> F4
    F4([F4]) --> F5a([F5a])
    F4 --> F5b([F5b])
    F4 --> F5C([F5c])

conclusion

all the fun of markdown, but for diagrams. I often find myself sketching out graphs, dependencies, flow charts, etc and this is a powerful tool for leveraging text into the realm of diagrams.