Render Mermaid.js diagrams in a Jupyter/IPython Notebook

README.md

Usage

renderMermaid('graph TB\na-->b')

Output

graph TB
a-->b

Loading

renderMermaid.py

from IPython.display import display, HTML
import random
import json

def renderMermaid(graphDefinition: str):
  elementId = "viz-" + str(random.randint(0, 1000000000))

  # Render the Mermaid string
  display(HTML(f"""
  <div id="{elementId}">Loading...</div>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({{ startOnLoad: false }});

    const drawDiagram = async function () {{
      const element = document.querySelector("#{elementId}");
      const graphDefinition = {json.dumps(graphDefinition)};
      const {{ svg }} = await mermaid.render("{elementId}-viz", graphDefinition);
      element.innerHTML = svg;
    }};

    await drawDiagram();
  </script>
  """))