Render test for requirement diagrams and updated showcase diagrams

cypress/platform/showcase_default.html

@@ -212,7 +212,45 @@ gantt
               Go downstairs: 5: Me
               Sit down: 5: Me
       </div>
+<div class="mermaid width height">
+requirementDiagram
 
+    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
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    element test_entity2 {
+    type: word doc
+    docRef: reqs/test_entity
+    }
+
+
+    test_entity - satisfies -> test_req2
+    test_req - traces -> test_req2
+    test_req - contains -> test_req3
+    test_req <- copies - test_entity2
+      </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {