mirror of
				https://github.com/mermaid-js/mermaid.git
				synced 2025-11-04 04:44:08 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			142 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			142 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			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/6.5.2/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>
 | 
						|
    <pre class="mermaid2" 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
 | 
						|
    </pre>
 | 
						|
    <pre class="mermaid" style="width: 100%; height: 20%">
 | 
						|
      %%{init: {  "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%%
 | 
						|
      gitGraph
 | 
						|
      commit
 | 
						|
      branch hotfix
 | 
						|
      checkout hotfix
 | 
						|
      commit
 | 
						|
      branch develop
 | 
						|
      checkout develop
 | 
						|
      commit id:"An id" tag:"A tag"
 | 
						|
      branch featureB
 | 
						|
      checkout featureB
 | 
						|
      commit type:HIGHLIGHT
 | 
						|
      checkout APA
 | 
						|
      checkout hotfix
 | 
						|
      commit type:NORMAL
 | 
						|
      checkout develop
 | 
						|
      commit type:REVERSE
 | 
						|
      checkout featureB
 | 
						|
      commit
 | 
						|
      checkout APA
 | 
						|
      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 APA
 | 
						|
      commit
 | 
						|
      checkout release
 | 
						|
      merge APA
 | 
						|
      checkout develop
 | 
						|
      merge release
 | 
						|
    </pre>
 | 
						|
    <pre class="mermaid2" style="width: 100%; height: 20%">
 | 
						|
      gitGraph:
 | 
						|
      commit
 | 
						|
      commit
 | 
						|
      branch newbranch
 | 
						|
      commit
 | 
						|
      merge main
 | 
						|
    </pre>
 | 
						|
    <script type="module">
 | 
						|
      import mermaid from './mermaid.esm.mjs';
 | 
						|
      mermaid.parseError = function (err, hash) {
 | 
						|
        // console.error('Mermaid error: ', err);
 | 
						|
      };
 | 
						|
      mermaid.initialize({
 | 
						|
        theme: 'default',
 | 
						|
        themeVariables: {
 | 
						|
          // primaryColor: '#9400D3',
 | 
						|
          // darkMode: false,
 | 
						|
          // 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 },
 | 
						|
        // gitGraph: { showCommitLabel: false },
 | 
						|
        // 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>
 |