Embedded Mermaid diagrams in the IPython Notebook

Embedded Mermaid diagrams in the IPython Notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# This is a Markdown Cell with some embedded [mermaid](https://github.com/knsv/mermaid)\n",
    "\n",
    "> Wait for the embedded mermaid...\n",
    "\n",
    "<div class=\"mermaid\">\n",
    "    graph LR\n",
    "        A[Square Rect] -- Link text --> B((Circle))\n",
    "        A --> C(Round Rect)\n",
    "        B --> D{Rhombus}\n",
    "        C --> D\n",
    "</div>\n",
    "\n",
    "> That was great!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# This is another markdown cell.\n",
    "\n",
    "> It has two mersmaid.\n",
    "\n",
    "<div class=\"mermaid\">graph TB\n",
    "    subgraph one\n",
    "        a1-->a2\n",
    "    end\n",
    "    subgraph two\n",
    "        b1-->b2\n",
    "    end\n",
    "    subgraph three\n",
    "        c1-->c2\n",
    "    end\n",
    "    c1-->a2\n",
    "</div>\n",
    "\n",
    "### Here's some markdown between them!\n",
    "\n",
    "<div class=\"mermaid\">sequenceDiagram\n",
    "    participant Alice\n",
    "    participant Bob\n",
    "    Alice->>John: Hello John, how are you?\n",
    "    loop Healthcheck\n",
    "        John->>John: Fight against hypochondria\n",
    "    end\n",
    "    Note right of John: Rational thoughts <br/>prevail...\n",
    "    John-->>Alice: Great!\n",
    "    John->>Bob: How about you?\n",
    "    Bob-->>John: Jolly good!\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "> The below must be included somewhere, but the end is fine!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 70,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"//cdn.rawgit.com/bollwyvl/53e64cdafba38461943b/raw/0815758d591dfaf0f4918b388aed1bf11d82160d/mermaid.full.js\"></script>\n",
       "<style>\n",
       "    .mermaid *{font-family: sans-serif; }\n",
       "    .mermaid .node, .mermaid .cluster{\n",
       "      fill: white !important;\n",
       "      stroke: black !important;\n",
       "      stroke-width: 1px !important;\n",
       "    }\n",
       "    .mermaid div{\n",
       "      text-align: center;\n",
       "    }\n",
       "    .mermaid .label{\n",
       "      color: black;\n",
       "    }\n",
       "</style>\n",
       "<script>$(function(){\n",
       "    // mermaid load a touch weirdly: try immediately, but try again later if it's not available\n",
       "    var initMermaid = function(){\n",
       "        return (window.mermaid && mermaid.init()) || setTimeout(initMermaid, 50);         \n",
       "    }\n",
       "    initMermaid();\n",
       "\n",
       "    // for live editing, re-render only the text of the current cell\n",
       "    window.IPython && $(IPython.events).on(\"rendered.MarkdownCell\", function(evt, data){\n",
       "        // this is using a hacked mermaid that accepts some nodes!\n",
       "        mermaid.init(undefined, data.cell.element.find(\".mermaid\"));\n",
       "    });\n",
       "});</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<script src=\"//cdn.rawgit.com/bollwyvl/53e64cdafba38461943b/raw/0815758d591dfaf0f4918b388aed1bf11d82160d/mermaid.full.js\"></script>\n",
    "<style>\n",
    "    .mermaid *{font-family: sans-serif; }\n",
    "    .mermaid .node, .mermaid .cluster{\n",
    "      fill: white !important;\n",
    "      stroke: black !important;\n",
    "      stroke-width: 1px !important;\n",
    "    }\n",
    "    .mermaid div{\n",
    "      text-align: center;\n",
    "    }\n",
    "    .mermaid .label{\n",
    "      color: black;\n",
    "    }\n",
    "</style>\n",
    "<script>$(function(){\n",
    "    // mermaid load a touch weirdly: try immediately, but try again later if it's not available\n",
    "    var initMermaid = function(){\n",
    "        return (window.mermaid && mermaid.init()) || setTimeout(initMermaid, 50);         \n",
    "    }\n",
    "    initMermaid();\n",
    "\n",
    "    // for live editing, re-render only the text of the current cell\n",
    "    window.IPython && $(IPython.events).on(\"rendered.MarkdownCell\", function(evt, data){\n",
    "        // this is using a hacked mermaid that accepts some nodes!\n",
    "        mermaid.init(undefined, data.cell.element.find(\".mermaid\"));\n",
    "    });\n",
    "});</script>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}

I cannot see the rendered diagrams :(

+1

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="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>```