Directive support added to journey

Fixed an issue in journey svgDraw.drawText expected an attribute (textMargin) but did not receive one and raised an error: <tspan> attribute x: Expected length, "NaN".
Added parseDirective to journeyDb

cypress/integration/rendering/theme.spec.js

@@ -224,6 +224,7 @@ erDiagram
       it('should render a user journey diagram', () => {
         imgSnapshotTest(
           `
+        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
         journey
             title My working day
             section Go to work
@@ -232,8 +233,7 @@ erDiagram
               Do work: 1: Me, Cat
             section Go home
               Go downstairs: 5: Me
-              Sit down: 5: Me          `,
+              Sit down: 5: Me          `
-          {theme}
         );
         cy.get('svg');
     });

src/diagrams/user-journey/journeyDb.js

@@ -1,3 +1,5 @@
+import mermaidAPI from '../../mermaidAPI';
+
 let title = '';
 let currentSection = '';
 
@@ -5,6 +7,10 @@ const sections = [];
 const tasks = [];
 const rawTasks = [];
 
+export const parseDirective = function(statement, context, type) {
+  mermaidAPI.parseDirective(statement, context, type);
+};
+
 export const clear = function() {
   sections.length = 0;
   tasks.length = 0;
@@ -111,6 +117,7 @@ const getActors = function() {
 };
 
 export default {
+  parseDirective,
   clear,
   setTitle,
   getTitle,

src/diagrams/user-journey/journeyRenderer.js

@@ -70,7 +70,8 @@ function drawActorLegend(diagram) {
       x: 40,
       y: yPos + 7,
       fill: '#666',
-      text: person
+      text: person,
+      textMargin: conf.boxTextMargin | 5
     };
     svgDraw.drawText(diagram, labelData);
 

src/diagrams/user-journey/parser/journey.jison

@@ -5,12 +5,24 @@
  */
 %lex
 %options case-insensitive
+
+// Directive states
+%x OPEN_DIRECTIVE
+%x TYPE_DIRECTIVE
+%x ARG_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';
+\%%(?!\{)[^\n]*                                                 /* skip comments */
+[^\}]\%\%[^\n]*                                                 /* skip comments */
 [\n]+                   return 'NL';
 \s+                     /* skip whitespace */
 \#[^\n]*                /* skip comments */
-\%%[^\n]*               /* skip comments */
 
 "journey"               return 'journey';
 "title"\s[^#\n;]+       return 'title';
@@ -31,6 +43,7 @@
 
 start
 	: journey document 'EOF' { return $2; }
+	| directive start
 	;
 
 document
@@ -45,8 +58,32 @@ line
 	| EOF { $$=[];}
 	;
 
+directive
+  : openDirective typeDirective closeDirective 'NL'
+  | openDirective typeDirective ':' argDirective closeDirective 'NL'
+  ;
+
 statement
   : title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
   | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
   | taskName taskData {yy.addTask($1, $2);$$='task';}
+  | directive
   ;
+
+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', 'sequence'); }
+  ;
+
+

src/styles.js

@@ -16,6 +16,7 @@ const themes = {
   gantt,
   classDiagram,
   'classDiagram-v2': classDiagram,
+  class: classDiagram,
   stateDiagram,
   state: stateDiagram,
   git,