cypress/platform/knsv.html

<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';
        /* font-size: 18px !important; */
        width: 100%;
        display: flex;
        }
      h1 { color: grey;}
      .mermaid2,.mermaid3 {
        display: none;
      }
      .mermaid svg {
        /* font-size: 18px !important; */
      }
    </style>
  </head>
  <body>


<div class="mermaid2" style="width: 50%;">
      journey
      title Adding journey diagram functionality to mermaid
      accTitle: Adding acc journey diagram functionality to mermaid
      accDescr {
        My multi-line description
        of the diagram
      }
      section Order from website
</div>
<div class="mermaid2" style="width: 50%;">
   pie
      accTitle: My Pie Chart Accessibility Title
      accDescr: My Pie Chart Accessibility Description

    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
</div>
<div class="mermaid2" style="width: 50%;">
  gitGraph
      accTitle: My Gitgraph Accessibility Title
      accDescr: My Gitgraph Accessibility Description

     commit
     commit
     branch develop
     checkout develop
     commit
     commit
     checkout main
     merge develop
     commit
     commit
</div>
<div class="mermaid2" style="width: 50%;">
   sequenceDiagram
      title: My Sequence Diagram Title
      accTitle: My Acc Sequence Diagram
      accDescr: My Sequence Diagram Description

      Alice->>John: Hello John, how are you?
      John-->>Alice: Great!
      Alice-)John: See you later!
</div>
      <div class="mermaid2" style="width: 50%;">
graph TD
    A -->|000| B
    B -->|111| C

    linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
        </div>
      <div class="mermaid2" style="width: 100%;">
  journey
      accTitle: My User Journey Diagram
      accDescr: My User Journey Diagram Description

      title My working day
      section Go to work
        Make tea: 5: Me
        Go upstairs: 3: Me
        Do work: 1: Me, Cat
      section Go home
        Go downstairs: 5: Me
        Sit down: 5: Me
      </div>
      <div class="mermaid2" style="width: 100%;">
requirementDiagram
      accTitle: My req Diagram
      accDescr: My req Diagram Description

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    functionalRequirement test_req2 {
    id: 1.1
    text: the second test text.
    risk: low
    verifymethod: inspection
    }

    performanceRequirement test_req3 {
    id: 1.2
    text: the third test text.
    risk: medium
    verifymethod: demonstration
    }

    element test_entity {
    type: simulation
    }

    element test_entity2 {
    type: word doc
    docRef: reqs/test_entity
    }


    test_entity - satisfies -> test_req2
    test_req - traces -> test_req2
    test_req - contains -> test_req3
    test_req <- copies - test_entity2
      </div>
      <div class="mermaid" style="width: 100%;">
stateDiagram
  state Active {
    Idle
  }
  Inactive --> Idle: ACT
  Active --> Active: LOG
      </div>
      <div class="mermaid2" style="width: 100%;">
      graph TB
        accTitle: My flowchart
        accDescr: My flowchart Description
        subgraph One
          a1-->a2-->a3
        end
      </div>
      <div class="mermaid2" style="width: 100%;">
        sequenceDiagram
          A ->> B: 1
          rect rgb(204, 0, 102)
            break yes
              rect rgb(0, 204, 204)
                C ->> C: 0
              end
            end
          end
          B ->> A: Return
  </div>
      <div class="mermaid2" style="width: 100%;">
classDiagram
accTitle: My class diagram
accDescr: My class diagram Description
Class01 <|-- AveryLongClass : Cool
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  int id
  size()
}
      </div>
      <div class="mermaid2" style="width: 100%;">
        stateDiagram
        accTitle: Apa
        accDescr: One that can climb better then any man
      [*] --> S1
      state "Some long name" as S1
      </div>
      <div class="mermaid2" style="width: 100%;">
        classDiagram
          Animal "1" <|-- Duck
          Animal <|-- Fish
          Animal <--o Zebra
          Animal : +int age
          Animal : +String gender
          Animal: +isMammal()
          Animal: +mate()
          class Duck{
            +String beakColor
            +swim()
            +quack()
          }
          class Fish{
            -int sizeInFeet
            -canEat()
          }
          class Zebra{
            +bool is_wild
            +run()
          }
    </div>

  <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        // theme: 'dark',
        // theme: 'forest',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        flowchart: {
    nodeSpacing: 10,
    curve: 'cardinal',
    htmlLabels: true,
    useMaxWidth: false,
    // defaultRenderer: 'dagre-d3',
  },
  class: {
    // defaultRenderer: 'dagre-d3',
    htmlLabels: true,
  },
        // gantt: { axisFormat: '%m/%d/%Y' },
  //       sequence: {
  //   actorFontFamily: 'courier',
  //   actorMargin: 50,
  //   showSequenceNumbers: false,
  //   // hideUnusedParticipants: true,
  //   // forceMenus: true,
  // },
  //       // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
        // fontFamily: '"times", sans-serif',
        // fontFamily: 'courier',
        state: {
          nodeSpacing: 50,
          rankSpacing: 50,
        },
        logLevel: 0,
        fontSize: 18,
        curve: 'cardinal',
        // securityLevel: 'sandbox',
        // themeVariables: {relationLabelColor: 'red'}
      });
      function callback() {
  alert('It worked');
}

function clickByFlow(elemName) {
  const div = document.createElement('div');
  div.className = 'created-by-click';
  div.style = 'padding: 20px; background: green; color: white;';
  div.innerText = 'Clicked By Flow';

  document.getElementsByTagName('body')[0].appendChild(div);
}
    </script>
  </body>
</html>