Updated flowcharts with the new syntax

src/commonDb.js

@@ -0,0 +1,34 @@
+import { sanitizeText as _sanitizeText } from './diagrams/common/common';
+import { getConfig } from './config';
+let title = '';
+let description = '';
+const sanitizeText = (txt) => _sanitizeText(txt, getConfig());
+
+export const clear = function () {
+  title = '';
+  description = '';
+};
+
+export const setTitle = function (txt) {
+  title = sanitizeText(txt).replace(/^\s+/g, '');
+};
+
+export const getTitle = function () {
+  return title;
+};
+
+export const setAccDescription = function (txt) {
+  description = sanitizeText(txt).replace(/\n\s+/g, '\n');
+};
+
+export const getAccDescription = function () {
+  return description;
+};
+
+export default {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear,
+};

src/diagrams/flowchart/flowDb.js

@@ -4,6 +4,7 @@ import * as configApi from '../../config';
 import common from '../common/common';
 import mermaidAPI from '../../mermaidAPI';
 import { log } from '../../logger';
+import { setTitle, getTitle, getAccDescription, setAccDescription } from '../../commonDb';
 
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
@@ -31,21 +32,17 @@ export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
 
-const setTitle = function (txt) {
+// const getTitle = function () {
-  title = sanitizeText(txt);
+//   return title;
-};
+// };
 
-const getTitle = function () {
+// const setAccDescription = function (txt) {
-  return title;
+//   description = sanitizeText(txt).replace(/\n\s+/g, '\n');
-};
+// };
 
-const setAccDescription = function (txt) {
+// const getAccDescription = function () {
-  description = sanitizeText(txt);
+//   return description;
-};
+// };
-
-const getAccDescription = function () {
-  return description;
-};
 
 /**
  * Function to lookup domId from id in the graph definition.
@@ -447,6 +444,8 @@ export const clear = function (ver) {
   tooltips = [];
   firstGraphFlag = true;
   version = ver || 'gen-1';
+  title = '';
+  description = '';
 };
 export const setGen = (ver) => {
   version = ver || 'gen-1';

src/diagrams/flowchart/parser/flow.jison

@@ -7,8 +7,9 @@
 /* lexical grammar */
 %lex
 %x string
-%x title
+%x acc_title
-%x accDescription
+%x acc_descr
+%x acc_descr_multiline
 %x dir
 %x vertex
 %x click
@@ -28,10 +29,14 @@
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 \%\%(?!\{)[^\n]*                                                /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
-title                                                           { this.begin("title");return 'title'; }
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
-<title>(?!\n|;|#)*[^\n]*                                        { this.popState(); return "title_value"; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
-accDescription                                                  { this.begin("accDescription");return 'accDescription'; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
-<accDescription>(?!\n|;|#)*[^\n]*                               { this.popState(); return "description_value"; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
+// <acc_descr_multiline>.*[^\n]*                    {  return "acc_descr_line"}
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -343,27 +348,13 @@ statement
     | subgraph separator document end
     {$$=yy.addSubGraph(undefined,$3,undefined);}
     | direction
-    | title title_value  { $$=$2.trim();yy.setTitle($$); }
+    | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
-    | accDescription description_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
     ;
 
 separator: NEWLINE | SEMI | EOF ;
 
-// verticeStatement:
-//     vertex link vertex
-//         { yy.addLink($1,$3,$2);$$ = [$1,$3];}
-//     | vertex link vertex STYLE_SEPARATOR idString
-//        { yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);}
-//     | vertex STYLE_SEPARATOR idString link vertex
-//        { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);}
-//     | vertex STYLE_SEPARATOR idString link vertex STYLE_SEPARATOR idString
-//        { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}
-//     |vertex
-//         {$$ = [$1];}
-//     |vertex STYLE_SEPARATOR idString
-//         {$$ = [$1];yy.setClass($1,$3)}
-//    ;
-
 
 verticeStatement: verticeStatement link node
         { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }

src/diagrams/flowchart/parser/flow.spec.js

@@ -157,10 +157,10 @@ describe('parsing a flow chart', function () {
     expect(vertices['1'].id).toBe('1');
   });
 
-  it('should add title and description to flow chart', function () {
+  it('should add accTitle and accDescr to flow chart', function () {
     const flowChart = `graph LR
-      title Big decisions
+      accTitle: Big decisions
-      accDescription Flow chart of the decision making process
+      accDescr: Flow chart of the decision making process
       A[Hard] -->|Text| B(Round)
       B --> C{Decision}
       C -->|One| D[Result 1]
@@ -171,4 +171,27 @@ describe('parsing a flow chart', function () {
     expect(flow.parser.yy.getTitle()).toBe('Big decisions');
     expect(flow.parser.yy.getAccDescription()).toBe('Flow chart of the decision making process');
   });
+  it('should add accTitle and a multi line accDescr to flow chart', function () {
+    const flowChart = `graph LR
+      accTitle: Big decisions
+
+      accDescr {
+        Flow chart of the decision making process
+        with a second line
+      }
+
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+      C -->|Two| E[Result 2]
+`;
+
+    flow.parser.parse(flowChart);
+    expect(flow.parser.yy.getTitle()).toBe('Big decisions');
+    console.log(flow.parser.yy.getAccDescription());
+    expect(flow.parser.yy.getAccDescription()).toBe(
+      `Flow chart of the decision making process
+with a second line`
+    );
+  });
 });