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 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: Mee
</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
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       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%;">
        info
      </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="mermaid2" style="width: 100%;">
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
      </div>
      <div class="mermaid2" style="width: 100%;">
stateDiagram
  state Active {
    Idle
  }
  Inactive --> Idle: ACT
  Active --> Active: LOG
      </div>
      <div class="mermaid2" style="width: 100%;">
      flowchart 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="mermaid" style="width: 100%;">
%%{init: {'config': {'wrap': true }}}%%
        sequenceDiagram
        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
        A->>Bob: Hola
        Bob-->A: Pasten !
      </div>
      <div class="mermaid2" style="width: 100%;">
      gitGraph
       commit id: "ZERO"
       branch develop
       commit id:"A"
       checkout main
       commit id:"ONE"
       checkout develop
       commit id:"B"
       branch featureA
       commit id:"FIX"
       commit id: "FIX-2"
       checkout main
       commit id:"TWO"
       cherry-pick id:"A"
       commit id:"THREE"
       cherry-pick id:"FIX"
       checkout develop
       commit id:"C"
       merge featureA
       </div>
       <div class="mermaid2" style="width: 100%;">
flowchart TD
      A[Christmas] -->|Get money| B(Go shopping)
      B --> C{Let me think}
      C -->|One| D[Laptop]
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      </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>
          <div class="mermaid2" style="width: 100%;">
        erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }
        </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,
  },
  sequence: {
    // mirrorActors: false,'
    wrap: false,
  },
        // 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,
          defaultRenderer: 'dagre-d3',
        },
        logLevel: 0,
        fontSize: 18,
        curve: 'cardinal',
        // securityLevel: 'sandbox',
        // themeVariables: {relationLabelColor: 'red'}
        wrap: true,
      });
      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>