Updated user state diagram parsing with the new syntax

src/diagrams/state/parser/stateDiagram.jison

@@ -20,8 +20,9 @@
 %x STATE_ID
 %x ALIAS
 %x SCALE
-%x title
+%x acc_title
-%x accDescription
+%x acc_descr
+%x acc_descr_multiline
 %x NOTE
 %x NOTE_ID
 %x NOTE_TEXT
@@ -60,10 +61,13 @@
 <SCALE>\d+            return 'WIDTH';
 <SCALE>\s+"width"     {this.popState();}
 
-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";
 
 <INITIAL,struct>"state"\s+            { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }
 <STATE>.*"<<fork>>"                   {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
@@ -200,9 +204,9 @@ statement
     | note NOTE_TEXT AS ID
   	| directive
     | 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($$); }    ;
 
 directive
     : openDirective typeDirective closeDirective

src/diagrams/state/stateDb.js

@@ -3,6 +3,13 @@ import { generateId } from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
 import common from '../common/common';
 import * as configApi from '../../config';
+import {
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb';
 
 const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
 
@@ -120,22 +127,6 @@ let endCnt = 0; // eslint-disable-line
 let title = 'State diagram';
 let description = '';
 
-const setTitle = function (txt) {
-  title = sanitizeText(txt);
-};
-
-const getTitle = function () {
-  return title;
-};
-
-const setAccDescription = function (txt) {
-  description = sanitizeText(txt);
-};
-
-const getAccDescription = function () {
-  return description;
-};
-
 /**
  * Function called by parser when a node definition has been found.
  *
@@ -191,6 +182,7 @@ export const clear = function () {
   startCnt = 0;
   endCnt = 0; // eslint-disable-line
   classes = [];
+  commonClear();
 };
 
 export const getState = function (id) {

src/diagrams/state/stateDiagram.spec.js

@@ -27,9 +27,9 @@ describe('state diagram, ', function () {
       const description = stateDb.getAccDescription();
       expect(description).toBe('');
     });
-    it('simple with accDescription', function () {
+    it('simple with accDescription (accDescr)', function () {
       const str = `stateDiagram\n
-          accDescription a simple description of the diagram
+          accDescr: a simple description of the diagram
           State1 : this is another string
           [*] --> State1
           State1 --> [*]
@@ -39,9 +39,24 @@ describe('state diagram, ', function () {
       const description = stateDb.getAccDescription();
       expect(description).toBe('a simple description of the diagram');
     });
-    it('simple with title', function () {
+    it('simple with multiline accDescription (accDescr)', function () {
       const str = `stateDiagram\n
-          title a simple title of the diagram
+          accDescr {
+             a simple description of the diagram
+            using multiple lines
+          }
+          State1 : this is another string
+          [*] --> State1
+          State1 --> [*]
+      `;
+
+      parser.parse(str);
+      const description = stateDb.getAccDescription();
+      expect(description).toBe('a simple description of the diagram\nusing multiple lines');
+    });
+    it('simple with title  (accDescr)', function () {
+      const str = `stateDiagram\n
+          accTitle: a simple title of the diagram
           State1 : this is another string
           [*] --> State1
           State1 --> [*]