Using Mermaid.js

Because I do a lot of diagramming, I looked for a tool that would allow me to write up a diagram in text, since using visual tools didn't allow for good source control.

Mermaid.js lets you write "diagrams-as-code" that can be stored as text files in a source control system.

This is an example of a sequence diagram:

	sequenceDiagram
	Alice->>John: Hello John, how are you?
	loop Healthcheck
		John->>John: Fight against hypochondria
	end
	Note right of John: Rational thoughts!
	John-->>Alice: Great!
	John->>Bob: How about you?
	Bob-->>John: Jolly good!

...and this is what the "code" looks like:

<pre class="mermaid">
	sequenceDiagram
	Alice->>John: Hello John, how are you?
	loop Healthcheck
		John->>John: Fight against hypochondria
	end
	Note right of John: Rational thoughts!
	John-->>Alice: Great!
	John->>Bob: How about you?
	Bob-->>John: Jolly good!
</pre>

You may have seen a "flash" of text before the diagram was rendered - I'm looking into fixing that.


First Posted: 9/16/2023, 8:11:13 AM
Last Updated: 9/16/2023, 6:11:33 AM

Hello and welcome!
My name is Ryan Anderson - tech worker, podcaster, musician, writer, dad.

Read more about my background...

Latest Thoughts

Tags