From 9cac8cc4727abef43a6d6483126bd8228dbb517a Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Tue, 18 Jun 2024 15:42:29 +0200
Subject: [PATCH 1/3] MC-1765: WIP Added some flow chart shapes

---
 cypress/platform/neo-test.html | 343 +++++++++++++++++++++++++++++++++
 1 file changed, 343 insertions(+)

diff --git a/cypress/platform/neo-test.html b/cypress/platform/neo-test.html
index 1dbf8fbec..5c7acd1d0 100644
--- a/cypress/platform/neo-test.html
+++ b/cypress/platform/neo-test.html
@@ -1582,6 +1582,349 @@ direction LR
     </tr>
 
 
+  <!-- Separator row -->
+  <tr class="separator">
+    <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+  </tr>
+
+  <tr>
+    <th class="vertical-header">
+      <button class="collapsible">
+        Flow chart Node
+      </button>
+      <div class="content">
+        <div class="pre-scrollable">
+          <pre>
+            flowchart LR
+            A[Start]
+          </pre>
+        </div>
+      </div>
+    </th>
+    <td>
+      <pre id="diagram1" class="mermaid">
+        %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+        flowchart LR
+        A[Start]
+      </pre>
+    </td>
+    <td>
+      <pre id="diagram1" class="mermaid">
+        %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+        flowchart LR
+        A[Start]
+    </pre>
+    </td>
+    <td>
+      <pre id="diagram2" class="mermaid">
+        %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+        flowchart LR
+        A[Start]
+    </pre>
+    </td>
+    <td>
+      <pre id="diagram2" class="mermaid">
+        %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+        flowchart LR
+        A[Start]
+    </pre>
+    </td>
+    <td>
+      <pre id="diagram3" class="mermaid">
+        %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+        flowchart LR
+        A[Start]
+    </pre>
+    </td>
+    <td>
+      <pre id="diagram3" class="mermaid">
+        %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+        flowchart LR
+        A[Start]
+    </pre>
+    </td>
+  </tr>
+
+<!-- Separator row -->
+<tr class="separator">
+  <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+</tr>
+
+<tr>
+  <th class="vertical-header">
+    <button class="collapsible">
+      Flow chart Nodes with Edges and labels
+    </button>
+    <div class="content">
+      <div class="pre-scrollable">
+        <pre>
+          flowchart LR
+          A[Start] --Some text--> B(Continue)
+        </pre>
+      </div>
+    </div>
+  </th>
+  <td>
+    <pre id="diagram1" class="mermaid">
+      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] --Some text--> B(Continue)
+    </pre>
+  </td>
+  <td>
+    <pre id="diagram1" class="mermaid">
+      %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] --Some text--> B(Continue)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram2" class="mermaid">
+      %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] --Some text--> B(Continue)
+    </pre>
+  </td>
+  <td>
+    <pre id="diagram2" class="mermaid">
+      %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] --Some text--> B(Continue)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram3" class="mermaid">
+      %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] --Some text--> B(Continue)
+    </pre>
+  </td>
+  <td>
+    <pre id="diagram3" class="mermaid">
+      %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+      A[Start] --Some text--> B(Continue)
+    </pre>
+  </td>
+</tr>
+
+<!-- Separator row -->
+<tr class="separator">
+  <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+</tr>
+
+<tr>
+  <th class="vertical-header">
+    <button class="collapsible">
+      Flow chart with polygon
+    </button>
+    <div class="content">
+      <div class="pre-scrollable">
+        <pre>
+          flowchart LR
+            A[Start] -->C{Evaluate}
+            C -- One --> D[Option 1]
+            C -- Two --> E[Option 2]
+            C -- Three --> F[fa:fa-car Option 3]
+        </pre>
+      </div>
+    </div>
+  </th>
+  <td>
+    <pre id="diagram1" class="mermaid">
+      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] -->C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]
+    </pre>
+  </td>
+  <td>
+    <pre id="diagram1" class="mermaid">
+      %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] -->C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram2" class="mermaid">
+      %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] -->C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]
+    </pre>
+  </td>
+  <td>
+    <pre id="diagram2" class="mermaid">
+      %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] -->C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram3" class="mermaid">
+      %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] -->C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]
+    </pre>
+  </td>
+  <td>
+    <pre id="diagram3" class="mermaid">
+      %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        A[Start] -->C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]
+    </pre>
+  </td>
+</tr>
+
+
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Flow chart with subgraph
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart LR
+                subgraph TOP
+                  direction TB
+                  subgraph B1
+                  direction RL
+                  i1 -->f1
+                end
+              end
+              A --> TOP --> B
+              B1 --> B2
+            </pre>
+          </div>
+        </div>
+      </th>
+      <td>
+        <pre id="diagram1" class="mermaid">
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+          flowchart LR
+            subgraph TOP
+              direction TB
+              subgraph B1
+                direction RL
+                i1 -->f1
+              end
+            end
+          A --> TOP --> B
+          B1 --> B2
+        </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+          flowchart LR
+            subgraph TOP
+              direction TB
+              subgraph B1
+                direction RL
+                i1 -->f1
+              end
+            end
+          A --> TOP --> B
+          B1 --> B2
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+          flowchart LR
+            subgraph TOP
+              direction TB
+              subgraph B1
+                direction RL
+                i1 -->f1
+              end
+            end
+          A --> TOP --> B
+          B1 --> B2
+        </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+          flowchart LR
+            subgraph TOP
+              direction TB
+              subgraph B1
+                direction RL
+                i1 -->f1
+              end
+            end
+          A --> TOP --> B
+          B1 --> B2
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+          flowchart LR
+          subgraph TOP
+            direction TB
+            subgraph B1
+              direction RL
+              i1 -->f1
+            end
+          end
+        A --> TOP --> B
+        B1 --> B2
+        </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+          flowchart LR
+          subgraph TOP
+            direction TB
+            subgraph B1
+              direction RL
+              i1 -->f1
+            end
+          end
+        A --> TOP --> B
+        B1 --> B2
+        </pre>
+      </td>
+    </tr>
+
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+    <!-- New row -->
+    <tr>
+      <th class="vertical-header">Additional Content</th>
+      <td>New content 1</td>
+      <td>New content 2</td>
+      <td>New content 3</td>
+      <td>New content 4</td>
+    </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->

