Skip to content

Commit

Permalink
Merge pull request #2018 from mermaid-js/2017_std_req_diagrams
Browse files Browse the repository at this point in the history 
#2017 Standardization of requirement diagrams
  • Loading branch information
@knsv
knsv committed Apr 26, 2021
2 parents 45918da + 8f09514 commit 8a893e1
Show file tree
Hide file tree
Showing 11 changed files with 186 additions and 74 deletions.
73 changes: 52 additions & 21 deletions cypress/platform/knsv.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,19 @@
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 { color: grey;}
.mermaid2 {
display: none;
}
.mermaid svg {
font-size: 12px !important;
/* font-size: 18px !important; */
}
</style>
</head>
<body>
<h1>info below</h1>
<div>info below</div>
<div class="flex">
<div class="mermaid2" style="width: 100%; height: 400px;">
%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
Expand Down Expand Up @@ -53,22 +54,51 @@ <h1>info below</h1>
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
graph TD
C --text fyra fem -->F[text ett två tre]
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
flowchart LR
subgraph A
a --> b
end
subgraph B
i -->f
end
A --> B </div>

<div class="mermaid" style="width: 100%; height: 20%;">
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>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart LR
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
Lorem --> Ipsum --> Dolor
Expand Down Expand Up @@ -124,20 +154,21 @@ <h1>info below</h1>
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'forest',
// themeVariables:{primaryColor: '#ff0000'},
// arrowMarkerAbsolute: true,
theme: 'neutral',
arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
fontFamily: 'courier',
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
fontSize: 18,
curve: 'cardinal',
securityLevel: 'loose',
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
</script>
Expand Down
42 changes: 22 additions & 20 deletions src/diagrams/requirement/parser/requirementDiagram.jison
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,8 @@
%% /* language grammar */

start
: directive start
: directive NEWLINE start
| directive start
| RD NEWLINE diagram EOF;

directive
Expand All @@ -108,36 +109,37 @@ diagram
| requirementDef diagram
| elementDef diagram
| relationshipDef diagram
| directive diagram
| NEWLINE diagram;

requirementDef
: requirementType requirementName STRUCT_START NEWLINE requirementBody
: requirementType requirementName STRUCT_START NEWLINE requirementBody
{ yy.addRequirement($2, $1) };

requirementBody
: ID COLONSEP id NEWLINE requirementBody
: ID COLONSEP id NEWLINE requirementBody
{ yy.setNewReqId($3); }
| TEXT COLONSEP text NEWLINE requirementBody
| TEXT COLONSEP text NEWLINE requirementBody
{ yy.setNewReqText($3); }
| RISK COLONSEP riskLevel NEWLINE requirementBody
| RISK COLONSEP riskLevel NEWLINE requirementBody
{ yy.setNewReqRisk($3); }
| VERIFYMTHD COLONSEP verifyType NEWLINE requirementBody
| VERIFYMTHD COLONSEP verifyType NEWLINE requirementBody
{ yy.setNewReqVerifyMethod($3); }
| NEWLINE requirementBody
| STRUCT_STOP;

requirementType
: REQUIREMENT
: REQUIREMENT
{ $$=yy.RequirementType.REQUIREMENT;}
| FUNCTIONAL_REQUIREMENT
| FUNCTIONAL_REQUIREMENT
{ $$=yy.RequirementType.FUNCTIONAL_REQUIREMENT;}
| INTERFACE_REQUIREMENT
| INTERFACE_REQUIREMENT
{ $$=yy.RequirementType.INTERFACE_REQUIREMENT;}
| PERFORMANCE_REQUIREMENT
| PERFORMANCE_REQUIREMENT
{ $$=yy.RequirementType.PERFORMANCE_REQUIREMENT;}
| PHYSICAL_REQUIREMENT
| PHYSICAL_REQUIREMENT
{ $$=yy.RequirementType.PHYSICAL_REQUIREMENT;}
| DESIGN_CONSTRAINT
| DESIGN_CONSTRAINT
{ $$=yy.RequirementType.DESIGN_CONSTRAINT;};

