From d70ffe93bbfed4e0f95353f80b7cd81bdbb62cf1 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Thu, 13 Jun 2024 13:44:34 +0200 Subject: [PATCH 01/12] MCC-1765: Added styling of neo class and removed override in drawRect --- .../src/rendering-util/rendering-elements/shapes/drawRect.ts | 5 +---- packages/mermaid/src/styles.ts | 4 ++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index 783fe6a53..0f98f4d19 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts @@ -48,10 +48,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt } else { rect = shapeSvg.insert('rect', ':first-child'); - let rectClass = 'basic label-container'; - if (node.look === 'neo') { - rectClass += ' state-shadow-neo'; - } + const rectClass = 'basic label-container'; rect .attr('class', rectClass) diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts index 8cc5767b6..b8cbeb652 100644 --- a/packages/mermaid/src/styles.ts +++ b/packages/mermaid/src/styles.ts @@ -74,8 +74,8 @@ const getStyles = ( } [data-look="neo"].node rect { - stroke: ${options.nodeBorder}; - stroke: red !important + stroke: none; + filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) ); } ${userStyles} `; From 04159a842721ec5aa5dac353b67d0230acd4867f Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Fri, 14 Jun 2024 11:36:34 +0200 Subject: [PATCH 02/12] MC-1765: Removed hard-coded setting of look in render-utils --- cypress/platform/per.html | 2 +- packages/mermaid/src/config.type.ts | 2 +- .../mermaid/src/diagrams/state/stateRenderer-v3-unified.ts | 6 +++++- .../rendering-util/rendering-elements/shapes/drawRect.ts | 1 - .../rendering-util/rendering-elements/shapes/roundedRect.ts | 1 - .../src/rendering-util/rendering-elements/shapes/state.ts | 2 -- packages/mermaid/src/schemas/config.schema.yaml | 1 + 7 files changed, 8 insertions(+), 7 deletions(-) diff --git a/cypress/platform/per.html b/cypress/platform/per.html index a6d3397c3..b2484e848 100644 --- a/cypress/platform/per.html +++ b/cypress/platform/per.html @@ -91,7 +91,7 @@ stateDiagram-v2 
       stateDiagram
-       StateID
+       StateA
 
 
 
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index afe636144..0da68187a 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -68,7 +68,7 @@ export interface MermaidConfig {
    * Defines which main look to use for the diagram.
    *
    */
-  look?: 'classic' | 'handdrawn';
+  look?: 'classic' | 'handdrawn' | 'neo';
   /**
    * Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
    *
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
index 8d3421ed0..df4695f88 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -7,6 +7,7 @@ import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js
 import type { LayoutData } from '../../rendering-util/types.js';
 import utils from '../../utils.js';
 import { CSS_DIAGRAM, DEFAULT_NESTED_DOC_DIR } from './stateCommon.js';
+import { lookUpDomId } from '../flowchart/flowDb';
 
 /**
  * Get the direction from the statement items.
@@ -83,11 +84,14 @@ export const draw = async function (
   const config = getConfig();
   if (config.look === 'neo') {
     data4Layout.markers = ['barbNeo'];
+    data4Layout.nodes.forEach((node) => {
+      node.look = 'neo';
+    });
   } else {
     data4Layout.markers = ['barb'];
   }
   data4Layout.diagramId = id;
-  // console.log('REF1:', data4Layout);
+  console.log('REF1:', data4Layout);
   await render(data4Layout, svg, element, positions);
   const padding = 8;
   utils.insertTitle(
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index 0f98f4d19..2e765d9fe 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -23,7 +23,6 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   const y = -totalHeight / 2;
 
   let rect;
-  node.look = look;
   let { rx, ry } = node;
   const { cssStyles } = node;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index d275f77cb..0704df05b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -4,7 +4,6 @@ import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const roundedRect = async (parent: SVGAElement, node: Node) => {
   const { look } = getConfig();
-  node.look = look;
   const options = {
     rx: node.look === 'neo' ? 3 : 5,
     ry: node.look === 'neo' ? 3 : 5,
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
index dbb080894..4cd505801 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
@@ -4,8 +4,6 @@ import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const state = async (parent: SVGAElement, node: Node) => {
   const { look } = getConfig();
-  node.look = look;
-
   const options = {
     rx: node.look === 'neo' ? 3 : 5,
     ry: node.look === 'neo' ? 3 : 5,
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 107a0e2ec..37d06cea4 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -78,6 +78,7 @@ properties:
     enum:
       - classic
       - handdrawn
+      - neo
     default: 'classic'
   handdrawnSeed:
     description: |

From bbb118547e3b931fe0a18460fd490f51490c8f0d Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Fri, 14 Jun 2024 11:40:58 +0200
Subject: [PATCH 03/12] Removed temp override of look

---
 .../mermaid/src/diagrams/state/stateRenderer-v3-unified.ts     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
index df4695f88..c5ec2d289 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -84,9 +84,6 @@ export const draw = async function (
   const config = getConfig();
   if (config.look === 'neo') {
     data4Layout.markers = ['barbNeo'];
-    data4Layout.nodes.forEach((node) => {
-      node.look = 'neo';
-    });
   } else {
     data4Layout.markers = ['barb'];
   }

From ccdaa6333e8f3c4006538e69c253d993d87ddb0b Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Fri, 14 Jun 2024 13:49:14 +0200
Subject: [PATCH 04/12] Renamed test file and added new file to check neo and
 themes

---
 ...tor-neo.html => state-refactor-looks.html} |    0
 .../platform/state-refactor-neo-themes.html   | 1295 +++++++++++++++++
 2 files changed, 1295 insertions(+)
 rename cypress/platform/{state-refactor-neo.html => state-refactor-looks.html} (100%)
 create mode 100644 cypress/platform/state-refactor-neo-themes.html

diff --git a/cypress/platform/state-refactor-neo.html b/cypress/platform/state-refactor-looks.html
similarity index 100%
rename from cypress/platform/state-refactor-neo.html
rename to cypress/platform/state-refactor-looks.html
diff --git a/cypress/platform/state-refactor-neo-themes.html b/cypress/platform/state-refactor-neo-themes.html
new file mode 100644
index 000000000..7a0bc225d
--- /dev/null
+++ b/cypress/platform/state-refactor-neo-themes.html
@@ -0,0 +1,1295 @@
+
+
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  
+
+
+
+  
+    
+      
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+      
+
+    
+    
+    
+      
+    
+    
+      
+      
+      
+      
+      
+    
+    
+    
+      
+    
+    
+      
+      
+      
+      
+      
+
+    
+    
+    
+      
+    
+    
+      
+      
+      
+      
+        
+
+
+    
+    
+    
+      
+    
+
+    
+    
+      
+      
+      
+      
+      
+
+    
+    
+    
+      
+    
+
+    
+    
+      
+      
+      
+      
+      
+
+    
+    
+    
+      
+    
+
+    
+    
+      
+      
+      
+      
+      
+
+    
+    
+    
+      
+    
+
+
+    
+    
+      
+      
+      
+      
+      
+    
+    
+    
+      
+    
+
+    
+      
+      
+      
+      
+        
+
+    
+    
+    
+      
+    
+
+
+    
+      
+      
+      
+        
+        
+
+    
+    
+    
+      
+    
+
+    
+      
+      
+      
+      
+      
+
+    
+    
+    
+      
+    
+
+    
+      
+      
+      
+      
+      
+    
+    
+    
+      
+    
+
+
+    
+      
+      
+      
+      
+      
+
+    
+
+
+    
+    
+      
+    
+
+    
+      
+      
+      
+      
+      
+
+    
+
+
+    
+    
+      
+    
+    
+    
+      
+      
+      
+      
+      
+    
+  
 neo-default-lightneo-default-darkneo-forest-lightneo-base-light

+        
+        

+          

+            
+      stateId
+  

+          

+      

+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+stateDiagram-v2
+    stateId
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+stateDiagram-v2
+    stateId
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+stateDiagram-v2
+    stateId
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+stateDiagram-v2
+    stateId
+
+      

+      
 

+        
+        

+          

+            
+
+    state "description text" as s2
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+stateDiagram-v2
+    state "This is a state description" as s2
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+stateDiagram-v2
+    state "This is a state description" as s3
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+stateDiagram-v2
+    state "This is a state description" as s3
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+stateDiagram-v2
+    state "This is a state description" as s4
+      

+      
 

+        
+        

+          

+            
+
+    s2 :  description text
+  

+          

+        

+      		
+        
+          %%{init: {"look": "neo", "theme": "neo"} }%%
+stateDiagram-v2
+    s21 : This is a state description
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+stateDiagram-v2
+    s22 : This is a state description
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+stateDiagram-v2
+    s22 : This is a state description
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+stateDiagram-v2
+    s23 : This is a state description
+
+      

+      
 

+        
+        

+          

+            
+
+    s1 --> s2
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+    stateDiagram-v2
+    s31 --> s32
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+
+   stateDiagram-v2
+    s41 --> s42
+
+
+      

+      		
+          
+%%{init: {"look": "neo", "theme": "forest"} }%%
+
+     stateDiagram-v2
+      s51 --> s52
+
+
+        

+        		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+stateDiagram-v2
+    s61 --> s62
+
+
+      

+      
 

+        
+        

+          

+            
+
+    s1 --> s2: A transition
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+    stateDiagram-v2
+    a1 --> a2: A transition
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+
+   stateDiagram-v2
+    a3 --> a4: A transition
+
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+
+   stateDiagram-v2
+    a5 --> a6: A transition
+
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+stateDiagram-v2
+    a7 --> a8: A transition
+
+
+      

+      
 

+        
+        

+          

+            
+
+      [*] --> test
+    test --> [*]
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+    stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+
+   stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+
+   stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+
+      

+      
 

+        
+        

+          

+            
+%%{init: {"look": "neo", "theme": "neo"} }%%
+      [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+  

+          

+        

+      		
+        
+
+    stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+
+   stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+
+   stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+
+      

+      
 

+        
+        

+          

+            
+
+
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+    stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+
+   stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+
+
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+
+   stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+
+   stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+      

+      
 

+        
+        

+          

+            
+    [*] --> B1
+    B1 --> B2
+    B1 --> B3
+
+    state B1 {
+        [*] --> B11
+        B11 --> [*]
+    }
+    state B2 {
+        [*] --> B22
+        B22 --> [*]
+    }
+    state B3 {
+        [*] --> B33
+        B33 --> [*]
+    }
+
+
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+    stateDiagram-v2
+    [*] --> B1
+    B1 --> B2
+    B1 --> B3
+
+    state B1 {
+        [*] --> B11
+        B11 --> [*]
+    }
+    state B2 {
+        [*] --> B22
+        B22 --> [*]
+    }
+    state B3 {
+        [*] --> B33
+        B33 --> [*]
+    }
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+
+   stateDiagram-v2
+   [*] --> B1
+    B1 --> B2
+    B1 --> B3
+
+    state B1 {
+        [*] --> B11
+        B11 --> [*]
+    }
+    state B2 {
+        [*] --> B22
+        B22 --> [*]
+    }
+    state B3 {
+        [*] --> B33
+        B33 --> [*]
+    }
+      

+      		
+          
+%%{init: {"look": "neo", "theme": "forest"} }%%
+
+     stateDiagram-v2
+     [*] --> B1
+      B1 --> B2
+      B1 --> B3
+
+      state B1 {
+          [*] --> B11
+          B11 --> [*]
+      }
+      state B2 {
+          [*] --> B22
+          B22 --> [*]
+      }
+      state B3 {
+          [*] --> B33
+          B33 --> [*]
+      }
+        

+        		
+
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+ stateDiagram-v2
+  [*] --> B1
+    B1 --> B2
+    B1 --> B3
+
+    state B1 {
+        [*] --> B11
+        B11 --> [*]
+    }
+    state B2 {
+        [*] --> B22
+        B22 --> [*]
+    }
+    state B3 {
+        [*] --> B33
+        B33 --> [*]
+    }
+
+      

+      
 

+        
+        

+          

+            
+    state if_state <<choice>>
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
+
+
+
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+    stateDiagram-v2
+    state if_state <>
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+
+   stateDiagram-v2
+   state if_state <>
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
+      

+      		
+          
+%%{init: {"look": "neo", "theme": "forest"} }%%
+
+     stateDiagram-v2
+     state if_state <>
+      [*] --> IsPositive
+      IsPositive --> if_state
+      if_state --> False: if n < 0
+      if_state --> True : if n >= 0
+        

+        		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+ stateDiagram-v2
+   state if_state <>
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
+      

+      
 

+        
+        

+          

+            
+    state fork_state <<fork>>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <<join>>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+
+
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+   stateDiagram-v2
+    state fork_state <>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+   stateDiagram-v2
+    state fork_state <>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+   stateDiagram-v2
+    state fork_state <>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+   stateDiagram-v2
+    state fork_state <>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+
+      

+      
 

+        
+        

+          

+            
+
+  TN1: The state with a note
+  note right of TN1
+      note text
+  end note
+  TN1 --> TN2
+  note left of TN2 : note text
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+   stateDiagram-v2
+     TN1: The state with a note
+        note right of TN1
+            Important information! You can write
+            notes.
+        end note
+        TN1 --> TN2
+        note left of TN2 : This is the note to the left.
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+   stateDiagram-v2
+     TN3: The state with a note
+        note right of TN3
+            Important information! You can write
+            notes.
+        end note
+        TN3 --> TN4
+        note left of TN4 : This is the note to the left.
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+   stateDiagram-v2
+     TN3: The state with a note
+        note right of TN3
+            Important information! You can write
+            notes.
+        end note
+        TN3 --> TN4
+        note left of TN4 : This is the note to the left.
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+   stateDiagram-v2
+     TN5: The state with a note
+        note right of TN5
+            Important information! You can write
+            notes.
+        end note
+        TN5 --> TN6
+        note left of TN6 : This is the note to the left.
+
+      

+      
 

+        
+        

+          

+            
+[*] --> Active
+
+state Active {
+    [*] --> NumLockOff
+    NumLockOff --> NumLockOn : EvNumLockPressed
+    NumLockOn --> NumLockOff : EvNumLockPressed
+    --
+    [*] --> CapsLockOff
+    CapsLockOff --> CapsLockOn : EvCapsLockPressed
+    CapsLockOn --> CapsLockOff : EvCapsLockPressed
+    --
+    [*] --> ScrollLockOff
+    ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+    ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+}
+
+
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+
+      

+      
 

+        
+        

+          

+            
+direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+  

+          

+        

+      		
+        
+%%{init: {"look": "neo", "theme": "neo"} }%%
+     stateDiagram-v2
+    direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "dark"} }%%
+     stateDiagram-v2
+   direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "forest"} }%%
+     stateDiagram-v2
+   direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      

+      		
+        
+%%{init: {"look": "neo", "theme": "base"} }%%
+     stateDiagram-v2
+    direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      

+      
 
Additional ContentNew content 1New content 2New content 3New content 4

+
+
+  
+
+
+

From 2f6d728123e392d1d52ee132da63ab4280cb8bb3 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Fri, 14 Jun 2024 14:45:24 +0200
Subject: [PATCH 05/12] Added attribute data-look to composite and nested
 states

---
 cypress/platform/per.html                     | 27 +++++++++----------
 .../platform/state-refactor-neo-themes.html   | 15 ++++++++---
 docs/neo-style-to-do                          | 11 +++++---
 .../rendering-elements/clusters.js            |  6 +++--
 packages/mermaid/src/styles.ts                |  7 +++++
 packages/mermaid/src/themes/theme-neo.js      |  3 +--
 6 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/cypress/platform/per.html b/cypress/platform/per.html
index b2484e848..e865b55e6 100644
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -90,24 +90,23 @@ stateDiagram-v2
     >
 
     
-      stateDiagram
-       StateA
-
+      stateDiagram-v2
+      [*] --> First
+      state First {
+          [*] --> second
+          second --> [*]
+      }
 
 
     

 
     
-      stateDiagram
-        direction LR
-        [*] --> A
-        A --> B
-        B --> C
-        state B {
-          direction LR
-          a --> b
-        }
-        B --> D
+      flowchart LR
+        A[Start] --Some text--> B(Continue)
+        B --> C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]