From d6e8419360702fce4ac5c7a302dea79b60bd6738 Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Wed, 19 Jun 2024 09:49:04 +0200
Subject: [PATCH 2/3] MC-1765: Removed curvature from inner rect composite

---
 cypress/platform/neo-test.html | 350 ++++++++++++++++++---------------
 docs/neo-style-to-do           |   7 +-
 packages/mermaid/src/styles.ts |   3 -
 3 files changed, 194 insertions(+), 166 deletions(-)

diff --git a/cypress/platform/neo-test.html b/cypress/platform/neo-test.html
index 5c7acd1d0..4d5794e43 100644
--- a/cypress/platform/neo-test.html
+++ b/cypress/platform/neo-test.html
@@ -111,51 +111,48 @@
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-      </pre>
+          %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+          </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-      </pre>
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+          stateDiagram-v2
+            stateId
+        </pre>
       </td>
     </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -166,55 +163,55 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-
-    state "description text" as s2
-  </pre>
+              state "description text" as s2
+            </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s2
-      </pre>
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s2
+        </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s2
-      </pre>
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s2
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s3
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s3
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s3
-      </pre>
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s3
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s4
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s4
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    state "This is a state description" as s4
-      </pre>
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              state "This is a state description" as s4
+        </pre>
       </td>
     </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -225,59 +222,55 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-
-    s2 :  description text
-  </pre>
+              s2 :  description text
+            </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
           %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s21 : This is a state description
-      </pre>
+            stateDiagram-v2
+              s21 : This is a state description
+        </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
           %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s21 : This is a state description
-      </pre>
+            stateDiagram-v2
+              s21 : This is a state description
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s22 : This is a state description
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s22 : This is a state description
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s22 : This is a state description
-
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s22 : This is a state description
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s23 : This is a state description
-
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s23 : This is a state description
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s23 : This is a state description
-
-      </pre>
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s23 : This is a state description
+        </pre>
       </td>
     </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -290,69 +283,55 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-
-    s1 --> s2
-
-  </pre>
+              s1 --> s2
+            </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-    stateDiagram-v2
-    s31 --> s32
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s31 --> s32
+        </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-    stateDiagram-v2
-    s31 --> s32
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s31 --> s32
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-
-   stateDiagram-v2
-    s41 --> s42
-
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s41 --> s42
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-
-     stateDiagram-v2
-      s51 --> s52
-
-
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s51 --> s52
         </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s61 --> s62
-
-
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s61 --> s62
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    s61 --> s62
-
-
-      </pre>
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              s61 --> s62
+        </pre>
       </td>
-
     </tr>
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -366,65 +345,51 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-
-    s1 --> s2: A transition
-
-  </pre>
+              s1 --> s2: A transition
+            </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-    stateDiagram-v2
-    a1 --> a2: A transition
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a1 --> a2: A transition
+        </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
-    stateDiagram-v2
-    a1 --> a2: A transition
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a1 --> a2: A transition
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
-
-   stateDiagram-v2
-    a3 --> a4: A transition
-
-
-      </pre>
+          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a3 --> a4: A transition
+        </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
-
-   stateDiagram-v2
-    a5 --> a6: A transition
-
-
+          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a5 --> a6: A transition
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    a7 --> a8: A transition
-
-
-      </pre>
+          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a7 --> a8: A transition
+        </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
-stateDiagram-v2
-    a7 --> a8: A transition
-
-
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+            stateDiagram-v2
+              a7 --> a8: A transition
       </pre>
       </td>
     </tr>
@@ -1650,6 +1615,69 @@ direction LR
   <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
 </tr>
 