riskLevel
Expand All @@ -146,29 +148,29 @@ riskLevel
| HIGH_RISK { $$=yy.RiskLevel.HIGH_RISK;};

verifyType
: VERIFY_ANALYSIS
: VERIFY_ANALYSIS
{ $$=yy.VerifyType.VERIFY_ANALYSIS;}
| VERIFY_DEMONSTRATION
| VERIFY_DEMONSTRATION
{ $$=yy.VerifyType.VERIFY_DEMONSTRATION;}
| VERIFY_INSPECTION
| VERIFY_INSPECTION
{ $$=yy.VerifyType.VERIFY_INSPECTION;}
| VERIFY_TEST
| VERIFY_TEST
{ $$=yy.VerifyType.VERIFY_TEST;};

elementDef
: ELEMENT elementName STRUCT_START NEWLINE elementBody
: ELEMENT elementName STRUCT_START NEWLINE elementBody
{ yy.addElement($2) };

elementBody
: TYPE COLONSEP type NEWLINE elementBody
: TYPE COLONSEP type NEWLINE elementBody
{ yy.setNewElementType($3); }
| DOCREF COLONSEP ref NEWLINE elementBody
| DOCREF COLONSEP ref NEWLINE elementBody
{ yy.setNewElementDocRef($3); }
| NEWLINE elementBody
| STRUCT_STOP;

