mirror of
				https://github.com/mermaid-js/mermaid.git
				synced 2025-11-04 12:54:08 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			58 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			58 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html>
 | 
						|
<html>
 | 
						|
  <head>
 | 
						|
    <meta charset="utf-8" />
 | 
						|
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 | 
						|
    <title>Mermaid Quick Test Page</title>
 | 
						|
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
 | 
						|
    <style>
 | 
						|
      div.mermaid {
 | 
						|
        /* font-family: 'trebuchet ms', verdana, arial; */
 | 
						|
        font-family: 'Courier New', Courier, monospace !important;
 | 
						|
      }
 | 
						|
    </style>
 | 
						|
  </head>
 | 
						|
 | 
						|
  <body>
 | 
						|
    <pre class="mermaid">
 | 
						|
		classDiagram
 | 
						|
		title Animal Diagram
 | 
						|
		accDescription The animal class diagram
 | 
						|
		Animal <|-- Duck
 | 
						|
		Animal <|-- Fish
 | 
						|
		Animal <|-- 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()
 | 
						|
		}
 | 
						|
    </pre>
 | 
						|
 | 
						|
    <script src="./mermaid.js"></script>
 | 
						|
    <script>
 | 
						|
      mermaid.initialize({
 | 
						|
        theme: 'forest',
 | 
						|
        // themeCSS: '.node rect { fill: red; }',
 | 
						|
        logLevel: 3,
 | 
						|
        securityLevel: 'loose',
 | 
						|
        flowchart: { curve: 'basis' },
 | 
						|
        gantt: { axisFormat: '%m/%d/%Y' },
 | 
						|
        sequence: { actorMargin: 50 },
 | 
						|
        // sequenceDiagram: { actorMargin: 300 } // deprecated
 | 
						|
      });
 | 
						|
    </script>
 | 
						|
  </body>
 | 
						|
</html>
 |