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