relationshipDef
: id END_ARROW_L relationship LINE id
: id END_ARROW_L relationship LINE id
{ yy.addRelationship($3, $5, $1) }
| id LINE relationship END_ARROW_R id
{ yy.addRelationship($3, $1, $5) };
Expand Down
18 changes: 9 additions & 9 deletions src/diagrams/requirement/requirementMarkers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const insertLineEndings = (parentNode, conf) => {
.attr('cx', conf.line_height / 2)
.attr('cy', conf.line_height / 2)
.attr('r', conf.line_height / 2)
.attr('stroke', conf.rect_border_color)
.attr('stroke-width', 1)
// .attr('stroke', conf.rect_border_color)
// .attr('stroke-width', 1)
.attr('fill', 'none');

containsNode
Expand All @@ -30,7 +30,7 @@ const insertLineEndings = (parentNode, conf) => {
.attr('x2', conf.line_height)
.attr('y1', conf.line_height / 2)
.attr('y2', conf.line_height / 2)
.attr('stroke', conf.rect_border_color)
// .attr('stroke', conf.rect_border_color)
.attr('stroke-width', 1);

containsNode
Expand All @@ -39,7 +39,7 @@ const insertLineEndings = (parentNode, conf) => {
.attr('y2', conf.line_height)
.attr('x1', conf.line_height / 2)
.attr('x2', conf.line_height / 2)
.attr('stroke', conf.rect_border_color)
// .attr('stroke', conf.rect_border_color)
.attr('stroke-width', 1);

parentNode
Expand All @@ -54,13 +54,13 @@ const insertLineEndings = (parentNode, conf) => {
.append('path')
.attr(
'd',
`M0,0
L${conf.line_height},${conf.line_height / 2}
M${conf.line_height},${conf.line_height / 2}
`M0,0
L${conf.line_height},${conf.line_height / 2}
M${conf.line_height},${conf.line_height / 2}
L0,${conf.line_height}`
)
.attr('stroke-width', 1)
.attr('stroke', conf.rect_border_color);
.attr('stroke-width', 1);
// .attr('stroke', conf.rect_border_color);
};

export default {
Expand Down
36 changes: 15 additions & 21 deletions src/diagrams/requirement/requirementRenderer.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { line, select } from 'd3';
import dagre from 'dagre';
import graphlib from 'graphlib';
import * as configApi from '../../config';
// import * as configApi from '../../config';
import { log } from '../../logger';
import { configureSvgSize } from '../../utils';
import common from '../common/common';
Expand All @@ -26,10 +26,6 @@ const newRectNode = (parentNode, id) => {
return parentNode
.insert('rect', '#' + id)
.attr('class', 'req reqBox')
.attr('fill', conf.rect_fill)
.attr('fill-opacity', '100%')
.attr('stroke', conf.rect_border_color)
.attr('stroke-size', conf.rect_border_size)
.attr('x', 0)
.attr('y', 0)
.attr('width', conf.rect_min_width + 'px')
Expand All @@ -45,12 +41,11 @@ const newTitleNode = (parentNode, id, txts) => {
.attr('id', id)
.attr('x', x)
.attr('y', conf.rect_padding)
.attr('dominant-baseline', 'hanging')
.attr(
'style',
'font-family: ' + configApi.getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
);

.attr('dominant-baseline', 'hanging');
// .attr(
// 'style',
// 'font-family: ' + configApi.getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
// )
let i = 0;
txts.forEach(textStr => {
if (i == 0) {
Expand All @@ -77,11 +72,11 @@ const newTitleNode = (parentNode, id, txts) => {

parentNode
.append('line')
.attr('class', 'req-title-line')
.attr('x1', '0')
.attr('x2', conf.rect_min_width)
.attr('y1', totalY)
.attr('y2', totalY)
.attr('style', `stroke: ${conf.rect_border_color}; stroke-width: 1`);
.attr('y2', totalY);

return {
titleNode: title,
Expand All @@ -96,11 +91,11 @@ const newBodyNode = (parentNode, id, txts, yStart) => {
.attr('id', id)
.attr('x', conf.rect_padding)
.attr('y', yStart)
.attr('dominant-baseline', 'hanging')
.attr(
'style',
'font-family: ' + configApi.getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
);
.attr('dominant-baseline', 'hanging');
// .attr(
// 'style',
// 'font-family: ' + configApi.getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'
// );

let currentRow = 0;
const charLimit = 30;
Expand Down Expand Up @@ -145,13 +140,13 @@ const addEdgeLabel = (parentNode, svgPath, conf, txt) => {

const labelNode = parentNode
.append('text')
.attr('class', 'er relationshipLabel')
.attr('class', 'req relationshipLabel')
.attr('id', labelId)
.attr('x', labelPoint.x)
.attr('y', labelPoint.y)
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.attr('style', 'font-family: ' + conf.fontFamily + '; font-size: ' + conf.fontSize + 'px')
// .attr('style', 'font-family: ' + conf.fontFamily + '; font-size: ' + conf.fontSize + 'px')
.text(txt);

// Figure out how big the opaque 'container' rectangle needs to be
Expand Down Expand Up @@ -187,7 +182,6 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
.insert('path', '#' + insert)
.attr('class', 'er relationshipLine')
.attr('d', lineFunction(edge.points))
.attr('stroke', conf.rect_border_color)
.attr('fill', 'none');

if (rel.type == requirementDb.Relationships.CONTAINS) {
Expand Down
41 changes: 40 additions & 1 deletion src/diagrams/requirement/styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,42 @@
const getStyles = () => ``;
const getStyles = options => `
marker {
fill: ${options.relationColor};
stroke: ${options.relationColor};
}
marker.cross {
stroke: ${options.lineColor};
}
svg {
font-family: ${options.fontFamily};
font-size: ${options.fontSize};
}
.reqBox {
fill: ${options.requirementBackground};
fill-opacity: 100%;
stroke: ${options.requirementBorderColor};
stroke-size: ${options.requirementBorderSize};
}
.reqLabelBox {
fill: ${options.relationLabelBackground};
fill-opacity: 100%;
}
.req-title-line {
stroke: ${options.requirementBorderColor};
stroke-width: 1;
}
.relationshipLine {
stroke: ${options.relationColor};
stroke-width: 1;
}
.relationshipLabel {
fill: ${options.relationLabelColor};
}
`;
// fill', conf.rect_fill)
export default getStyles;

0 comments on commit 8a893e1

Please sign in to comment.