Diagramming with Mermaid
Mermaid Diagramming
Having recently purchased Creating Software with Modern Diagramming Techniques I've been working through the chapters and examples to get into the habit of using the mermaid syntax and diagrams so that I can have a web ready alternative to PlantUml and also it's the only tool we've got installed on our confluence instance.
I've also added a Mermaid plugin to my website to enable the rendering of Mermaid in my markdown files. This was a combination of extended my theme so that the Mermaid js files are added and also adjusting the rendering of the markdown code blocks for mermaid so they render as <pre class="mermaid">
which is the format required by the JS lib .
The below example is a classDiagram
showing the web site building domain.
classDiagram contentmodel --> contenttypeplugins : finds content\n using contentmodel *-- contentitems contentmodel --> aggregatorplugins : builds other models\n using content contentmodel --> contentmodelvisitor : exposes model via\n common types contentmodelvisitor --> page : contentmodelvisitor --> files contentmodelvisitor --> tags contentrenderer --> contentmodelvisitor : uses to find\n items to render contentrenderer --> contentrenderplugins : use to render content types