requirementDiagram
accTitle: My req Diagram
accDescr: My req Diagram Description
@@ -196,7 +199,7 @@ stateDiagram
end
end
B ->> A: Return
+
classDiagram
accTitle: My class diagram
accDescr: My class diagram Description
@@ -278,7 +281,7 @@ class Class10 {
// defaultRenderer: 'dagre-d3',
},
class: {
- // defaultRenderer: 'dagre-d3',
+ defaultRenderer: 'dagre-d3',
htmlLabels: true,
},
// gantt: { axisFormat: '%m/%d/%Y' },
diff --git a/src/Diagram.js b/src/Diagram.js
index eb6a4f625..bc35344f5 100644
--- a/src/Diagram.js
+++ b/src/Diagram.js
@@ -111,18 +111,23 @@ class Diagram {
this.renderer = ganttRenderer;
break;
case 'class':
+ cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
this.parser = classParser;
this.parser.parser.yy = classDb;
this.db = classDb;
+ this.db.clear();
this.renderer = classRenderer;
break;
case 'classDiagram':
+ cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
this.parser = classParser;
this.parser.parser.yy = classDb;
this.db = classDb;
+ this.db.clear();
this.renderer = classRendererV2;
break;
case 'state':
+ cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
this.parser = stateParser;
this.parser.parser.yy = stateDb;
this.db = stateDb;
@@ -130,6 +135,7 @@ class Diagram {
this.renderer = stateRenderer;
break;
case 'stateDiagram':
+ cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
this.parser = stateParser;
this.parser.parser.yy = stateDb;
this.db = stateDb;
diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index f877097ed..acf85055f 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -817,6 +817,9 @@ const config = {
},
class: {
arrowMarkerAbsolute: false,
+ dividerMargin: 10,
+ padding: 5,
+ textHeight: 10,
/**
* | Parameter | Description | Type | Required | Values |
diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js
index 6759b68bb..d1e36c25a 100644
--- a/src/diagrams/class/classRenderer.js
+++ b/src/diagrams/class/classRenderer.js
@@ -2,19 +2,15 @@ import { select } from 'd3';
import dagre from 'dagre';
import graphlib from 'graphlib';
import { log } from '../../logger';
-import classDb, { lookUpDomId } from './classDb';
-import { parser } from './parser/classDiagram';
import svgDraw from './svgDraw';
import { configureSvgSize } from '../../utils';
import { getConfig } from '../../config';
import addSVGAccessibilityFields from '../../accessibility';
-parser.yy = classDb;
-
let idCache = {};
const padding = 20;
-const conf = {
+const confa = {
dividerMargin: 10,
padding: 5,
textHeight: 10,
@@ -141,29 +137,20 @@ const insertMarkers = function (elem) {
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};
-/**
- * Merges the value of `conf` with the passed `cnf`
- *
- * @param {object} cnf Config to merge
- */
-export const setConf = function (cnf) {
- const keys = Object.keys(cnf);
-
- keys.forEach(function (key) {
- conf[key] = cnf[key];
- });
-};
-
/**
* Draws a flowchart in the tag with id: id based on the graph definition in text.
*
* @param {string} text
* @param {string} id
+ * @param version
+ * @param _version
+ * @param diagObj
*/
-export const draw = function (text, id) {
+export const draw = function (text, id, _version, diagObj) {
+ const conf = getConfig().class;
idCache = {};
- parser.yy.clear();
- parser.parse(text);
+ diagObj.db.clear();
+ diagObj.parser.parse(text);
log.info('Rendering diagram ' + text);
@@ -198,12 +185,12 @@ export const draw = function (text, id) {
return {};
});
- const classes = classDb.getClasses();
+ const classes = diagObj.db.getClasses();
const keys = Object.keys(classes);
for (let i = 0; i < keys.length; i++) {
const classDef = classes[keys[i]];
- const node = svgDraw.drawClass(diagram, classDef, conf);
+ const node = svgDraw.drawClass(diagram, classDef, conf, diagObj);
idCache[node.id] = node;
// Add nodes to the graph. The first argument is the node id. The second is
@@ -214,7 +201,7 @@ export const draw = function (text, id) {
log.info('Org height: ' + node.height);
}
- const relations = classDb.getRelations();
+ const relations = diagObj.db.getRelations();
relations.forEach(function (relation) {
log.info(
'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
@@ -234,7 +221,7 @@ export const draw = function (text, id) {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
root
- .select('#' + lookUpDomId(v))
+ .select('#' + diagObj.db.lookUpDomId(v))
.attr(
'transform',
'translate(' +
@@ -249,7 +236,7 @@ export const draw = function (text, id) {
g.edges().forEach(function (e) {
if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
- svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);
+ svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf, diagObj);
}
});
@@ -263,10 +250,9 @@ export const draw = function (text, id) {
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
log.debug(`viewBox ${vBox}`);
diagram.attr('viewBox', vBox);
- addSVGAccessibilityFields(parser.yy, diagram, id);
+ addSVGAccessibilityFields(diagObj.db, diagram, id);
};
export default {
- setConf,
draw,
};
diff --git a/src/diagrams/class/svgDraw.js b/src/diagrams/class/svgDraw.js
index b174ebeb8..a6b11cd95 100644
--- a/src/diagrams/class/svgDraw.js
+++ b/src/diagrams/class/svgDraw.js
@@ -1,19 +1,18 @@
import { line, curveBasis } from 'd3';
-import { lookUpDomId, relationType } from './classDb';
import utils from '../../utils';
import { log } from '../../logger';
let edgeCount = 0;
-export const drawEdge = function (elem, path, relation, conf) {
+export const drawEdge = function (elem, path, relation, conf, diagObj) {
const getRelationType = function (type) {
switch (type) {
- case relationType.AGGREGATION:
+ case diagObj.db.relationType.AGGREGATION:
return 'aggregation';
- case relationType.EXTENSION:
+ case diagObj.db.EXTENSION:
return 'extension';
- case relationType.COMPOSITION:
+ case diagObj.db.COMPOSITION:
return 'composition';
- case relationType.DEPENDENCY:
+ case diagObj.db.DEPENDENCY:
return 'dependency';
}
};
@@ -150,10 +149,11 @@ export const drawEdge = function (elem, path, relation, conf) {
* @param {SVGSVGElement} elem The element to draw it into
* @param classDef
* @param conf
+ * @param diagObj
* @todo Add more information in the JSDOC here
*/
-export const drawClass = function (elem, classDef, conf) {
- log.info('Rendering class ' + classDef);
+export const drawClass = function (elem, classDef, conf, diagObj) {
+ log.debug('Rendering class ', classDef, conf);
const id = classDef.id;
const classInfo = {
@@ -164,7 +164,7 @@ export const drawClass = function (elem, classDef, conf) {
};
// add class group
- const g = elem.append('g').attr('id', lookUpDomId(id)).attr('class', 'classGroup');
+ const g = elem.append('g').attr('id', diagObj.db.lookUpDomId(id)).attr('class', 'classGroup');
// add title
let title;
diff --git a/src/diagrams/info/infoRenderer.js b/src/diagrams/info/infoRenderer.js
index 7b8f68251..cbe3c52f8 100644
--- a/src/diagrams/info/infoRenderer.js
+++ b/src/diagrams/info/infoRenderer.js
@@ -1,30 +1,20 @@
/** Created by knut on 14-12-11. */
import { select } from 'd3';
-import db from './infoDb';
-import infoParser from './parser/info';
import { log } from '../../logger';
import { getConfig } from '../../config';
-const conf = {};
-export const setConf = function (cnf) {
- const keys = Object.keys(cnf);
-
- keys.forEach(function (key) {
- conf[key] = cnf[key];
- });
-};
-
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
*
* @param {any} text
* @param {any} id
* @param {any} version
+ * @param diagObj
*/
-export const draw = (text, id, version) => {
+export const draw = (text, id, version, diagObj) => {
try {
- const parser = infoParser.parser;
- parser.yy = db;
+ // const parser = infoParser.parser;
+ // parser.yy = db;
log.debug('Renering info diagram\n' + text);
const securityLevel = getConfig().securityLevel;
@@ -40,8 +30,8 @@ export const draw = (text, id, version) => {
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// Parse the graph definition
- parser.parse(text);
- log.debug('Parsed info diagram');
+ // parser.parse(text);
+ // log.debug('Parsed info diagram');
// Fetch the default direction, use TD if none was found
const svg = root.select('#' + id);
@@ -65,6 +55,5 @@ export const draw = (text, id, version) => {
};
export default {
- setConf,
draw,
};
diff --git a/src/diagrams/requirement/requirementRenderer.js b/src/diagrams/requirement/requirementRenderer.js
index 3ad3e0b07..e07612e0e 100644
--- a/src/diagrams/requirement/requirementRenderer.js
+++ b/src/diagrams/requirement/requirementRenderer.js
@@ -356,7 +356,6 @@ export const draw = (text, id, _version, diagObj) => {
drawRelationshipFromLayout(svg, rel, g, id, diagObj);
});
- // svg.attr('height', '500px');
const padding = conf.rect_padding;
const svgBounds = svg.node().getBBox();
const width = svgBounds.width + padding * 2;
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 01ec5b638..fd575c086 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -379,34 +379,30 @@ const render = function (id, _txt, cb, container) {
diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'gantt':
- cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
diag.renderer.setConf(cnf.gantt);
diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'class':
- cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- classRenderer.setConf(cnf.class);
- classRenderer.draw(txt, id, pkg.version, diag);
+ // classRenderer.setConf(cnf.class);
+ diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'classDiagram':
- cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- classRendererV2.setConf(cnf.class);
- classRendererV2.draw(txt, id, pkg.version, diag);
+ // classRendererV2.setConf(cnf.class);
+ diag.renderer.draw(txt, id, pkg.version, diag);
break;
case 'state':
- cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- stateRenderer.setConf(cnf.state);
- stateRenderer.draw(txt, id, pkg.version, diag);
+ // 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);
+ // 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);
- infoRenderer.draw(txt, id, pkg.version, diag);
+ // 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);
@@ -582,10 +578,10 @@ function updateRendererConfigs(conf) {
}
sequenceRenderer.setConf(conf.sequence);
ganttRenderer.setConf(conf.gantt);
- classRenderer.setConf(conf.class);
+ // classRenderer.setConf(conf.class);
stateRenderer.setConf(conf.state);
stateRendererV2.setConf(conf.state);
- infoRenderer.setConf(conf.class);
+ // infoRenderer.setConf(conf.class);
journeyRenderer.setConf(conf.journey);
errorRenderer.setConf(conf.class);
}