demos/classchart.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>


	<div 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()
		}
	</div>

	<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>