I will be giving a talk at work about how to use mermaid diagrams.
Here is a set of examples that make great starting points.
https://mermaid.js.org/syntax/examples.html
I have a confession: I can’t draw well,
However I can create useful diagrams,
Important Formula:
Cost To Create + Cost to Maintain > Value of diagrams
Mermaid allows cheap creation and maintenance allowing the ability to achieve value in cases where other techniques will be prohibitive.
The perfect is the enemy of good enough.
No Diagram is perfect.
It’s easier to offer suggestions to improve a diagram than a large text document.
It’s amazing how much you learn building a diagram.
Diagrams need to have a key. (Although with some diagram types the key can be shared)
Each symbol you use needs to have the same meaning everywhere.
Map vs Diagram – a map is a special kind of diagram where space has meaning.
Documenting Software Architectures: Views and Beyond.
Build them by copying and editing.
The friends:
These can be a bit more complex. Typically they require a command line tool to transform a file into an image
Graphviz (https://graphviz.org/gallery/)
Plantuml (https://plantuml.com/)
For interactive diagrams there is the excellent
d3js. (https://d3js.org/)
Developer Rants 