Send all edge data and add markers

packages/mermaid/src/diagrams/requirement/requirementDb.ts

@@ -177,7 +177,6 @@ const getData = () => {
   const config = getConfig();
   const nodes: Node[] = [];
   const edges: Edge[] = [];
-
   for (const requirement of requirements.values()) {
     const node = requirement as unknown as Node;
     node.shape = 'requirementBox';
@@ -195,13 +194,20 @@ const getData = () => {
 
   for (const relation of relations) {
     let counter = 0;
+    const isContains = relation.type === Relationships.CONTAINS;
     const edge: Edge = {
       id: `${relation.src}-${relation.dst}-${counter}`,
       start: requirements.get(relation.src)?.id,
       end: requirements.get(relation.dst)?.id,
-      type: relation.type,
+      label: `<<${relation.type}>>`,
       classes: 'relationshipLine',
-      style: ['fill:none'],
+      style: ['fill:none', isContains ? '' : 'stroke-dasharray: 10,7'],
+      labelpos: 'c',
+      thickness: 'normal',
+      type: 'normal',
+      pattern: isContains ? 'normal' : 'dashed',
+      arrowTypeEnd: isContains ? 'requirement_contains' : 'requirement_arrow',
+      look: config.look,
     };
 
     edges.push(edge);

packages/mermaid/src/diagrams/requirement/requirementRenderer-unified.ts

@@ -19,9 +19,9 @@ export const draw = async function (text: string, id: string, _version: string,
   data4Layout.type = diag.type;
   data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout);
 
-  data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
-  data4Layout.rankSpacing = conf?.rankSpacing || 50;
-  data4Layout.markers = ['aggregation', 'extension', 'composition', 'dependency', 'lollipop'];
+  data4Layout.nodeSpacing = conf?.nodeSpacing ?? 50;
+  data4Layout.rankSpacing = conf?.rankSpacing ?? 50;
+  data4Layout.markers = ['requirement_contains', 'requirement_arrow'];
   data4Layout.diagramId = id;
   await render(data4Layout, svg);
   const padding = 8;

packages/mermaid/src/diagrams/requirement/styles.js

@@ -52,6 +52,9 @@ const getStyles = (options) => `
     fill: ${options.nodeTextColor || options.textColor};
     color: ${options.nodeTextColor || options.textColor};
   }
+  .labelBkg {
+    background-color: ${options.edgeLabelBackground};
+  }
 
 `;
 // fill', conf.rect_fill)

packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts

@@ -35,6 +35,8 @@ const arrowTypesMap = {
   composition: 'composition',
   dependency: 'dependency',
   lollipop: 'lollipop',
+  requirement_arrow: 'requirement_arrow',
+  requirement_contains: 'requirement_contains',
 } as const;
 
 const addEdgeMarker = (

packages/mermaid/src/rendering-util/rendering-elements/markers.js

@@ -277,6 +277,43 @@ const barb = (elem, type, id) => {
     .append('path')
     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
 };
+const requirement_arrow = (elem, type, id) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', id + '_' + type + '-requirement_arrowEnd')
+    .attr('refX', 20)
+    .attr('refY', 10)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 20)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr(
+      'd',
+      `M0,0
+      L20,10
+      M20,10
+      L0,20`
+    );
+};
+const requirement_contains = (elem, type, id) => {
+  const containsNode = elem
+    .append('defs')
+    .append('marker')
+    .attr('id', id + '_' + type + '-requirement_containsEnd')
+    .attr('refX', 20)
+    .attr('refY', 10)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 20)
+    .attr('orient', 'auto')
+    .append('g');
+
+  containsNode.append('circle').attr('cx', 10).attr('cy', 10).attr('r', 10).attr('fill', 'none');
+
+  containsNode.append('line').attr('x1', 0).attr('x2', 20).attr('y1', 10).attr('y2', 10);
+
+  containsNode.append('line').attr('y1', 0).attr('y2', 20).attr('x1', 10).attr('x2', 10);
+};
 
 // TODO rename the class diagram markers to something shape descriptive and semantic free
 const markers = {
@@ -289,5 +326,7 @@ const markers = {
   circle,
   cross,
   barb,
+  requirement_arrow,
+  requirement_contains,
 };
 export default insertMarkers;