feat: adds title and description to flowchart

src/diagrams/flowchart/parser/flow.jison

@@ -7,6 +7,8 @@
 /* lexical grammar */
 %lex
 %x string
+%x title
+%x accDescription
 %x dir
 %x vertex
 %x click
@@ -26,6 +28,10 @@
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 \%\%(?!\{)[^\n]*                                                /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
+title                                                           { this.begin("title");return 'title'; }
+<title>(?!\n|;|#)*[^\n]*                                        { this.popState(); return "title_value"; }
+accDescription                                                  { this.begin("accDescription");return 'accDescription'; }
+<accDescription>(?!\n|;|#)*[^\n]*                               { this.popState(); return "description_value"; }
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -337,6 +343,8 @@ statement
     | subgraph separator document end
     {$$=yy.addSubGraph(undefined,$3,undefined);}
     | direction
+    | title title_value  { $$=$2.trim();yy.setTitle($$); }
+    | accDescription description_value  { $$=$2.trim();yy.setAccDescription($$); }
     ;
 
 separator: NEWLINE | SEMI | EOF ;

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

@@ -6,13 +6,13 @@ setConfig({
   securityLevel: 'strict',
 });
 
-describe('when parsing ', function () {
+describe('parsing a flow chart', function () {
   beforeEach(function () {
     flow.parser.yy = flowDb;
     flow.parser.yy.clear();
   });
 
-  it('it should handle a trailing whitespaces after statememnts', function () {
+  it('should handle a trailing whitespaces after statememnts', function () {
     const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
 
     const vert = flow.parser.yy.getVertices();
@@ -80,47 +80,47 @@ describe('when parsing ', function () {
       flow.parser.yy.clear();
     };
 
-    it("it should be able to parse a '.'", function () {
+    it("should be able to parse a '.'", function () {
       charTest('.');
       charTest('Start 103a.a1');
     });
 
-    // it('it should be able to parse text containing \'_\'', function () {
+    // it('should be able to parse text containing \'_\'', function () {
     //   charTest('_')
     // })
 
-    it("it should be able to parse a ':'", function () {
+    it("should be able to parse a ':'", function () {
       charTest(':');
     });
 
-    it("it should be able to parse a ','", function () {
+    it("should be able to parse a ','", function () {
       charTest(',');
     });
 
-    it("it should be able to parse text containing '-'", function () {
+    it("should be able to parse text containing '-'", function () {
       charTest('a-b');
     });
 
-    it("it should be able to parse a '+'", function () {
+    it("should be able to parse a '+'", function () {
       charTest('+');
     });
 
-    it("it should be able to parse a '*'", function () {
+    it("should be able to parse a '*'", function () {
       charTest('*');
     });
 
-    it("it should be able to parse a '<'", function () {
+    it("should be able to parse a '<'", function () {
       charTest('<', '&lt;');
     });
 
-    // it("it should be able to parse a '>'", function() {
+    // it("should be able to parse a '>'", function() {
     //   charTest('>', '&gt;');
     // });
 
-    // it("it should be able to parse a '='", function() {
+    // it("should be able to parse a '='", function() {
     //   charTest('=', '&equals;');
     // });
-    it("it should be able to parse a '&'", function () {
+    it("should be able to parse a '&'", function () {
       charTest('&');
     });
   });
@@ -146,6 +146,7 @@ describe('when parsing ', function () {
     const classes = flow.parser.yy.getClasses();
     expect(vertices['A'].id).toBe('A');
   });
+
   it('should be possible to use numbers as labels', function () {
     let statement = '';
 
@@ -155,4 +156,19 @@ describe('when parsing ', function () {
     const classes = flow.parser.yy.getClasses();
     expect(vertices['1'].id).toBe('1');
   });
+
+  it('should add title and description to flow chart', function () {
+    const flowChart = `graph LR
+      title Big decisions
+      accDescription Flow chart of the decision making process
+      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');
+    expect(flow.parser.yy.getAccDescription()).toBe('Flow chart of the decision making process');
+  });
 });