Anyone using Mermaid diagrams in PSU?

PowerShell Universal
1 
Product: PowerShell Universal
Version: 5.6.5

Trying to generate a mermaid diagram in a psu page.

No luck with this:

New-UDPage -autoinclude -name Mermaid -Title Mermaid -Content {

    New-UDHelmet -tag 'script' -attributes @{src = 'https://unpkg.com/mermaid@8.1.0/dist/mermaid.min.js' }
     New-UDHTML -Markup @'
<pre class="mermaid">
graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Fix it];
    D --> B;
</pre>
'@
    New-UDHTML -Markup @'
<div class="mermaid">
graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Fix it];
    D --> B;
</div>

'@
}

Changing the helmet to this doesn’t help either:

    New-UDHelmet -tag 'script' -attributes @{type="module"} -content @'
      import mermaid from 'https://unpkg.com/mermaid@8.1.0/dist/mermaid.min.js';
      mermaid.initialize({ startOnLoad: true });
'@
2

I could only get this working using a button.

New-UDApp -Title "Mermaid Diagram Example" -Content {
    # 1. Add the Mermaid.js library to the page
    New-UDHelmet -Tag 'script' -Attributes @{
        src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js'
    }

    # 2. Add a container for our diagram content
    New-UDHtml -Markup @'
    <div class="mermaid" id="mermaidChart">
        graph TD;
            A[Start] --> B[Process];
            B --> C[End];
    </div>
'@
    New-UDButton -Text "Initialize Mermaid" -OnClick {
        Invoke-UDJavaScript -JavaScript @'
        if (typeof mermaid !== 'undefined') {
            mermaid.initialize({startOnLoad: true});
            mermaid.init(undefined, document.querySelectorAll('.mermaid'));
            console.log('Mermaid manually initialized');
        } else {
            console.error('Mermaid library not found!');
        }
'@
    }
}
3

Got some help from Adam…

Step 1: In the New-UDApp call, add -Scripts @(“https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js”)

then, in the page, I have a UDDynamic called Mermaid with a New-UDHTML in it. Syncing the Mermaid element causes the graph to render.

New-UDDynamic -id Mermaid -Content {

….

          New-UDHTML -Markup @"
                <pre class="mermaid">
$page:MermaidSyntax
                </pre>
"@
4

OPSEC is gonna have a field day :smiley:

What is your use case here? it looks really interesting.

5

We’re generating logical architecture diagrams showing what components/packages communicate with others (according to the product list for a customer).