✨ Support mermaid syntax

[matt-goldman]

Cc: @bradystroud

Hi

Pain

Many of our rules have diagrams in them. Some people create these using draw.io, some use other tools. This results in the following problems:

• Inconsistency between the styles of diagrams produced
• Diagram source difficult to store with rule for later editing
• Diagrams are static (e.g. users cannot pan and zoom)

Suggested Solution

Add Mermaid support.

Mermaid is easy to use and easy to implement. We can install a package that will automatically render the diagrams for us, and we can control whether users can pan/zoom etc.

Mermaid syntax is just text so easy to store embedded in the rule. And that means its easy to edit and easy to diff too. VS Code has a plugin that can render it in real-time, and many online tools provide a visual editor.

Thanks!

[danielmackay]

Additional to this, it would be nice if we could have a SSW branded stylesheet, that we could include to auto brand mermaid diagrams. Ideally this could be used both in SSW Rules, but also in any mermaid diagram.

[JackDevAU]

Hi All,

Status: On Hold

With our current implementation of Rules, the Gatsby plugins that have been created to support mermaid are buggy and do not work. For the v2 of rules (this implementation) we are putting this on hold as the plugins (see below) do not work.

• gatsby-remark-draw (uses mermaid cli)
• gatsby-remark-mermaid (uses Playwright)