mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix for flowcharts

This commit is contained in:
Knut Sveidqvist 2022-07-04 12:37:50 +02:00
parent 023781716f
commit 1675174b2a
5 changed files with 63 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
cypress/platform/knsv.html
View File

@ -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 @@ stateDiagram
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

7
src/Diagram.js
View File

@ -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;

80
src/diagrams/flowchart/flowRenderer.js
View File

@ -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(' '));

22
src/diagrams/git/gitGraphRenderer.js
View File

@ -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) {

12
src/mermaidAPI.js
View File

@ -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);