Fix for flowcharts

cypress/platform/knsv.html

@@ -51,12 +51,17 @@
     "Magnesium" : 10.01
     "Iron" :  5
 </div>
-<div class="mermaid" style="width: 50%;">
-    gitGraph:
+<div class="mermaid2" style="width: 50%;">
+ gitGraph
        commit
        commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
        commit
-
 </div>
 <div class="mermaid2" style="width: 50%;">
    sequenceDiagram
@@ -138,7 +143,7 @@
   Inactive --> Idle: ACT
   Active --> Active: LOG
       </div>
-      <div class="mermaid2" style="width: 100%;">
+      <div class="mermaid" style="width: 100%;">
       graph TB
         accTitle: My flowchart
         accDescr: My flowchart Description

src/Diagram.js

@@ -63,15 +63,20 @@ class Diagram {
         this.parser.parser.yy = gitGraphAst;
         this.db = gitGraphAst;
         this.renderer = gitGraphRenderer;
+        this.txt = this.txt + '\n';
         break;
       case 'flowchart':
+        flowRenderer.setConf(cnf.flowchart);
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         flowDb.clear();
         this.parser = flowParser;
         this.parser.parser.yy = flowDb;
         this.db = flowDb;
         this.renderer = flowRenderer;
         break;
       case 'flowchart-v2':
+        flowRendererV2.setConf(cnf.flowchart);
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         flowDb.clear();
         this.parser = flowParser;
         this.parser.parser.yy = flowDb;
@@ -172,7 +177,7 @@ class Diagram {
       const error = { str, hash };
       throw error;
     };
-    this.parser.parse(txt);
+    this.parser.parse(this.txt);
   }
   getParser() {
     return this.parser;

src/diagrams/flowchart/flowRenderer.js

@@ -1,10 +1,6 @@
 import graphlib from 'graphlib';
 import { select, curveLinear, selectAll } from 'd3';
-
-import flowDb from './flowDb';
-import flow from './parser/flow';
 import { getConfig } from '../../config';
-
 import dagreD3 from 'dagre-d3';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { log } from '../../logger';
@@ -30,8 +26,9 @@ export const setConf = function (cnf) {
  * @param root
  * @param doc
  * @param _doc
+ * @param diagObj
  */
-export const addVertices = function (vert, g, svgId, root, _doc) {
+export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
   const securityLevel = getConfig().securityLevel;
 
   const svg = !root ? select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`);
@@ -144,7 +141,7 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
     }
     // Add the node
     log.warn('Adding node', vertex.id, vertex.domId);
-    g.setNode(flowDb.lookUpDomId(vertex.id), {
+    g.setNode(diagObj.db.lookUpDomId(vertex.id), {
       labelType: 'svg',
       labelStyle: styles.labelStyle,
       shape: _shape,
@@ -153,7 +150,7 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
       ry: radious,
       class: classStr,
       style: styles.style,
-      id: flowDb.lookUpDomId(vertex.id),
+      id: diagObj.db.lookUpDomId(vertex.id),
     });
   });
 };
@@ -163,8 +160,9 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
  *
  * @param {object} edges The edges to add to the graph
  * @param {object} g The graph object
+ * @param diagObj
  */
-export const addEdges = function (edges, g) {
+export const addEdges = function (edges, g, diagObj) {
   let cnt = 0;
 
   let defaultStyle;
@@ -264,26 +262,24 @@ export const addEdges = function (edges, g) {
     edgeData.minlen = edge.length || 1;
 
     // Add the edge to the graph
-    g.setEdge(flowDb.lookUpDomId(edge.start), flowDb.lookUpDomId(edge.end), edgeData, cnt);
+    g.setEdge(diagObj.db.lookUpDomId(edge.start), diagObj.db.lookUpDomId(edge.end), edgeData, cnt);
   });
 };
 
 /**
  * Returns the all the styles from classDef statements in the graph definition.
  *
  * @param text
+ * @param diagObj
  * @returns {object} ClassDef styles
  */
-export const getClasses = function (text) {
+export const getClasses = function (text, diagObj) {
   log.info('Extracting classes');
-  flowDb.clear();
+  diagObj.db.clear();
   try {
-    const parser = flow.parser;
-    parser.yy = flowDb;
-
     // Parse the graph definition
-    parser.parse(text);
-    return flowDb.getClasses();
+    diagObj.parse(text);
+    return diagObj.db.getClasses();
   } catch (e) {
     return;
   }
@@ -294,14 +290,12 @@ export const getClasses = function (text) {
  *
  * @param text
  * @param id
+ * @param _version
+ * @param diagObj
  */
-export const draw = function (text, id) {
+export const draw = function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
-  flowDb.clear();
-  flowDb.setGen('gen-1');
-  const parser = flow.parser;
-  parser.yy = flowDb;
-
+  diagObj.db.clear();
   const securityLevel = getConfig().securityLevel;
   let sandboxElement;
   if (securityLevel === 'sandbox') {
@@ -314,14 +308,14 @@ export const draw = function (text, id) {
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
   // Parse the graph definition
-  // try {
-  parser.parse(text);
-  // } catch (err) {
-  // log.debug('Parsing failed');
-  // }
+  try {
+    diagObj.parser.parse(text);
+  } catch (err) {
+    log.debug('Parsing failed');
+  }
 
   // Fetch the default direction, use TD if none was found
-  let dir = flowDb.getDirection();
+  let dir = diagObj.db.getDirection();
   if (typeof dir === 'undefined') {
     dir = 'TD';
   }
@@ -347,17 +341,17 @@ export const draw = function (text, id) {
     });
 
   let subG;
-  const subGraphs = flowDb.getSubGraphs();
+  const subGraphs = diagObj.db.getSubGraphs();
   for (let i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
-    flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
+    diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
   }
 
   // Fetch the vertices/nodes and edges/links from the parsed graph definition
-  const vert = flowDb.getVertices();
+  const vert = diagObj.db.getVertices();
   log.warn('Get vertices', vert);
 
-  const edges = flowDb.getEdges();
+  const edges = diagObj.db.getEdges();
 
   let i = 0;
   for (i = subGraphs.length - 1; i >= 0; i--) {
@@ -369,14 +363,14 @@ export const draw = function (text, id) {
       log.warn(
         'Setting subgraph',
         subG.nodes[j],
-        flowDb.lookUpDomId(subG.nodes[j]),
-        flowDb.lookUpDomId(subG.id)
+        diagObj.db.lookUpDomId(subG.nodes[j]),
+        diagObj.db.lookUpDomId(subG.id)
       );
-      g.setParent(flowDb.lookUpDomId(subG.nodes[j]), flowDb.lookUpDomId(subG.id));
+      g.setParent(diagObj.db.lookUpDomId(subG.nodes[j]), diagObj.db.lookUpDomId(subG.id));
     }
   }
-  addVertices(vert, g, id, root, doc);
-  addEdges(edges, g);
+  addVertices(vert, g, id, root, doc, diagObj);
+  addEdges(edges, g, diagObj);
 
   // Create the renderer
   const Render = dagreD3.render;
@@ -427,28 +421,28 @@ export const draw = function (text, id) {
   const svg = root.select(`[id="${id}"]`);
 
   // Adds title and description to the flow chart
-  addSVGAccessibilityFields(parser.yy, svg, id);
+  addSVGAccessibilityFields(diagObj.db, svg, id);
 
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
   render(element, g);
 
   element.selectAll('g.node').attr('title', function () {
-    return flowDb.getTooltip(this.id);
+    return diagObj.db.getTooltip(this.id);
   });
 
   // Index nodes
-  flowDb.indexNodes('subGraph' + i);
+  diagObj.db.indexNodes('subGraph' + i);
 
   // reposition labels
   for (i = 0; i < subGraphs.length; i++) {
     subG = subGraphs[i];
     if (subG.title !== 'undefined') {
       const clusterRects = doc.querySelectorAll(
-        '#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"] rect'
+        '#' + id + ' [id="' + diagObj.db.lookUpDomId(subG.id) + '"] rect'
       );
       const clusterEl = doc.querySelectorAll(
-        '#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"]'
+        '#' + id + ' [id="' + diagObj.db.lookUpDomId(subG.id) + '"]'
       );
 
       const xPos = clusterRects[0].x.baseVal.value;
@@ -492,7 +486,7 @@ export const draw = function (text, id) {
     const vertex = vert[key];
 
     if (vertex.link) {
-      const node = root.select('#' + id + ' [id="' + flowDb.lookUpDomId(key) + '"]');
+      const node = root.select('#' + id + ' [id="' + diagObj.db.lookUpDomId(key) + '"]');
       if (node) {
         const link = doc.createElementNS('http://www.w3.org/2000/svg', 'a');
         link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));

src/diagrams/git/gitGraphRenderer.js

@@ -1,7 +1,5 @@
-import { curveBasis, line, select } from 'd3';
-import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
-import db from './gitGraphAst';
-import gitGraphParser from './parser/gitGraph';
+import { select } from 'd3';
+import { configureSvgSize } from '../../utils';
 import { log } from '../../logger';
 import { getConfig } from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
@@ -515,23 +513,17 @@ const drawBranches = (svg, branches) => {
  * @param txt
  * @param id
  * @param ver
+ * @param diagObj
  */
-export const draw = function (txt, id, ver) {
+export const draw = function (txt, id, ver, diagObj) {
   clear();
   const conf = getConfig();
   const gitGraphConfig = getConfig().gitGraph;
   // try {
-  const parser = gitGraphParser.parser;
-  parser.yy = db;
-  parser.yy.clear();
-
   log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
-  // // Parse the graph definition
-  parser.parse(txt + '\n');
 
-  const direction = db.getDirection();
-  allCommitsDict = db.getCommits();
-  const branches = db.getBranchesAsObjArray();
+  allCommitsDict = diagObj.db.getCommits();
+  const branches = diagObj.db.getBranchesAsObjArray();
 
   // Position branches vertically
   let pos = 0;
@@ -543,7 +535,7 @@ export const draw = function (txt, id, ver) {
   const diagram = select(`[id="${id}"]`);
 
   // Adds title and description to the flow chart
-  addSVGAccessibilityFields(parser.yy, diagram, id);
+  addSVGAccessibilityFields(diagObj.db, diagram, id);
 
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {

src/mermaidAPI.js

@@ -317,7 +317,7 @@ const render = function (id, _txt, cb, container) {
 
   // classDef
   if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
-    const classes = flowRenderer.getClasses(txt);
+    const classes = flowRenderer.getClasses(txt, diag);
     const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
     for (const className in classes) {
       if (htmlLabels) {
@@ -366,17 +366,13 @@ const render = function (id, _txt, cb, container) {
         diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'gitGraph':
-        gitGraphRenderer.draw(txt, id, pkg.version, diag);
+        diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'flowchart':
-        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        flowRenderer.setConf(cnf.flowchart);
-        flowRenderer.draw(txt, id, pkg.version, diag);
+        diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'flowchart-v2':
-        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        flowRendererV2.setConf(cnf.flowchart);
-        flowRendererV2.draw(txt, id, pkg.version, diag);
+        diag.renderer.draw(txt, id, pkg.version, diag);
         break;
       case 'sequence':
         diag.renderer.setConf(cnf.sequence);