cypress/platform/class.html from knsv/mermaid

cypress/platform/class.html
Summary

Maintainability

Test Coverage

Issues
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" 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);
        font-family: 'Arial';
      }
      h1 {
        color: white;
      }
      .mermaid2 {
        display: none;
      }
      .customCss > rect,
      .customCss {
        fill: #ff0000 !important;
        stroke: #ffff00 !important;
        stroke-width: 4px !important;
      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
    <pre class="mermaid" style="width: 100%; height: 20%">
      %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
      classDiagram
       class BankAccount{
        +String owner
        +BigDecimal balance
        +deposit(amount) bool
        +withdrawl(amount) int
       }
       cssClass "BankAccount" customCss

    </pre>
    <pre class="mermaid" style="width: 100%; height: 20%">
      %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
      classDiagram-v2
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
    </pre>
    <pre class="mermaid2" style="width: 100%; height: 20%">
        %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
        classDiagram
         class BankAccount{
          +String owner
          +BigDecimal balance
          +deposit(amount) bool
          +withdrawl(amount) int
        }
          Class01~T~ <|-- AveryLongClass : Cool
          Class03~T~ *-- Class04~T~
            Class01 : size()
            Class01 : int chimp
            Class01 : int gorilla
            Class08 <--> C2: Cool label
            class Class10~T~ {
              &lt;&lt;service&gt;&gt;
              int id
              test()
            }
            callback Class01 "callback" "A Tooltip"

    </pre>
    <pre class="mermaid2" style="width: 100%; height: 20%">
      flowchart TB
      a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
      a_a --> c --> d_d --> c_c
      classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
      class a_a apa;
      click a_a "https://www.aftonbladet.se" "apa"

    </pre>

    <pre class="mermaid2" style="width: 100%; height: 20%">
        classDiagram-v2

        classA -- classB : Inheritance
        classA -- classC : link
        classC -- classD : link
        classB -- classD
        classA --|> classB : Inheritance
        classC --* classD : Composition
        classE --o classF : Aggregation
        classG --> classH : Association
        classI -- classJ : Link(Solid)
        classK ..> classL : Dependency
        classM ..|> classN : Realization
        classO .. classP : Link(Dashed)
        classA : +attr1
        classA : attr2
        classA : method1()
        &lt;&lt;interface&gt;&gt; classB
        classB : method2() int

        Customer "1" --> "*" Ticket
        Student "1" --> "1..*" Course
        Galaxy --> "many" Star : Contains
        &lt;&lt;interface&gt;&gt; Customer

        class Shape
        callback Shape "callbackFunction" "This is a tooltip for a callback"

    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        theme: 'default',
        logLevel: 0,
        flowchart: { curve: 'linear', htmlLabels: true },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        curve: 'linear',
        securityLevel: 'loose',
      });
      function callback() {
        alert('It worked');
      }
    </script>
  </body>
</html>