%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
@@ -53,22 +54,51 @@ flowchart TD
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
+
+
+graph TD
+ C --text fyra fem -->F[text ett två tre]
-
-%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
-flowchart LR
-subgraph A
- a --> b
-end
-subgraph B
- i -->f
-end
-A --> B
+
+
+ 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
+
-flowchart TD
- C -->|fa:fa-car Car| F[fa:fa-car Car]
-
-
flowchart LR
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
Lorem --> Ipsum --> Dolor
@@ -124,9 +154,8 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
// 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 },
@@ -134,10 +163,12 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
// 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');}
diff --git a/src/diagrams/requirement/parser/requirementDiagram.jison b/src/diagrams/requirement/parser/requirementDiagram.jison
index d94c3e1d6..b8c14dfc1 100644
--- a/src/diagrams/requirement/parser/requirementDiagram.jison
+++ b/src/diagrams/requirement/parser/requirementDiagram.jison
@@ -84,7 +84,8 @@
%% /* language grammar */
start
- : directive start
+ : directive NEWLINE start
+ | directive start
| RD NEWLINE diagram EOF;
directive
@@ -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
@@ -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) };
diff --git a/src/diagrams/requirement/requirementMarkers.js b/src/diagrams/requirement/requirementMarkers.js
index 3f15efb68..401186624 100644
--- a/src/diagrams/requirement/requirementMarkers.js
+++ b/src/diagrams/requirement/requirementMarkers.js
@@ -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
@@ -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
@@ -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
@@ -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 {
diff --git a/src/diagrams/requirement/requirementRenderer.js b/src/diagrams/requirement/requirementRenderer.js
index f5720e5c6..dca8fd6a8 100644
--- a/src/diagrams/requirement/requirementRenderer.js
+++ b/src/diagrams/requirement/requirementRenderer.js
@@ -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';
@@ -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')
@@ -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) {
@@ -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,
@@ -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;
@@ -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
@@ -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) {
diff --git a/src/diagrams/requirement/styles.js b/src/diagrams/requirement/styles.js
index 0b0729813..52423f4a8 100644
--- a/src/diagrams/requirement/styles.js
+++ b/src/diagrams/requirement/styles.js
@@ -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;
diff --git a/src/styles.js b/src/styles.js
index 7f813d98e..ed8b99198 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -81,8 +81,6 @@ const getStyles = (type, userStyles, options) => {
${themes[type](options)}
${userStyles}
-
- ${type} { fill: apa;}
`;
};
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 80b269eb4..8061beb2e 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -125,6 +125,17 @@ class Theme {
this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
+
+ /* requirement-diagram */
+ this.requirementBackground = this.requirementBackground || this.primaryColor;
+ this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
+ this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+ this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
+ this.relationColor = this.relationColor || this.lineColor;
+ this.relationLabelBackground =
+ this.relationLabelBackground ||
+ (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
+ this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index e60483059..15162fbdd 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -140,6 +140,17 @@ class Theme {
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* class */
this.classText = this.primaryTextColor;
+
+ /* requirement-diagram */
+ this.requirementBackground = this.requirementBackground || this.primaryColor;
+ this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
+ this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+ this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
+ this.relationColor = this.relationColor || this.lineColor;
+ this.relationLabelBackground =
+ this.relationLabelBackground ||
+ (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
+ this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js
index d564541c8..24e92f047 100644
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -150,6 +150,15 @@ class Theme {
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
+
+ /* requirement-diagram */
+ this.requirementBackground = this.requirementBackground || this.primaryColor;
+ this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
+ this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+ this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
+ this.relationColor = this.relationColor || this.lineColor;
+ this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;
+ this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js
index 1b0aadcf0..28cfaf7f2 100644
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -120,6 +120,15 @@ class Theme {
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
+
+ /* requirement-diagram */
+ this.requirementBackground = this.requirementBackground || this.primaryColor;
+ this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
+ this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+ this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
+ this.relationColor = this.relationColor || this.lineColor;
+ this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
+ this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
index 91c3ec21c..e8c71f7d4 100644
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -157,6 +157,14 @@ class Theme {
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
+ /* requirement-diagram */
+ this.requirementBackground = this.requirementBackground || this.primaryColor;
+ this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
+ this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+ this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
+ this.relationColor = this.relationColor || this.lineColor;
+ this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
+ this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {