Support for Mermaid diagrams & charts for content.

[JeanMeche]

Which scope/s are relevant/related to the feature request?

content

Information

Mermaidjs is a quite famous lib to create diagrams & charts from a markdown-like format.

I would be a great addition to add the support for it to the Analog 👍

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

Interesting! What would supporting this look like? A different content renderer?

[JeanMeche]

I was thinking of somewhat extending the exisiting renderer. mermaid diagrams can be fully integrated into markdown files.

Unfortunately I stumble upon an issue while doing some tests. Mermaid is calling document while initialization which lead me to this issue : mermaid-js/mermaid#3650. It's not ready to run on node yet.

So for now It can only init on the client side. Mermaid's doc suggests an integration for marked with :

const renderer = new marked.Renderer();
renderer.code = function (code, language) {
  if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
    return '<pre class="mermaid">' + code + '</pre>';
  } else {
    return '<pre><code>' + code + '</code></pre>';
  }
};

We could include that change directly into the MarkedSetupService but the mermaid still need to be bootstraped on the client.