+ gitGraph
+ commit
+ commit
+ branch develop
commit
commit
commit
-
+ checkout main
+ commit
+ commit
sequenceDiagram
@@ -138,7 +143,7 @@ stateDiagram
Inactive --> Idle: ACT
Active --> Active: LOG
+
graph TB
accTitle: My flowchart
accDescr: My flowchart Description
diff --git a/src/Diagram.js b/src/Diagram.js
index ba7988140..3d7a1cbe0 100644
--- a/src/Diagram.js
+++ b/src/Diagram.js
@@ -63,8 +63,11 @@ 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;
@@ -72,6 +75,8 @@ class Diagram {
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;
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 01b6efb26..3e2219650 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/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,7 +262,7 @@ 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);
});
};
@@ -272,18 +270,16 @@ export const addEdges = function (edges, g) {
* 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(' '));
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 6ee9f1855..1d94f7c5e 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/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) {
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 723bc569e..1c5223aeb 100644
--- a/src/mermaidAPI.js
+++ b/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);