demos/requirements.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">
	requirementDiagram
	title This is a title
	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
	}

	interfaceRequirement test_req4 {
	id: 1.2.1
	text: the fourth test text.
	risk: medium
	verifymethod: analysis
	}

	physicalRequirement test_req5 {
	id: 1.2.2
	text: the fifth test text.
	risk: medium
	verifymethod: analysis
	}

	designConstraint test_req6 {
	id: 1.2.3
	text: the sixth test text.
	risk: medium
	verifymethod: analysis
	}

	element test_entity {
	type: simulation
	}

	element test_entity2 {
	type: word doc
	docRef: reqs/test_entity
	}

	element test_entity3 {
	type: "test suite"
	docRef: github.com/all_the_tests
	}


	test_entity - satisfies -> test_req2
	test_req - traces -> test_req2
	test_req - contains -> test_req3
	test_req3 - contains -> test_req4
	test_req4 - derives -> test_req5
	test_req5 - refines -> test_req6
	test_entity3 - verifies -> test_req5
	test_req <- copies - test_entity2
	</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>