Mermaid - Diagramming and charting tool

JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

I was recently seconded into a work project of almost indescribable dullness where the powers that be made the not uncommon mistake that I, Mr Bog, public servant might have the slightest clue as to what I am doing.

To be fair, after being a local government orifice for 30 years, some inevitable knowledge of process mapping may have been beaten into the soft grey matter of my brain.

There are some things in life I will freely admit to having a prejudice against:

• Golfers - I’m probably still too angry to discuss why at this stage.
• Microsoft Visio
• Microsoft SharePoint
• Poorly designed Local Government Software
• Meetings that really should have been an email
• Any incursions into my lunch hour

Visio is annoying. Let’s be really granular: Visio as a browser application in Microsoft Teams linked to SharePoint is a special kind of hell which I would gladly send a Terminator robot back in time to exact some brutal justice on the progenitor.

For weeks I have been staring at Flowcharts in Visio and the moment you try to move or re-link a diagram it jumps around or turns into a bowl of Spaghetti. Mrs Bog and the dogs have come to expect my rage if I’ve had a day of this.

My first interesting solution was to try Draw.io or app.diagrams.net as it’s now know. A rather nice JAVA based web application using Tomcat server (I think) which you can also self-host as a Docker application with minimal pain. Which is what I quickly did on a train commute to work as it was pretty easy.

It’s a lot easier to work with and the added bonus I found was that the flowcharts I created in Draw.io could be exported as VISIO files which could then be used on the Workplace workflow.

This then led me down the path of Mermaid Scripting

What Is Mermaid.js?

Mermaid.js is a JavaScript library that provides an easy-to-use syntax for creating various types of diagrams and flowcharts. Its versatility makes it suitable for use in technical writing, software development, and other professional contexts where visualizing complex information is necessary.

With Mermaid, users can create diagrams such as flowcharts, sequence diagrams, Gantt charts, and class diagrams, and easily integrate them into websites, blogs, and documentation. This open-source tool is available for both personal and commercial use, making it a flexible solution for a wide range of applications.

So, creating a chart is as easy as some markdown commands like A-->B

Thing proceed to get even funnier..

The beauty and flexibility of this Markdown for Flowcharts is that it lends itself quite readily to AI.

As an experiment I used the AI functionality and query within mermaid.js.org at the moment just on a free trial.

In a matter of seconds it spat out a very usable flow chart for a process map for serving a legal notice which would have taken me hours if not days of fiddling around with Visio/Drawio.

As with all things AI it’s a tool and not a be all so a small bit of human tweaking will get you there but the first results are VERY impressive and usable.

It’s the kind of incredibly dull task that AI should be used for > Not hoovering up art and music to make stupid memes or crappy AI art.

If there is someone who genuinely likes hand writing process maps, then good for them as I am more than happy for our computer overlords to do this kind of dull shit.

For example:

---
---
config:
  layout: elk
  theme: forest
---
flowchart TD
    A["Start"] --> B{"Identify Immediate Hazard"}
    B -- Immediate Health & Safety Risk --> C{"Is Emergency Action Necessary?"}
    B -- No Immediate Risk --> G["Consider Other Actions"]
    C -- Yes --> D["Prepare for Emergency Remedial Action"]
    C -- No --> G
    D --> E{"Whom to Notify?"} & F["Carry Out Emergency Remedial Action"]
    E --> Freeholder["Freeholder"] & Leaseholder["Leaseholder"] & Trustee["Trustee"] & Mortgagee["Mortgagee"] & Official_Receiver["Official Receiver"] & Agent_or_Manager["Agent or Manager"] & Tenant["Tenant"] & Statutory_Tenant["Statutory Tenant"] & Licensee["Licensee"] & License_Holder["License Holder"]
    Freeholder --> Owner(("Owner")) & Person_Having_Control(("Person Having Control")) & Person_Managing(("Person Managing")) & Occupier(("Occupier")) & Person_Having_An_Estate_or_interest(("Estate or Interest")) & Relevant_Interest(("Relevant Interest")) & Person_Authorised_To_Permit_Occupancy(("Authorised to Permit Occupancy"))
    Leaseholder --> Owner & Person_Having_Control & Person_Managing & Occupier & Person_Having_An_Estate_or_interest & Relevant_Interest & Person_Authorised_To_Permit_Occupancy
    Trustee --> Owner & Person_Having_Control & Person_Managing & Occupier & Person_Having_An_Estate_or_interest & Person_Authorised_To_Permit_Occupancy
    Official_Receiver --> Owner & Person_Having_Control & Person_Managing & Person_Having_An_Estate_or_interest & Person_Having_An_Estate_or_interest & Person_Authorised_To_Permit_Occupancy
    Mortgagee --> Owner & Person_Having_An_Estate_or_interest & Relevant_Interest & Person_Authorised_To_Permit_Occupancy & Person_Authorised_To_Permit_Occupancy
    Agent_or_Manager --> Person_Managing & Person_Having_An_Estate_or_interest & Person_Authorised_To_Permit_Occupancy
    Tenant --> Occupier
    Licensee --> Occupier
    License_Holder --> Person_Having_An_Estate_or_interest & Person_Authorised_To_Permit_Occupancy
    Statutory_Tenant --> Person_Having_An_Estate_or_interest & Person_Authorised_To_Permit_Occupancy
    F --> H["Document Actions Taken and Costs"]
    H --> I["Post-action Review and Reporting"]
    I --> J["End"]