Mermaid.js in Knowledege is a game changer for AI Knowledge Publishing

[rafepurnell]

I have been using the ServiceNow MCP to manage Knowledge Documents. Its biggest downside was the difficulty in showing images as they need to be attached. Using AI to generate knowledge documents would be greatly improved if mermaid diagrams were possible.
The solution I have working needed:

 - UI Script

 - Widget (Wrapper for kb_article_view)
 - 

UI Script (This enables mermaid diagrams in the backend)
 - API Name: MermaidJS

 - UI Type: Desktop
 - Global: true

 - Description: Mermaid JS Script
 - Script: 

    addLoadEvent(function() {

        if (typeof mermaid === 'undefined') {

            var script = document.createElement('script');

            script.src='https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';

            script.onload = function() {

                mermaid.initialize({ startOnLoad: true });

            };

                document.head.appendChild(script);

        }

    });

Widget (Wrapper for sp portal kb_article_view)

 - Name: KB Article View Wrapper
 - ID: kb_article_view_wrapper
 - Description: KB Article Page wrapper for injecting mermaid functionality
 - Body HTML template: <sp-widget widget="::c.options.kbViewWidget" name="kb_article_view"></sp-widget>
 - Client Controller: 

    function($scope, $timeout) {

        $timeout(function() {

            if (!window.mermaid) {

                var script = document.createElement('script');

                script.src='https://cdn.jsdelivr.net/npm/mermaid@10.9.3/dist/mermaid.min.js';

                script.onload = function() {

                    mermaid.run({ querySelector: '.mermaid' });

                };

                document.head.appendChild(script);

            } else {

                mermaid.run({ querySelector: '.mermaid' });

            }

        }, 1000); // Wait for child widget (KB Article) to render

    }

SP Pages add the KB Article View Wrapper to the Knowledge Article View SP Page
Need to be in Knowledge Management Portal scope to make the change.
In the Page designer:
  - I added the KB Article View Wrapper underneath the Knowledge Article Content

<table style="border-collapse: collapse; width: 100%; border-width: 1px; background-color: rgb(240, 240, 240);" border="1"><colgroup><col style="width: 100%;"></colgroup>
<tbody>
<tr>
<td>
<pre class="mermaid">sequenceDiagram
    Alice -&gt;&gt; Bob: Hello Bob, how are you?
    Bob--&gt;&gt;John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br>long time, so long<br>that the text does<br>not fit on a row.

    Bob--&gt;Alice: Checking with John...
    Alice-&gt;John: Yes... John, how are you?
</pre>
</td>
</tr>
</tbody>
</table>
This enable mermaid in the portal for knowledge documents

Knowledge Article Format
To keep things tidy in the knowledge article I ensure the Mermaid Diagram in in a single cell table. 
This is the format I use

<table style="border-collapse: collapse; width: 100%; border-width: 1px; background-color: rgb(240, 240, 240);" border="1"><colgroup><col style="width: 100%;"></colgroup>
<tbody>
<tr>
<td>
<pre class="mermaid">sequenceDiagram
    Alice -&gt;&gt; Bob: Hello Bob, how are you?
    Bob--&gt;&gt;John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br>long time, so long<br>that the text does<br>not fit on a row.

    Bob--&gt;Alice: Checking with John...
    Alice-&gt;John: Yes... John, how are you?
</pre>
</td>
</tr>
</tbody>
</table>

The update set contains the UI Script and the Widget. SP Pages need to be updated manually

Throw in proper category management and your knowledge base becomes navigable.

[rafepurnell]

Please ignore the html in the SP Pages add the KB Article View Wrapper to the Knowledge Article View SP Page section. It should not be there. Seems I was over keen on the cut n paste. 
I cant seem to edit the article to tidy it up. 🙄
Hope this is useful to people