diff --git a/e2e/spec/flowchart.spec.js b/e2e/spec/flowchart.spec.js index 08ffc4a5a..5472b2946 100644 --- a/e2e/spec/flowchart.spec.js +++ b/e2e/spec/flowchart.spec.js @@ -40,6 +40,20 @@ describe('Flowcart', () => { {}) }) + it('should style nodes via a class.', async () => { + await imgSnapshotTest(page, ` + graph TD + 1A --> 1B + 1B --> 1C + 1C --> D + 1C --> E + + classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f + class 1A,1B,D,E processHead + `, + {}) + }) + it('should render a flowchart full of circles', async () => { await imgSnapshotTest(page, ` graph LR @@ -145,6 +159,16 @@ describe('Flowcart', () => { {}) }) + it('should render subgraphs with a title startign with a digit', async () => { + await imgSnapshotTest(page, ` + graph TB + subgraph 2Two + a1-->a2 + end + `, + {}) + }) + it('should render styled subgraphs', async () => { await imgSnapshotTest(page, ` graph TB diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js index 905615127..8570225aa 100644 --- a/src/diagrams/flowchart/flowDb.js +++ b/src/diagrams/flowchart/flowDb.js @@ -61,6 +61,10 @@ export const addVertex = function (_id, text, type, style, classes) { } vertices[id].text = txt + } else { + if (!vertices[id].text) { + vertices[id].text = _id + } } if (typeof type !== 'undefined') { vertices[id].type = type @@ -175,7 +179,9 @@ export const setDirection = function (dir) { * @param className Class to add */ export const setClass = function (ids, className) { - ids.split(',').forEach(function (id) { + ids.split(',').forEach(function (_id) { + let id = _id + if (_id[0].match(/\d/)) id = 's' + id if (typeof vertices[id] !== 'undefined') { vertices[id].classes.push(className) }