- graph TD
- a["Haiya"]-->b
+ graph TB;
+ subgraph "number as labels";
+ 1 --> 2
+ end;
+
+
+ flowchart TB;
+ subgraph "number as labels";
+ 1 --> 2
+ end;
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index d70d56433..951ce5d55 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -3,8 +3,8 @@ import utils from '../../utils';
import * as configApi from '../../config';
import common from '../common/common';
import mermaidAPI from '../../mermaidAPI';
+import { logger } from '../../logger';
-// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
const MERMAID_DOM_ID_PREFIX = 'flowchart-';
let vertexCounter = 0;
let config = configApi.getConfig();
@@ -17,6 +17,9 @@ let tooltips = {};
let subCount = 0;
let firstGraphFlag = true;
let direction;
+
+let version; // As in graph
+
// Functions to be run after graph rendering
let funs = [];
@@ -36,6 +39,7 @@ export const lookUpDomId = function(id) {
return vertices[veritceKeys[i]].domId;
}
}
+ return id;
};
/**
@@ -383,7 +387,7 @@ funs.push(setupToolTips);
/**
* Clears the internal graph db so that a new graph can be parsed.
*/
-export const clear = function() {
+export const clear = function(ver) {
vertices = {};
classes = {};
edges = [];
@@ -394,6 +398,10 @@ export const clear = function() {
subCount = 0;
tooltips = [];
firstGraphFlag = true;
+ version = ver || 'gen-1';
+};
+export const setGen = ver => {
+ version = ver || 'gen-1';
};
/**
*
@@ -407,6 +415,7 @@ export const defaultStyle = function() {
* Clears the internal graph db so that a new graph can be parsed.
*/
export const addSubGraph = function(_id, list, _title) {
+ // logger.warn('addSubgraph', _id, list, _title);
let id = _id.trim();
let title = _title;
if (_id === _title && _title.match(/\s/)) {
@@ -432,12 +441,15 @@ export const addSubGraph = function(_id, list, _title) {
let nodeList = [];
nodeList = uniq(nodeList.concat.apply(nodeList, list));
- for (let i = 0; i < nodeList.length; i++) {
- if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i];
+ if (version === 'gen-1') {
+ logger.warn('LOOKING UP');
+ for (let i = 0; i < nodeList.length; i++) {
+ nodeList[i] = lookUpDomId(nodeList[i]);
+ }
}
id = id || 'subGraph' + subCount;
- if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
+ // if (id[0].match(/\d/)) id = lookUpDomId(id);
title = title || '';
title = common.sanitizeText(title, config);
subCount = subCount + 1;
@@ -675,6 +687,7 @@ export default {
getEdges,
getClasses,
clear,
+ setGen,
defaultStyle,
addSubGraph,
getDepthFirstPos,
diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index 49330588f..671dc460e 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -335,6 +335,7 @@ export const getClasses = function(text) {
export const draw = function(text, id) {
logger.info('Drawing flowchart');
flowDb.clear();
+ flowDb.setGen('gen-2');
const parser = flow.parser;
parser.yy = flowDb;
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index be60bf4b3..8cb1e9a11 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -133,7 +133,8 @@ export const addVertices = function(vert, g, svgId) {
_shape = 'rect';
}
// Add the node
- g.setNode(vertex.id, {
+ logger.warn('Adding node', vertex.id, vertex.domId);
+ g.setNode(flowDb.lookUpDomId(vertex.id), {
labelType: 'svg',
labelStyle: styles.labelStyle,
shape: _shape,
@@ -247,7 +248,7 @@ export const addEdges = function(edges, g) {
edgeData.minlen = edge.length || 1;
// Add the edge to the graph
- g.setEdge(edge.start, edge.end, edgeData, cnt);
+ g.setEdge(flowDb.lookUpDomId(edge.start), flowDb.lookUpDomId(edge.end), edgeData, cnt);
});
};
@@ -278,6 +279,7 @@ export const getClasses = function(text) {
export const draw = function(text, id) {
logger.info('Drawing flowchart');
flowDb.clear();
+ flowDb.setGen('gen-1');
const parser = flow.parser;
parser.yy = flowDb;
@@ -323,6 +325,7 @@ export const draw = function(text, id) {
// Fetch the verices/nodes and edges/links from the parsed graph definition
const vert = flowDb.getVertices();
+ logger.warn('Get vertices', vert);
const edges = flowDb.getEdges();
@@ -333,7 +336,13 @@ export const draw = function(text, id) {
selectAll('cluster').append('text');
for (let j = 0; j < subG.nodes.length; j++) {
- g.setParent(subG.nodes[j], subG.id);
+ logger.warn(
+ 'Setting subgraph',
+ subG.nodes[j],
+ flowDb.lookUpDomId(subG.nodes[j]),
+ flowDb.lookUpDomId(subG.id)
+ );
+ g.setParent(flowDb.lookUpDomId(subG.nodes[j]), flowDb.lookUpDomId(subG.id));
}
}
addVertices(vert, g, id);
@@ -388,6 +397,8 @@ export const draw = function(text, id) {
const svg = select(`[id="${id}"]`);
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+ logger.warn(g);
+
// Run the renderer. This is what draws the final graph.
const element = select('#' + id + ' g');
render(element, g);
diff --git a/src/diagrams/flowchart/parser/flow.spec.js b/src/diagrams/flowchart/parser/flow.spec.js
index 8c844cfc4..61e56e6ce 100644
--- a/src/diagrams/flowchart/parser/flow.spec.js
+++ b/src/diagrams/flowchart/parser/flow.spec.js
@@ -136,4 +136,14 @@ describe('when parsing ', function() {
const classes = flow.parser.yy.getClasses();
expect(vertices['A'].id).toBe('A');
});
+ it('should be possible to use numbers as labels', function() {
+ let statement = '';
+
+ statement = statement + 'graph TB;subgraph "number as labels";1;end;';
+ const res = flow.parser.parse(statement);
+ const vertices = flow.parser.yy.getVertices();
+ console.log(vertices);
+ const classes = flow.parser.yy.getClasses();
+ expect(vertices['1'].id).toBe('1');
+ });
});