Embedded Mermaid diagrams in the IPython Notebook

Embedded Mermaid diagrams in the IPython Notebook.ipynb

nbviewer is able. https://nbviewer.org/gist/bollwyvl/e51b4e724f0b82669c84

This didn't work for me and I found errors in the chrome dev tools that allowed me to find that there was an error resolved in a new mermaid so I'd sub out the above <script> with a link to a current mermaid version from a cdn you can get from say here:
https://cdnjs.com/libraries/mermaid
Also I'm using jupyter lab which didn't have jquery loaded, you can see this if the dev tools give you an error about '$'
to fix that I just added a script tag importing jquery from a cdn.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.7/mermaid.min.js" integrity_no="sha512-1ypa9tdUrJAWv5g28Mb5x0zXaUuI4SBofKff88OGyk5D/oOd4x1IPxYHsx3K81bwBKt8NVUvGgw7TgNZ6PJX2A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
    .mermaid *{font-family: sans-serif; }
    .mermaid .node, .mermaid .cluster{
      fill: white !important;
      stroke: black !important;
      stroke-width: 1px !important;
    }
    .mermaid div{
      text-align: center;
    }
    .mermaid .label{
      color: black;
    }
</style>
<script>$(function(){
    // mermaid load a touch weirdly: try immediately, but try again later if it's not available
    var initMermaid = function(){
        return (window.mermaid && mermaid.init()) || setTimeout(initMermaid, 50);         
    }
    initMermaid();

    // for live editing, re-render only the text of the current cell
    window.IPython && $(IPython.events).on("rendered.MarkdownCell", function(evt, data){
        // this is using a hacked mermaid that accepts some nodes!
        mermaid.init(undefined, data.cell.element.find(".mermaid"));
    });
});</script>```