mermaid/cypress/platform/gitgraph.html

<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); */
        background:#111;
        /* background:#333; */
        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>
    <div class="mermaid" style="width: 100%; height: 20%;">
       gitGraph:
       commit "Ashish"
       branch newbranch
       checkout newbranch
       commit id:"1111"
       commit tag:"test"
       checkout main
       commit type: HIGHLIGHT
       commit
       merge newbranch
       commit
       branch b2
       commit

    </div>
    <div class="mermaid" style="width: 100%; height: 20%;">
      gitGraph:
      commit
      branch hotfix
      checkout hotfix
      commit
      branch develop
      checkout develop
      commit id:"ash" tag:"abc"
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
      checkout main
      checkout hotfix
      commit type:NORMAL
      checkout develop
      commit type:REVERSE
      checkout featureB
      commit
      checkout main
      merge hotfix
      checkout featureB
      commit
      checkout develop
      branch featureA
      commit
      checkout develop
      merge hotfix
      checkout featureA
      commit
      checkout featureB
      commit
      checkout develop
      merge featureA
      branch release
      checkout release
      commit
      checkout main
      commit
      checkout release
      merge main
      checkout develop
      merge release

   </div>
    <div class="mermaid2" style="width: 100%; height: 20%;">
      gitGraph:
      commit
      commit
      branch newbranch
      commit
      merge main
    </div>
      <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        theme: 'base',
        themeVariables: {
          primaryColor: '#9400D3',
          darkMode: true,
          // background: '#222',
          textColor: 'white',
          primaryTextColor: '#f4f4f4',

          // nodeBkg: '#ff0000',
          // mainBkg: '#0000ff',
          // tertiaryColor: '#ffffcc',
        },
        // theme: 'forest',
        // theme: 'neutral',
        // theme: 'dark',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 1,
        flowchart: { curve: 'linear', htmlLabels: true },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        // fontFamily: '"arial", sans-serif',
        // themeVariables: {
        //   fontFamily: '"arial", sans-serif',
        // },
        curve: 'linear',
        securityLevel: 'loose',
      });
      function callback() {
  alert('It worked');
}
    </script>
  </body>
</html>
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`<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 {`
Theming changes for base theme 2022-03-03 19:58:43 +01:00			`/* background: rgb(221, 208, 208); */`
Added theming support for gitgraph 2022-03-17 20:07:27 +01:00			`background:#111;`
			`/* background:#333; */`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`font-family: 'Arial';`
			`}`
Theming changes for base theme 2022-03-03 19:58:43 +01:00			`/* h1 { color: white;} */`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`.mermaid2 {`
			`display: none;`
			`}`
			`.customCss > rect, .customCss{`
			`fill:#FF0000 !important;`
			`stroke:#FFFF00 !important;`
			`stroke-width:4px !important;`
			`}`
			`</style>`
			`</head>`
			`<body>`
			`<h1>info below</h1>`
#1252 Adding support for tags 2022-03-24 20:25:22 +01:00			`<div class="mermaid" style="width: 100%; height: 20%;">`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`gitGraph:`
			`commit "Ashish"`
			`branch newbranch`
			`checkout newbranch`
			`commit id:"1111"`
			`commit tag:"test"`
Update the gitgraph example 2022-03-24 17:32:50 +01:00			`checkout main`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`commit type: HIGHLIGHT`
			`commit`
			`merge newbranch`
			`commit`
			`branch b2`
			`commit`
Bends of the lines when branching 2022-03-03 17:29:14 +01:00
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`</div>`
#1252 Adding support for tags 2022-03-24 20:25:22 +01:00			`<div class="mermaid" style="width: 100%; height: 20%;">`
replace mock data with real 2022-02-24 18:40:22 +01:00			`gitGraph:`
			`commit`
Bends of the lines when branching 2022-03-03 17:29:14 +01:00			`branch hotfix`
			`checkout hotfix`
			`commit`
replace mock data with real 2022-02-24 18:40:22 +01:00			`branch develop`
			`checkout develop`
