Merge pull request #6 from mermaid-js/develop

sync fork
mermaid-js · Dec 20, 2019 · 061d31a · 061d31a
2 parents b8ee680 + 1bc62cf
commit 061d31a
Show file tree

Hide file tree

Showing 12 changed files with 439 additions and 181 deletions.
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
@@ -428,4 +428,29 @@ describe('Flowcart', () => {
  { flowchart: { htmlLabels: false } }
  );
  });
+ it('17: Chaining of nodes', () => {
+ imgSnapshotTest(
+ `graph LR
+ a --> b --> c
+ `,
+ { flowchart: { htmlLabels: false } }
+ );
+ });
+ it('18: Multiple nodes and chaining in one statement', () => {
+ imgSnapshotTest(
+ `graph LR
+ a --> b c--> d
+ `,
+ { flowchart: { htmlLabels: false } }
+ );
+ });
+ it('19: Multiple nodes and chaining in one statement', () => {
+ imgSnapshotTest(
+ `graph TD
+ A[ h ] -- hello --> B[" test "]:::exClass C --> D;
+ classDef exClass background:#bbb,border:1px solid red;
+ `,
+ { flowchart: { htmlLabels: false } }
+ );
+ });
 });
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
@@ -5,7 +5,7 @@
  rel="stylesheet"
  />
  <style>
- body {background: white}
+ body {background: black}
  h1 { color: white;}
  .arrowheadPath {fill: red;}
 
@@ -17,26 +17,24 @@
  <body>
  <h1>info below</h1>
  <div style="display: flex;width: 100%; height: 100%">
