Small bug fix with requirement diagram naming.

dist/index.html

@@ -679,24 +679,26 @@
     end note
   </div>
 
+  <hr />
+
   <div class="mermaid">
     requirementDiagram
 
-    requirement test_req {
+    requirement An Example {
     id: 1
     text: the test text.
     risk: high
     verifymethod: test
     }
 
-    functionalRequirement test_req2 {
+    functionalRequirement Random Name {
     id: 1.1
     text: the second test text.
     risk: low
     verifymethod: inspection
     }
 
-    performanceRequirement test_req3 {
+    performanceRequirement Something Else {
     id: 1.2
     text: the third test text.
     risk: medium
@@ -739,14 +741,14 @@
     }
 
 
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req3 - contains -> test_req4
+    test_entity - satisfies -> Random Name
+    An Example - traces -> Random Name
+    An Example - contains -> Something Else
+    Something Else - contains -> test_req4
     test_req4 - derives -> test_req5
     test_req5 - refines -> test_req6
     test_entity3 - verifies -> test_req5
-    test_req <- copies - test_entity2 </div>
+    An Example <- copies - test_entity2 </div>
   </div>
 
   <h1 id="link-clicked">Anchor for "link-clicked" test</h1>

docs/Setup.md

@@ -823,6 +823,22 @@ scaled based on available space. If set to false, the diagram reserves its
 absolute width.
 **Default value: true**.
 
+## requirement
+
+The object containing configurations specific for req diagrams
+
+### useMaxWidth
+
+| Parameter   | Description | Type    | Required | Values      |
+| ----------- | ----------- | ------- | -------- | ----------- |
+| useMaxWidth | See Notes   | Boolean | Required | true, false |
+
+**Notes:**
+When this flag is set to true, the diagram width is locked to 100% and
+scaled based on available space. If set to false, the diagram reserves its
+absolute width.
+**Default value: true**.
+
 ## setSiteConfig
 
 ## setSiteConfig

src/diagrams/requirement/parser/requirementDiagram.jison

@@ -9,8 +9,17 @@
 %x string
 %x token
 %x unqString
+%x open_directive
+%x type_directive
+%x arg_directive
+%x close_directive
 
 %%
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 
 (\r?\n)+                               return 'NEWLINE';
 \s+                                    /* skip all whitespace */
@@ -78,6 +87,22 @@ start
   : directive start
   | RD NEWLINE diagram EOF;
 
+directive
+  : openDirective typeDirective closeDirective
+  | openDirective typeDirective ':' argDirective closeDirective;
+
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); };
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); };
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); };
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'pie'); };
+
 diagram
   : /* empty */ { $$ = [] }
   | requirementDef diagram

src/diagrams/requirement/requirementDb.js

@@ -1,4 +1,4 @@
-import configApi from '../../config';
+import * as configApi from '../../config';
 import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
 

src/diagrams/requirement/requirementRenderer.js

@@ -7,7 +7,7 @@ import { configureSvgSize } from '../../utils';
 import common from '../common/common';
 import { parser } from './parser/requirementDiagram';
 import requirementDb from './requirementDb';
-import { insertLineEndings, ReqMarkers } from './requirementMarkers';
+import markers from './requirementMarkers';
 
 const conf = {};
 let relCnt = 0;
@@ -44,7 +44,7 @@ const newTitleNode = (parentNode, id, txts) => {
     .attr('class', 'req reqLabel reqTitle')
     .attr('id', id)
     .attr('x', x)
-    .attr('y', 0)
+    .attr('y', conf.rect_padding)
     .attr('dominant-baseline', 'hanging')
     .attr(
       'style',
@@ -58,7 +58,7 @@ const newTitleNode = (parentNode, id, txts) => {
         .append('tspan')
         .attr('text-anchor', 'middle')
         .attr('x', conf.rect_min_width / 2)
-        .attr('dy', conf.rect_padding)
+        .attr('dy', 0)
         .text(textStr);
     } else {
       title
@@ -171,7 +171,7 @@ const addEdgeLabel = (parentNode, svgPath, conf, txt) => {
 
 const drawRelationshipFromLayout = function(svg, rel, g, insert) {
   // Find the edge relating to this relationship
-  const edge = g.edge(rel.src, rel.dst);
+  const edge = g.edge(elementString(rel.src), elementString(rel.dst));
 
   // Get a function that will generate the line path
   const lineFunction = line()
@@ -202,7 +202,7 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
       'url(' +
         common.getUrl(conf.arrowMarkerAbsolute) +
         '#' +
-        ReqMarkers.ARROW +
+        markers.ReqMarkers.ARROW +
         '_line_ending' +
         ')'
     );
@@ -216,6 +216,9 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
 export const drawReqs = (reqs, graph, svgNode) => {
   Object.keys(reqs).forEach(reqName => {
     let req = reqs[reqName];
+    reqName = elementString(reqName);
+    console.log('reqName: ', reqName);
+    log.info('Added new requirement: ', reqName);
 
     const groupNode = svgNode.append('g').attr('id', reqName);
     const textId = 'req-' + reqName;
@@ -259,7 +262,7 @@ export const drawReqs = (reqs, graph, svgNode) => {
 export const drawElements = (els, graph, svgNode) => {
   Object.keys(els).forEach(elName => {
     let el = els[elName];
-    const id = elName.replace(/\./g, '_');
+    const id = elementString(elName);
 
     const groupNode = svgNode.append('g').attr('id', id);
     const textId = 'element-' + id;
@@ -294,7 +297,9 @@ export const drawElements = (els, graph, svgNode) => {
 
 const addRelationships = (relationships, g) => {
   relationships.forEach(function(r) {
-    g.setEdge(r.src, r.dst, { relationship: r });
+    let src = elementString(r.src);
+    let dst = elementString(r.dst);
+    g.setEdge(src, dst, { relationship: r });
   });
   return relationships;
 };
@@ -318,13 +323,16 @@ const adjustEntities = function(svgNode, graph) {
   return;
 };
 
+const elementString = str => {
+  return str.replace(/\s/g, '').replace(/\./g, '_');
+};
+
 export const draw = (text, id) => {
-  log.info('Drawing requirements!');
   parser.yy = requirementDb;
   parser.parse(text);
 
   const svg = select(`[id='${id}']`);
-  insertLineEndings(svg, conf);
+  markers.insertLineEndings(svg, conf);
 
   const g = new graphlib.Graph({
     multigraph: false,