diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.ts b/packages/mermaid/src/diagrams/requirement/requirementDb.ts index b7c628040..cd064135e 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementDb.ts +++ b/packages/mermaid/src/diagrams/requirement/requirementDb.ts @@ -328,7 +328,8 @@ export class RequirementDB implements DiagramDB { thickness: 'normal', type: 'normal', pattern: isContains ? 'normal' : 'dashed', - arrowTypeEnd: isContains ? 'requirement_contains' : 'requirement_arrow', + arrowTypeStart: isContains ? 'requirement_contains' : '', + arrowTypeEnd: isContains ? '' : 'requirement_arrow', look: config.look, }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js index fd1c9df20..0566a4dcc 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js @@ -423,19 +423,19 @@ const requirement_contains = (elem, type, id) => { const containsNode = elem .append('defs') .append('marker') - .attr('id', id + '_' + type + '-requirement_containsEnd') - .attr('refX', 20) + .attr('id', id + '_' + type + '-requirement_containsStart') + .attr('refX', 0) .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('circle').attr('cx', 10).attr('cy', 10).attr('r', 9).attr('fill', 'none'); - containsNode.append('line').attr('x1', 0).attr('x2', 20).attr('y1', 10).attr('y2', 10); + containsNode.append('line').attr('x1', 1).attr('x2', 19).attr('y1', 10).attr('y2', 10); - containsNode.append('line').attr('y1', 0).attr('y2', 20).attr('x1', 10).attr('x2', 10); + containsNode.append('line').attr('y1', 1).attr('y2', 19).attr('x1', 10).attr('x2', 10); }; // TODO rename the class diagram markers to something shape descriptive and semantic free