From 4f1b26fd765658b1cf01e0b1ab71597a5e44ec7b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 2 Dec 2022 08:06:16 +0100 Subject: [PATCH 01/38] Adding new flowchart renderer using cytoscape --- .vite/build.ts | 7 + cypress/platform/knsv2.html | 27 +- packages/mermaid-flowchart-v3/package.json | 66 ++ packages/mermaid-flowchart-v3/src/detector.ts | 24 + .../src/diagram-definition.ts | 14 + .../src/flowRenderer-v3.js | 674 ++++++++++++++++++ .../mermaid-flowchart-v3/src/mermaidUtils.ts | 56 ++ packages/mermaid-flowchart-v3/src/styles.ts | 114 +++ packages/mermaid/src/dagre-wrapper/nodes.js | 1 + .../mermaid/src/diagrams/flowchart/flowDb.js | 9 +- .../src/diagrams/flowchart/parser/flow.jison | 1 + pnpm-lock.yaml | 60 +- 12 files changed, 1026 insertions(+), 27 deletions(-) create mode 100644 packages/mermaid-flowchart-v3/package.json create mode 100644 packages/mermaid-flowchart-v3/src/detector.ts create mode 100644 packages/mermaid-flowchart-v3/src/diagram-definition.ts create mode 100644 packages/mermaid-flowchart-v3/src/flowRenderer-v3.js create mode 100644 packages/mermaid-flowchart-v3/src/mermaidUtils.ts create mode 100644 packages/mermaid-flowchart-v3/src/styles.ts diff --git a/.vite/build.ts b/.vite/build.ts index 1be46ad5a..77cace03e 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -41,6 +41,11 @@ const packageOptions = { packageName: 'mermaid-mindmap', file: 'detector.ts', }, + 'mermaid-flowchart-v3': { + name: 'mermaid-flowchart-v3', + packageName: 'mermaid-flowchart-v3', + file: 'detector.ts', + }, // 'mermaid-example-diagram-detector': { // name: 'mermaid-example-diagram-detector', // packageName: 'mermaid-example-diagram', @@ -120,6 +125,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) if (watch && config.build) { config.build.watch = { include: [ + 'packages/mermaid-flowchart-v3/src/**', 'packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**', // 'packages/mermaid-example-diagram/src/**', @@ -148,6 +154,7 @@ const main = async () => { if (watch) { build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' })); if (!mermaidOnly) { + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-flowchart-v3' })); build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); } diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index ba7f41601..b5b8eea5e 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -56,14 +56,20 @@
Security check
-graph LR
-    subgraph external
-        inside
-    end
-    outside --> external
-
- 
-mindmap
+cyto LR
+      subgraph test
+        inside1 --> inside2
+      end
+      subgraph test2
+        inside3 --> inside4
+      end
+      out
+
+ a(letter a
a) ---> b(letter b)--> c(letter c) --> d -->e(letter e
e) --> a b <--> + d(letter b
d) + 
+      mindmap
   root
     child1((Circle))
         grandchild 1
@@ -78,7 +84,7 @@ mindmap
         ::icon(mdi mdi-fire)
           gc7((grand
grand
child 8))
- 
+    
       gantt
         title Style today marker (vertical line should be 5px wide and half-transparent blue)
         dateFormat YYYY-MM-DD
@@ -96,9 +102,10 @@ mindmap
 
     
   
 
diff --git a/cypress/platform/ghsa1.html b/cypress/platform/ghsa1.html
index 890a8e0dd..59c316eb3 100644
--- a/cypress/platform/ghsa1.html
+++ b/cypress/platform/ghsa1.html
@@ -21,6 +21,9 @@
       const diagram = document.getElementById('diagram');
       const svg = mermaid.render('diagram-svg', graph);
       diagram.innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     
   
 
diff --git a/cypress/platform/ghsa2.html b/cypress/platform/ghsa2.html
index 6d4dccca3..3ff69158b 100644
--- a/cypress/platform/ghsa2.html
+++ b/cypress/platform/ghsa2.html
@@ -21,6 +21,9 @@
       const diagram = document.getElementById('diagram');
       const svg = mermaid.render('diagram-svg', graph);
       diagram.innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     
   
 
diff --git a/cypress/platform/ghsa3.html b/cypress/platform/ghsa3.html
index 63dfa0d01..79fa40131 100644
--- a/cypress/platform/ghsa3.html
+++ b/cypress/platform/ghsa3.html
@@ -94,6 +94,9 @@
       // document.querySelector('#diagram').innerHTML = diagram;
       mermaid.render('diagram', diagram, (res) => {
         document.querySelector('#res').innerHTML = res;
+        if (window.Cypress) {
+          window.rendered = true;
+        }
       });
     
   

From 01a535b8e02be3796d69504a11feb4c46fc8dffd Mon Sep 17 00:00:00 2001
From: sidharthv96 
Date: Mon, 16 Jan 2023 09:52:48 +0000
Subject: [PATCH 35/38] Update docs

---
 docs/syntax/sequenceDiagram.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index f4f4486ee..77503b024 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -102,16 +102,16 @@ Messages can be of two displayed either solid or with a dotted line.
 
 There are six types of arrows currently supported:
 
