<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/6.5.2/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: 'Arial';
      }
      h1 {
        color: grey;
      }
      .mermaid2 {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
    <div class="flex">
      <div class="mermaid" style="width: 50%; height: 20%">
        flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
      </div>
      <div class="mermaid2" style="width: 50%; height: 200px">
        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
        overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
        though
      </div>
      <div class="mermaid2" style="width: 50%; height: 200px">
        %%{init: {'securityLevel': 'loose'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B
        --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free
        second with,<br />or something to get around?}} C -->|One| D[Laptop] C -->|Two| E[iPhone] C
        -->|Three| F[Car] click A "index.html#link-clicked" "link test" click B callback "click
        test" classDef someclass fill:#f96; class A someclass; class C someclass;
      </div>
      <div class="mermaid2" style="width: 50%; height: 200px">
        flowchart BT subgraph a b1 -- ok --> b2 end a -- sert --> c c --> d b1 --> d a --asd123 -->
        d
      </div>
      <div class="mermaid2" style="width: 50%; height: 20%">
        stateDiagram-v2 state A { B1 --> B2: ok } A --> C: sert C --> D B1 --> D A --> D: asd123
      </div>
    </div>
    <div class="mermaid2" style="width: 50%; height: 40%">
      %% this does not produce the desired result flowchart TB subgraph container_Beta
      process_C-->Process_D end subgraph container_Alpha process_A-->process_B
      process_B-->|via_AWSBatch|container_Beta process_A-->|messages|process_C end
    </div>
    <div class="mermaid" style="width: 50%; height: 40%">
      flowchart TB a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} -->
      b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing
      #quot;elit#quot;."}}
    </div>
    <div class="mermaid2" style="width: 50%; height: 50%">
      flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
      routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
    </div>
    <div class="mermaid2" style="width: 50%; height: 50%">
      flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
      _two end sub_one --> two
    </div>
    <div class="mermaid2" style="width: 50%; height: 50%">
      flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end subgraph sub_two[Sub
      Two] _sub_two end _one end %% here, either the first or the second one sub_one --> sub_two
      _one --> b
    </div>

    <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        // theme: 'forest',
        // themeVariables:{primaryColor: '#ff0000'},
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
        flowchart: { curve: 'cardinal', htmlLabels: false },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        fontFamily: '"arial", sans-serif',
        curve: 'cardinal',
        securityLevel: 'strict',
      });
      function callback() {
        alert('It worked');
      }
    </script>
  </body>
</html>