- <div class="mermaid" style="width: 100%; height: 100%">gantt
- dateFormat YYYY-MM-DD
- axisFormat %d/%m
- title Adding GANTT diagram to mermaid
- excludes weekdays 2014-01-10
-
- apple :a, 2017-07-20, 1w
- banana :crit, b, 2017-07-23, 1d
- cherry :active, c, after b a, 1d
-
-
+ <div class="mermaid" style="width: 100%; height: 100%">
+ graph TB
+ A --> B
+ A ==> C
+ A .-> D
+ A === E
+ A -.- F
+ D -- Hello --> a
+ D-- text including R TD space --xb
  </div>
 </div>
  <script src="./mermaid.js"></script>
  <script>
  mermaid.initialize({
- // theme: 'dark',
+ theme: 'dark',
  // arrowMarkerAbsolute: true,
  // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
- logLevel: 3,
+ logLevel: 0,
  flowchart: { curve: 'linear', "htmlLabels": false },
  // gantt: { axisFormat: '%m/%d/%Y' },
  sequence: { actorMargin: 50 },

diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
@@ -102,7 +102,7 @@ export const addVertex = function(_id, text, type, style, classes) {
  * @param type
  * @param linktext
  */
-export const addLink = function(_start, _end, type, linktext) {
+export const addSingleLink = function(_start, _end, type, linktext) {
  let start = _start;
  let end = _end;
  if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
@@ -127,6 +127,14 @@ export const addLink = function(_start, _end, type, linktext) {
  }
  edges.push(edge);
 };
+export const addLink = function(_start, _end, type, linktext) {
+ let i, j;
+ for (i = 0; i < _start.length; i++) {
+ for (j = 0; j < _end.length; j++) {
+ addSingleLink(_start[i], _end[j], type, linktext);
+ }
+ }
+};
 
 /**
  * Updates a link's line interpolation algorithm
@@ -501,6 +509,130 @@ export const firstGraph = () => {
  return false;
 };
 
+const destructStartLink = _str => {
+ const str = _str.trim();
+
+ switch (str) {
+ case '<--':
+ return { type: 'arrow', stroke: 'normal' };
+ case 'x--':
+ return { type: 'arrow_cross', stroke: 'normal' };
+ case 'o--':
+ return { type: 'arrow_circle', stroke: 'normal' };
+ case '<-.':
+ return { type: 'arrow', stroke: 'dotted' };
+ case 'x-.':
+ return { type: 'arrow_cross', stroke: 'dotted' };
+ case 'o-.':
+ return { type: 'arrow_circle', stroke: 'dotted' };
+ case '<==':
+ return { type: 'arrow', stroke: 'thick' };
+ case 'x==':
+ return { type: 'arrow_cross', stroke: 'thick' };
+ case 'o==':
+ return { type: 'arrow_circle', stroke: 'thick' };
+ case '--':
+ return { type: 'arrow_open', stroke: 'normal' };
+ case '==':
+ return { type: 'arrow_open', stroke: 'thick' };
+ case '-.':
+ return { type: 'arrow_open', stroke: 'dotted' };
+ }
+};
+
+const destructEndLink = _str => {
+ const str = _str.trim();
+
+ switch (str) {
+ case '--x':
+ return { type: 'arrow_cross', stroke: 'normal' };
+ case '-->':
+ return { type: 'arrow', stroke: 'normal' };
+ case '<-->':
+ return { type: 'double_arrow_point', stroke: 'normal' };
+ case 'x--x':
+ return { type: 'double_arrow_cross', stroke: 'normal' };
+ case 'o--o':
+ return { type: 'double_arrow_circle', stroke: 'normal' };
+ case 'o.-o':
+ return { type: 'double_arrow_circle', stroke: 'dotted' };
+ case '<==>':
+ return { type: 'double_arrow_point', stroke: 'thick' };
+ case 'o==o':
+ return { type: 'double_arrow_circle', stroke: 'thick' };
+ case 'x==x':
+ return { type: 'double_arrow_cross', stroke: 'thick' };
+ case 'x.-x':
+ return { type: 'double_arrow_cross', stroke: 'dotted' };
+ case 'x-.-x':
+ return { type: 'double_arrow_cross', stroke: 'dotted' };
+ case '<.->':
+ return { type: 'double_arrow_point', stroke: 'dotted' };
+ case '<-.->':
+ return { type: 'double_arrow_point', stroke: 'dotted' };
+ case 'o-.-o':
+ return { type: 'double_arrow_circle', stroke: 'dotted' };
+ case '--o':
+ return { type: 'arrow_circle', stroke: 'normal' };
+ case '---':
+ return { type: 'arrow_open', stroke: 'normal' };
+ case '-.-x':
+ return { type: 'arrow_cross', stroke: 'dotted' };
+ case '-.->':
+ return { type: 'arrow', stroke: 'dotted' };
+ case '-.-o':
+ return { type: 'arrow_circle', stroke: 'dotted' };
+ case '-.-':
+ return { type: 'arrow_open', stroke: 'dotted' };
+ case '.-x':
+ return { type: 'arrow_cross', stroke: 'dotted' };
+ case '.->':
+ return { type: 'arrow', stroke: 'dotted' };
+ case '.-o':
+ return { type: 'arrow_circle', stroke: 'dotted' };
+ case '.-':
+ return { type: 'arrow_open', stroke: 'dotted' };
+ case '==x':
+ return { type: 'arrow_cross', stroke: 'thick' };
+ case '==>':
+ return { type: 'arrow', stroke: 'thick' };
+ case '==o':
+ return { type: 'arrow_circle', stroke: 'thick' };
+ case '===':
+ return { type: 'arrow_open', stroke: 'thick' };
+ }
+};
+
+const destructLink = (_str, _startStr) => {
+ const info = destructEndLink(_str);
+ let startInfo;
+ if (_startStr) {
+ startInfo = destructStartLink(_startStr);
+ console.log(startInfo, info);
+ if (startInfo.stroke !== info.stroke) {
+ return { type: 'INVALID', stroke: 'INVALID' };
+ }
+
+ if (startInfo.type === 'arrow_open') {
+ // -- xyz --> - take arrow type form ending
+ startInfo.type = info.type;
+ } else {
+ // x-- xyz --> - not supported
+ if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };
+
+ startInfo.type = 'double_' + startInfo.type;
+ }
+
+ if (startInfo.type === 'double_arrow') {
+ startInfo.type = 'double_arrow_point';
+ }
+
+ return startInfo;
+ }
+
+ return info;
+};
+
 export default {
  addVertex,
  addLink,
@@ -523,6 +655,7 @@ export default {
  getDepthFirstPos,
  indexNodes,
  getSubGraphs,
+ destructLink,
  lex: {
  firstGraph
  }

diff --git a/src/diagrams/flowchart/parser/flow-edges.spec.js b/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -87,7 +87,7 @@ describe('[Edges] when parsing', () => {
  expect(edges[0].text).toBe('');
  });
 
- it('should handle double edged nodes with text on thick arrows', function() {
+ it('should handle double edged nodes with text on thick arrows XYZ1', function() {
  const res = flow.parser.parse('graph TD;\nA x== text ==x B;');
 
  const vert = flow.parser.yy.getVertices();

diff --git a/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -22,6 +22,16 @@ describe('[Singlenodes] when parsing', () => {
  expect(edges.length).toBe(0);
  expect(vert['A'].styles.length).toBe(0);
  });
+ it('should handle a single node with white space after it (SN1)', function() {
+ // Silly but syntactically correct
+ const res = flow.parser.parse('graph TD;A ;');
+
+ const vert = flow.parser.yy.getVertices();
+ const edges = flow.parser.yy.getEdges();
+
+ expect(edges.length).toBe(0);
+ expect(vert['A'].styles.length).toBe(0);
+ });
 
  it('should handle a single square node', function() {
  // Silly but syntactically correct

diff --git a/src/diagrams/flowchart/parser/flow-text.spec.js b/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -182,7 +182,7 @@ describe('[Text] when parsing', () => {
 
  expect(edges[0].stroke).toBe('normal');
  });
- it('it should handle dotted text on lines', function() {
+ it('it should handle dotted text on lines (TD3)', function() {
  const res = flow.parser.parse('graph TD;A-. test text with == .->B;');
 
  const vert = flow.parser.yy.getVertices();
@@ -265,7 +265,7 @@ describe('[Text] when parsing', () => {
  expect(edges[0].text).toBe('text including URL space');
  });
 
- it('should handle space and dir (TD)', function() {
+ it('should handle space and dir (TD2)', function() {
  const res = flow.parser.parse('graph TD;A-- text including R TD space --xB;');
 
  const vert = flow.parser.yy.getVertices();