Fixed an issue with flowchart rendering. Remember to render html, securityLevel='loose' must be set by the siteConfig. The default securityLevel as of now is 'strict'. This causes html to be url encoded.

src/diagrams/class/classDb.js

@@ -3,6 +3,7 @@ import { logger } from '../../logger';
 import { getConfig } from '../../config';
 import common from '../common/common';
 import utils from '../../utils';
+import mermaidAPI from '../../mermaidAPI';
 
 const MERMAID_DOM_ID_PREFIX = 'classid-';
 
@@ -14,6 +15,10 @@ let classCounter = 0;
 
 let funs = [];
 
+export const parseDirective = function(statement, context, type) {
+  mermaidAPI.parseDirective(statement, context, type);
+};
+
 const splitClassNameAndType = function(id) {
   let genericType = '';
   let className = id;
@@ -288,6 +293,7 @@ const setupToolTips = function(element) {
 funs.push(setupToolTips);
 
 export default {
+  parseDirective,
   addClass,
   bindFunctions,
   clear,

src/diagrams/class/parser/classDiagram.jison

@@ -7,8 +7,18 @@
 /* lexical grammar */
 %lex
 %x string generic struct
+// Directive states
+%x open_directive type_directive 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]*\n*           /* do nothing */
 \n+                     return 'NEWLINE';
 \s+                     /* skip whitespace */
@@ -24,7 +34,7 @@
 
 
 "class"               return 'CLASS';
-//"click"               return 'CLICK';
+//"click"             return 'CLICK';
 "callback"            return 'CALLBACK';
 "link"                return 'LINK';
 "<<"                  return 'ANNOTATION_START';
@@ -130,7 +140,10 @@
 
 %% /* language grammar */
 
-mermaidDoc: graphConfig;
+mermaidDoc
+    : graphConfig
+    | directive mermaidDoc
+    ;
 
 graphConfig
     : CLASS_DIAGRAM NEWLINE statements EOF
@@ -149,6 +162,11 @@ className
     | alphaNumToken GENERICTYPE { $$=$1+'~'+$2; }
     ;
 
+directive
+    : openDirective typeDirective closeDirective 'NEWLINE'
+    | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
+    ;
+
 statement
     : relationStatement       { yy.addRelation($1); }
     | relationStatement LABEL { $1.title =  yy.cleanupLabel($2); yy.addRelation($1);        }
@@ -156,6 +174,7 @@ statement
     | methodStatement
     | annotationStatement
     | clickStatement
+    | directive
     ;
 
 classStatement
@@ -219,4 +238,21 @@ textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFA
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 
 alphaNumToken  : UNICODE_TEXT | NUM | ALPHA;
+
+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'); }
+  ;
+
 %%