<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Courier New', Courier, monospace;
        /* font-size: 18px !important; */
        }
      h1 { color: grey;}
      .mermaid2 {
        display: none;
      }
      .mermaid {
        border: 1px solid red;
        font-family: 'Courier New', Courier, monospace;
        /* font-size: 18px !important; */
      }
    </style>
  </head>
  <body>
    <div>info below</div>
    <div class="">
      <div class="mermaid2" style="width: 100%; height: 400px;">
flowchart TB;subgraph "number as labels";1;end;
      </div>
      <div class="mermaid2" style="width: 100%; height: 400px;">
flowchart TB;a[APA];
      </div>
      <div class="mermaid2" style="margin-left:100px;">
graph TD
      work --> sleep
      sleep --> work
      eat --> sleep
      work --> eat
  </div>
      <div class="mermaid2" style="margin-left:100px;">
flowchart TD
      work --> sleep
      sleep --> work
      eat --> sleep
      work --> eat
  </div>
      <div class="mermaid2" style="">
 graph TB
      A
      B
      subgraph foo[Foo SubGraph]
        C
        D
      end
      subgraph bar[Bar SubGraph]
        E
        F
      end
      G

      A-->B
      B-->C
      C-->D
      B-->D
      D-->E
      E-->A
      E-->F
      F-->D
      F-->G
      B-->G
      G-->D

      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
      style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
    </div>
    <div class="mermaid2" style="">
      graph TB
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
      A
      B
      subgraph foo[Foo SubGraph]
        C
        D
      end
      subgraph bar[Bar SubGraph]
        E
        F
      end
      G

      A-->B
      B-->C
      C-->D
      B-->D
      D-->E
      E-->A
      E-->F
      F-->D
      F-->G
      B-->G
      G-->D

      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
    </div>
      <div class="mermaid2" style="">
      graph TD
        A[Christmas] ==> D
        A[Christmas] -->|Get money| B(Go shopping)
        A[Christmas] ==> C
    </div>
    <div class="mermaid2" style="">
      graph TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
        A[Christmas] ==> D
        A[Christmas] -->|Get money| B(Go shopping)
        A[Christmas] ==> C
    </div>
      <div class="mermaid2" style="">
      flowchart TD
        A[Christmas] ==> D
        A[Christmas] -->|Get money| B(Go shopping)
        A[Christmas] ==> C
    </div>
    <div class="mermaid2" style="">
      flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
        A[Christmas] ==> D
        A[Christmas] -->|Get money| B(Go shopping)
        A[Christmas] ==> C
    </div>
      <div class="mermaid2" style="">
flowchart LR
        a["<strong>Haiya</strong>"]---->b
</div>
      <div class="mermaid" style="">
flowchart LR
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
        a["<strong>Haiya</strong>"]---->b
</div>
    <div class="mermaid2" style="">
      flowchart TD
        A[Christmas] ==> D
        A[Christmas] -->|Get money| B(Go shopping)
        A[Christmas] ==> C
    </div>
    <div class="mermaid2" style="">
      flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
        A[Christmas] ==> D
        A[Christmas] -->|Get money| B(Go shopping)
        A[Christmas] ==> C
    </div>
    <div class="mermaid2" style="">
      %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
classDiagram-v2
      Class01 <|-- AveryLongClass : Cool
      &lt;&lt;interface&gt;&gt; Class01
      Class03 *-- Class04
      Class05 o-- Class06
      Class07 .. Class08
      Class09 --> C2 : Where am i?
      Class09 --* C3
      Class09 --|> Class07
      Class12 <|.. Class08
      Class11 ..>Class12
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : size()
      Class01 : int chimp
      Class01 : int gorilla
      Class01 : -int privateChimp
      Class01 : +int publicGorilla
      Class01 : #int protectedMarmoset
      Class08 <--> C2: Cool label
      class Class10 {
        &lt;&lt;service&gt;&gt;
        int id
        test()
      }
      </div>
    <div class="mermaid2" style="">
classDiagram-v2
      Class01 <|-- AveryLongClass : Cool
      &lt;&lt;interface&gt;&gt; Class01
      Class03 *-- Class04
      Class05 o-- Class06
      Class07 .. Class08
      Class09 --> C2 : Where am i?
      Class09 --* C3
      Class09 --|> Class07
      Class12 <|.. Class08
      Class11 ..>Class12
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : size()
      Class01 : int chimp
      Class01 : int gorilla
      Class01 : -int privateChimp
      Class01 : +int publicGorilla
      Class01 : #int protectedMarmoset
      Class08 <--> C2: Cool label
      class Class10 {
        &lt;&lt;service&gt;&gt;
        int id
        test()
      }
      </div>
    <div class="mermaid" style="">
flowchart BT
   subgraph S1
    sub1 -->sub2
   end
  subgraph S2
    sub4
   end
   S1 --> S2
   sub1 --> sub4
      </div>
  <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        // theme: 'neutral',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
        flowchart: { curve: 'cardinal', htmlLabels: false },
        // htmlLabels: true,
        // gantt: { axisFormat: '%m/%d/%Y' },
        // sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        // fontFamily: '"times", sans-serif',
        fontFamily: 'courier',
        // fontSize: 18,
        // curve: 'cardinal',
        securityLevel: 'loose',
        // themeVariables: {relationLabelColor: 'red'}
      });
      function callback() {
  alert('It worked');
}
    </script>
  </body>
</html>
