Mermaid.js support

[rurounijones]

We use https://mermaid.js.org/ extensively in our manual documentation pages (using markdown) to provide system overview style information to go with the documentation generated by yard.

Having yard support for mermaid would be most excellent and allow us to have all of our system documentation in yard which is our goal. I have already included the mermaid.js file using a template customisation and that works fine but I am at a loss to actually get a diagram displayed correctly.

The issue is that Mermaid requires HTML to be formatted such that

```mermaid
  graph LR
      A --- B
      B-->C
      B-->D
```

turns into the following HTML

<pre class="mermaid">
  graph LR
      A --- B
      B-->C
      B-->D
</pre>

However yard does the following.

<pre class="mermaid">
  <code class="mermaid">
    graph LR
        A --- B
        B--&gt;C
        B--&gt;D
  </code>
</pre>

The issue being the extra code tag and the HTML escaping of the graph characters themselves. I have tried everything I can think of it get this to display in a way that mermaid can accept

• For escaping: Hacking the html escape function to not escape HTML (as a test) which fixes the escaping issue but is obviously not ideal.
• For the needed HTML tags: using html files for the actual mermaid stuff that is then included in the markdown, using HTML tags in the markdown directly, using separate .mermaid files

However to no avail, the <pre><code></code></pre> tags always appear

Does anyone have any suggestions on how this could be achieved? I am willing to make the changes but will need a bit of guidance.

[lsegal]

If you're including mermaid.js and making template customizations, what's stopping you from including an extra script to detect mermaid graphs inside of code blocks instead of pre tags? Surely the library can be configured to detect graphs in multiple ways?

https://mermaid.js.org/config/usage.html#using-mermaid-run is just one example.