feat: Add accessibility fields to requirements diagram

2025-09-17 22:39:56 +02:00 · 2022-04-07 18:01:44 +00:00
parent d498106e90
commit 3d7cb212c0
7 changed files with 232 additions and 1 deletions
--- a/demos/requirements.html
+++ b/demos/requirements.html
@@ -0,0 +1,106 @@
+<!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>