<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: 'Arial';
        }
      h1 { color: grey;}
      .mermaid2 {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
    <div class="flex">
      <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart BT
    subgraph two
    b1
    end
    subgraph three
    c1-->c2
    end
    c1 --apa apa apa--> b1
    two --> c2
      </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: true },
        // 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>
