This is a Markdown Cell with some embedded mermaid

Wait for the embedded mermaid...

graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D

That was great!

This is another markdown cell.

It has two mersmaid.

graph TB subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end c1-->a2

Here's some markdown between them!

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

The below must be included somewhere, but the end is fine!

In [70]:
<script src="//"></script>
    .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;
    // 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);         

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