Handle legacy state diagram and start using Generic diagram in mermaidAPI

cypress/platform/knsv.html

@@ -199,7 +199,7 @@ stateDiagram
             end
           end
           B ->> A: Return</div>
-      <div class="mermaid" style="width: 100%;">
+      <div class="mermaid2" style="width: 100%;">
 classDiagram
 accTitle: My class diagram
 accDescr: My class diagram Description
@@ -217,7 +217,7 @@ class Class10 {
   size()
 }
       </div>
-      <div class="mermaid2" style="width: 100%;">
+      <div class="mermaid" style="width: 100%;">
         stateDiagram
         accTitle: Apa
         accDescr: One that can climb better then any man
@@ -298,6 +298,7 @@ class Class10 {
         state: {
           nodeSpacing: 50,
           rankSpacing: 50,
+          defaultRenderer: 'dagre-d3',
         },
         logLevel: 0,
         fontSize: 18,

src/Diagram.js

@@ -57,6 +57,7 @@ class Diagram {
         this.parser.parser.yy = c4Db;
         this.db = c4Db;
         this.renderer = c4Renderer;
+        this.renderer.setConf(cnf.c4);
         break;
       case 'gitGraph':
         this.parser = gitGraphParser;
@@ -100,15 +101,16 @@ class Diagram {
         this.db = sequenceDb;
         this.db.setWrap(cnf.wrap);
         this.renderer = sequenceRenderer;
+        this.renderer.setConf(cnf.sequence);
         this.txt = this.txt + '\n';
         break;
       case 'gantt':
         cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        ganttRenderer.setConf(cnf.gantt);
         this.parser = ganttParser;
         this.parser.parser.yy = ganttDb;
         this.db = ganttDb;
         this.renderer = ganttRenderer;
+        ganttRenderer.setConf(cnf.gantt);
         break;
       case 'class':
         cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;

src/diagrams/state/stateRenderer.js

@@ -2,17 +2,12 @@ import { select } from 'd3';
 import dagre from 'dagre';
 import graphlib from 'graphlib';
 import { log } from '../../logger';
-import stateDb from './stateDb';
 import common from '../common/common';
-import { parser } from './parser/stateDiagram';
-// import idCache from './id-cache';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../utils';
 import addSVGAccessibilityFields from '../../accessibility';
 
-parser.yy = stateDb;
-
 // TODO Move conf object to main conf in mermaidAPI
 let conf;
 
@@ -44,8 +39,10 @@ const insertMarkers = function (elem) {
  *
  * @param {any} text
  * @param {any} id
+ * @param _version
+ * @param diagObj
  */
-export const draw = function (text, id) {
+export const draw = function (text, id, _version, diagObj) {
   conf = getConfig().state;
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sanbox mode
@@ -59,8 +56,8 @@ export const draw = function (text, id) {
       : select('body');
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  parser.yy.clear();
+  // diagObj.db.clear();
-  parser.parse(text);
+  // parser.parse(text);
   log.debug('Rendering diagram ' + text);
 
   // Fetch the default direction, use TD if none was found
@@ -81,8 +78,8 @@ export const draw = function (text, id) {
     return {};
   });
 
-  const rootDoc = stateDb.getRootDoc();
+  const rootDoc = diagObj.db.getRootDoc();
-  renderDoc(rootDoc, diagram, undefined, false, root, doc);
+  renderDoc(rootDoc, diagram, undefined, false, root, doc, diagObj);
 
   const padding = conf.padding;
   const bounds = diagram.node().getBBox();
@@ -98,13 +95,13 @@ export const draw = function (text, id) {
     'viewBox',
     `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
   );
-  addSVGAccessibilityFields(parser.yy, diagram, id);
+  addSVGAccessibilityFields(diagObj.db, diagram, id);
 };
 const getLabelWidth = (text) => {
   return text ? text.length * conf.fontSizeFactor : 1;
 };
 
-const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument) => {
+const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) => {
   // Layout graph, Create a new directed graph
   const graph = new graphlib.Graph({
     compound: true,
@@ -155,9 +152,9 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument) => {
     return {};
   });
 
-  stateDb.extract(doc);
+  diagObj.db.extract(doc);
-  const states = stateDb.getStates();
+  const states = diagObj.db.getStates();
-  const relations = stateDb.getRelations();
+  const relations = diagObj.db.getRelations();
 
   const keys = Object.keys(states);
 
@@ -173,7 +170,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument) => {
     let node;
     if (stateDef.doc) {
       let sub = diagram.append('g').attr('id', stateDef.id).attr('class', 'stateGroup');
-      node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg, root, domDocument);
+      node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg, root, domDocument, diagObj);
 
       if (first) {
         // first = false;

src/mermaidAPI.js

@@ -360,66 +360,7 @@ const render = function (id, _txt, cb, container) {
   svg.insertBefore(style1, firstChild);
 
   try {
-    switch (graphType) {
-      case 'c4':
-        diag.renderer.setConf(cnf.c4);
     diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'gitGraph':
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'flowchart':
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'flowchart-v2':
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'sequence':
-        diag.renderer.setConf(cnf.sequence);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'gantt':
-        diag.renderer.setConf(cnf.gantt);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'class':
-        // classRenderer.setConf(cnf.class);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'classDiagram':
-        // classRendererV2.setConf(cnf.class);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'state':
-        // stateRenderer.setConf(cnf.state);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'stateDiagram':
-        // cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        // diag.renderer.setConf(cnf.state);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'info':
-        // cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        // infoRenderer.setConf(cnf.class);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'pie':
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'er':
-        // erRenderer.setConf(cnf.er);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'journey':
-        // journeyRenderer.setConf(cnf.journey);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-      case 'requirement':
-        // requirementRenderer.setConf(cnf.requirement);
-        diag.renderer.draw(txt, id, pkg.version, diag);
-        break;
-    }
   } catch (e) {
     errorRenderer.draw(id, pkg.version);
     throw e;