Added sample for tag,type and id for a commit 2022-02-24 19:54:28 +01:00			`commit id:"ash" tag:"abc"`
replace mock data with real 2022-02-24 18:40:22 +01:00			`branch featureB`
			`checkout featureB`
Added sample for tag,type and id for a commit 2022-02-24 19:54:28 +01:00			`commit type:HIGHLIGHT`
Update the gitgraph example 2022-03-24 17:32:50 +01:00			`checkout main`
replace mock data with real 2022-02-24 18:40:22 +01:00			`checkout hotfix`
Added sample for tag,type and id for a commit 2022-02-24 19:54:28 +01:00			`commit type:NORMAL`
replace mock data with real 2022-02-24 18:40:22 +01:00			`checkout develop`
Added sample for tag,type and id for a commit 2022-02-24 19:54:28 +01:00			`commit type:REVERSE`
replace mock data with real 2022-02-24 18:40:22 +01:00			`checkout featureB`
			`commit`
Update the gitgraph example 2022-03-24 17:32:50 +01:00			`checkout main`
replace mock data with real 2022-02-24 18:40:22 +01:00			`merge hotfix`
			`checkout featureB`
			`commit`
			`checkout develop`
			`branch featureA`
			`commit`
			`checkout develop`
			`merge hotfix`
			`checkout featureA`
			`commit`
			`checkout featureB`
			`commit`
			`checkout develop`
			`merge featureA`
			`branch release`
			`checkout release`
			`commit`
Update the gitgraph example 2022-03-24 17:32:50 +01:00			`checkout main`
replace mock data with real 2022-02-24 18:40:22 +01:00			`commit`
			`checkout release`
Update the gitgraph example 2022-03-24 17:32:50 +01:00			`merge main`
replace mock data with real 2022-02-24 18:40:22 +01:00			`checkout develop`
			`merge release`
Bends of the lines when branching 2022-03-03 17:29:14 +01:00
replace mock data with real 2022-02-24 18:40:22 +01:00			`</div>`
#1252 Adding support for tags 2022-03-24 20:25:22 +01:00			`<div class="mermaid2" style="width: 100%; height: 20%;">`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`gitGraph:`
			`commit`
			`commit`
			`branch newbranch`
			`commit`
Fixed more example cases 2022-03-24 17:43:23 +01:00			`merge main`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`</div>`
			`<script src="./mermaid.js"></script>`
			`<script>`
			`mermaid.parseError = function (err, hash) {`
replace mock data with real 2022-02-24 18:40:22 +01:00			`// console.error('Mermaid error: ', err);`
			`};`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`mermaid.initialize({`
Theming changes for base theme 2022-03-03 19:58:43 +01:00			`theme: 'base',`
Added theming support for gitgraph 2022-03-17 20:07:27 +01:00			`themeVariables: {`
			`primaryColor: '#9400D3',`
			`darkMode: true,`
			`// background: '#222',`
			`textColor: 'white',`
			`primaryTextColor: '#f4f4f4',`

			`// nodeBkg: '#ff0000',`
			`// mainBkg: '#0000ff',`
			`// tertiaryColor: '#ffffcc',`
			`},`
			`// theme: 'forest',`
			`// theme: 'neutral',`
			`// theme: 'dark',`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`// arrowMarkerAbsolute: true,`
			`// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',`
replace mock data with real 2022-02-24 18:40:22 +01:00			`logLevel: 1,`
			`flowchart: { curve: 'linear', htmlLabels: true },`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`// gantt: { axisFormat: '%m/%d/%Y' },`
			`sequence: { actorMargin: 50, showSequenceNumbers: true },`
			`// sequenceDiagram: { actorMargin: 300 } // deprecated`
			`// fontFamily: '"arial", sans-serif',`
			`// themeVariables: {`
			`// fontFamily: '"arial", sans-serif',`
			`// },`
			`curve: 'linear',`
replace mock data with real 2022-02-24 18:40:22 +01:00			`securityLevel: 'loose',`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`});`
replace mock data with real 2022-02-24 18:40:22 +01:00			`function callback() {`
			`alert('It worked');`
			`}`
#1713, #1719, # 1720 2020-10-22 21:40:08 +02:00			`</script>`
			`</body>`
			`</html>`