+<tr>
+  <th class="vertical-header">
+    <button class="collapsible">
+      Flow chart Node, rounded
+    </button>
+    <div class="content">
+      <div class="pre-scrollable">
+        <pre>
+          flowchart LR
+            rounded(rounded)
+        </pre>
+      </div>
+    </div>
+  </th>
+  <td>
+    <pre id="diagram1" class="mermaid">
+      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+    </pre>
+  </td>
+  <td>
+    <pre id="diagram1" class="mermaid">
+      %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram2" class="mermaid">
+      %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram2" class="mermaid">
+      %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram3" class="mermaid">
+      %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+  <td>
+    <pre id="diagram3" class="mermaid">
+      %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+      flowchart LR
+        rounded(rounded)
+  </pre>
+  </td>
+</tr>
+
+<!-- Separator row -->
+<tr class="separator">
+  <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+</tr>
+
 <tr>
   <th class="vertical-header">
     <button class="collapsible">
diff --git a/docs/neo-style-to-do b/docs/neo-style-to-do
index 2cf300a3e..c192ffc4d 100644
--- a/docs/neo-style-to-do
+++ b/docs/neo-style-to-do
@@ -8,5 +8,8 @@
 8. The font-size of node labels seems a bit off.
 9. When selecting look=neo and theme for composite stated, the height differs.
 10. Drop-shadows for non-rectangular shapes are not supported: Status: Fixed
-11. Gradient
-12. Rx,Ry of rects do not apply any longer
+11. Gradient: Fix proper color from blue to red. Do last (render.ts)
+12. Rx,Ry of rects in neo is not applied correct on rects except composite states
+
+13. Stop state shall be filled and just outer circle shall have
+14. No curve on line under title in composite states: Status fixed
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index e91b4815f..959bcba0d 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -99,10 +99,7 @@ const getStyles = (
   [data-look="neo"].statediagram-cluster rect {
     fill: ${options.compositeTitleBackground};
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    //stroke: none;
     stroke-width: 1px;
-    rx: 3;
-    ry: 3;
   }
 
   ${userStyles}

From 96c8e544ec30273de9ff3395db4cca781cc36623 Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Wed, 19 Jun 2024 11:52:28 +0200
Subject: [PATCH 3/3] MC-1765: Added specific end-state class

---
 docs/neo-style-to-do                          |  3 ++-
 packages/mermaid/src/diagrams/state/styles.js | 11 +++++++++--
 packages/mermaid/src/styles.ts                |  6 +-----
 packages/mermaid/src/themes/theme-neo.js      |  8 ++++----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/docs/neo-style-to-do b/docs/neo-style-to-do
index c192ffc4d..b7390d408 100644
--- a/docs/neo-style-to-do
+++ b/docs/neo-style-to-do
@@ -11,5 +11,6 @@
 11. Gradient: Fix proper color from blue to red. Do last (render.ts)
 12. Rx,Ry of rects in neo is not applied correct on rects except composite states
 
-13. Stop state shall be filled and just outer circle shall have
+13. Stop state shall be filled and no drop-shadow on inner circle: Status: Fixed
 14. No curve on line under title in composite states: Status fixed
+15. When this.useGradient = false the color of the composite states are not correct
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index a9b6cc088..fa21bbaae 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -103,12 +103,19 @@ g.stateGroup line {
 .node circle.state-end {
   fill:  ${options.stateBkg || options.mainBkg};
   stroke: ${options.background};
-  stroke-width: 1.5
+  stroke-width: 1.5;
 }
+
+[data-look="neo"].node circle.state-end {
+  filter: none;
+  stroke:${options.background};
+  fill: ${options.lineColor};
+}
+
 .end-state-inner {
   fill: ${options.compositeBackground || options.background};
   stroke: ${options.background};
-  stroke-width: 1.5
+  stroke-width: 1.5;
 }
 
 .node rect {
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 34a5d5b13..18e7fa1e5 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -81,27 +81,23 @@ const getStyles = (
   }
 
 
-  [data-look="neo"].node rect,  [data-look="neo"].node circle, [data-look="neo"].node polygon , [data-look="neo"].node path {
+  [data-look="neo"].node rect,  [data-look="neo"].node polygon , [data-look="neo"].node path {
     stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
     filter: ${options.dropShadow};
   }
 
   [data-look="neo"].node circle{
-    stroke: $(options.nodeBorder);
     stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
-
     filter: ${options.dropShadow};
   }
 
   [data-look="neo"].node circle .state-start{
     fill: #000000;
-
   }
 
   [data-look="neo"].statediagram-cluster rect {
     fill: ${options.compositeTitleBackground};
     stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
-    //stroke: none;
     stroke-width: 1px;
   }
 
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 0ea15c5bc..85f3e6253 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -28,11 +28,11 @@ class Theme {
     this.fontSize = '10px';
 
     // Neo-specific
-    this.nodeBorder = 'none';
-    this.stateBorder = 'none';
+    this.nodeBorder = '#000000';
+    this.stateBorder = '#000000';
     this.useGradient = true;
-    this.gradientStart = '#eb0042';
-    this.gradientStop = '#0042eb';
+    this.gradientStart = '#0042eb';
+    this.gradientStop = '#eb0042';
     this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
     this.tertiaryColor = '#ffffff';
   }