-| Type | Description                                      |
-| ---- | ------------------------------------------------ |
-| ->   | Solid line without arrow                         |
-| -->  | Dotted line without arrow                        |
-| ->>  | Solid line with arrowhead                        |
-| -->> | Dotted line with arrowhead                       |
-| -x   | Solid line with a cross at the end               |
-| --x  | Dotted line with a cross at the end.             |
-| -)   | Solid line with an open arrow at the end (async) |
-| --)  | Dotted line with a open arrow at the end (async) |
+| Type   | Description                                      |
+| ------ | ------------------------------------------------ |
+| `->`   | Solid line without arrow                         |
+| `-->`  | Dotted line without arrow                        |
+| `->>`  | Solid line with arrowhead                        |
+| `-->>` | Dotted line with arrowhead                       |
+| `-x`   | Solid line with a cross at the end               |
+| `--x`  | Dotted line with a cross at the end.             |
+| `-)`   | Solid line with an open arrow at the end (async) |
+| `--)`  | Dotted line with a open arrow at the end (async) |
 
 ## Activations
 

From 9629c8d8d6a01dfda90fbc8d3eefe4eb8f1a8620 Mon Sep 17 00:00:00 2001
From: Jon Ruskin 
Date: Tue, 17 Jan 2023 08:31:36 -0700
Subject: [PATCH 36/38] use undefined not null

---
 packages/mermaid/src/diagrams/sequence/svgDraw.js | 8 ++++++--
 packages/mermaid/src/utils.spec.js                | 4 ++--
 packages/mermaid/src/utils.ts                     | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 495865674..220db2209 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -218,7 +218,11 @@ export const drawText = function (elem, textData) {
     }
   }
   for (let [i, line] of lines.entries()) {
-    if (textData.textMargin !== undefined && textData.textMargin === 0 && _textFontSize !== null) {
+    if (
+      textData.textMargin !== undefined &&
+      textData.textMargin === 0 &&
+      _textFontSize !== undefined
+    ) {
       dy = i * _textFontSize;
     }
 
@@ -234,7 +238,7 @@ export const drawText = function (elem, textData) {
     if (textData.fontFamily !== undefined) {
       textElem.style('font-family', textData.fontFamily);
     }
-    if (_textFontSizePx !== null) {
+    if (_textFontSizePx !== undefined) {
       textElem.style('font-size', _textFontSizePx);
     }
     if (textData.fontWeight !== undefined) {
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index f8bf613fd..0f0bc1e92 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -421,10 +421,10 @@ describe('when parsing font sizes', function () {
   });
 
   it('handles undefined input', function () {
-    expect(utils.parseFontSize(undefined)).toEqual([null, null]);
+    expect(utils.parseFontSize(undefined)).toEqual([undefined, undefined]);
   });
 
   it('handles unparseable input', function () {
-    expect(utils.parseFontSize({ fontSize: 14 })).toEqual([null, null]);
+    expect(utils.parseFontSize({ fontSize: 14 })).toEqual([undefined, undefined]);
   });
 });
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index a4ef5f630..876c81543 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -962,7 +962,7 @@ export const parseFontSize = (fontSize: string | number | undefined): [number?,
   const fontSizeNumber = parseInt(fontSize, 10);
   if (Number.isNaN(fontSizeNumber)) {
     // if a number value can't be parsed, return null for both values
-    return [null, null];
+    return [undefined, undefined];
   } else if (fontSize === String(fontSizeNumber)) {
     // if a string input doesn't contain any units, assume px units
     return [fontSizeNumber, fontSize + 'px'];

From 96dedc7b5e1cb66a3935789a2eb2bfcea487653a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 17 Jan 2023 21:37:32 +0530
Subject: [PATCH 37/38] flowchart-elk repro

---
 cypress/platform/sidv.html | 281 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 275 insertions(+), 6 deletions(-)

diff --git a/cypress/platform/sidv.html b/cypress/platform/sidv.html
index c9bf56b7d..539288464 100644
--- a/cypress/platform/sidv.html
+++ b/cypress/platform/sidv.html
@@ -1,14 +1,283 @@
 
+  
+    
+    
+    
+    
+    
+    
+  
   
-    
-    none
-    hello world
+    
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+graph TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
     

-    
-    
   
 

From 549483d19b8f7f38d80944dbdbfd2ad1333f1238 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 17 Jan 2023 22:09:22 +0530
Subject: [PATCH 38/38] Update funding :)

---
 .github/FUNDING.yml | 4 +++-
 cSpell.json         | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index a3427c2f4..b7e5d38d9 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,6 +1,8 @@
 # These are supported funding model platforms
 
-github: [knsv]
+github:
+  - knsv
+  - sidharthv96
 #patreon: # Replace with a single Patreon username
 #open_collective: # Replace with a single Open Collective username
 #ko_fi: # Replace with a single Ko-fi username
diff --git a/cSpell.json b/cSpell.json
index 26550c527..6f93af103 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -85,6 +85,7 @@
     "setupgraphviewbox",
     "shiki",
     "sidharth",
+    "sidharthv",
     "sphinxcontrib",
     "statediagram",
     "stylis",