Merge pull request #2056 from mermaid-js/2055_allowing_multiple_notes_for_one_state

#2055 Allowing multiple ids for one state in state diagrams

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -385,6 +385,19 @@ stateDiagram-v2
       }
     );
   });
+  it('v2 should handle multiple notes added to one state', () => {
+    imgSnapshotTest(
+      `
+stateDiagram-v2
+    MyState
+    note left of MyState : I am a leftie
+    note right of MyState : I am a rightie
+    `,
+      {
+        logLevel: 0, fontFamily: 'courier',
+      }
+    );
+  });
   it('v2 handle transition from one state in a composite state to a composite state', () => {
     imgSnapshotTest(
       `

cypress/platform/knsv.html

@@ -10,7 +10,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background:#333;
+        /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
         }
@@ -28,39 +28,12 @@
     <div class="flex">
 
 <div class="mermaid" style="width: 100%; height: 20%;">
-    %%{init:{
+stateDiagram
-"themeVariables": {
-    "transitionColor":"red",
-    "labelColor":"yellow",
-    "transitionLabelColor":"blue",
-    "stateBkg":"green",
-    "compositeBackground":"pink",
-    "altBackground":"purple",
-    "clusterTitleBackground":"blue",
-    "stateBorder":"red",
-    "noteBorderColor":"#522",
-    "noteBkgColor":"#522",
-    "noteTextColor":"white"
-}}}%%
-    %%{int:{
-"themeVariables": {
-    "altBackground":"purple"
-}}}%%
-stateDiagram-v2
-  state CompositeState {
-    state AnotherCompositeState {
-      AnotherState --> YetANotherState:a label
-    }
-    --
     MyState
-  }
+    note left of MyState : I am a leftie
-  note left of CompositeState
+    note right of MyState : I am a rightie
-    Important information! You can write
-    notes.
-  end note
-
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid2" style="width: 100%; height: 20%;">
     %%{int:{
 "themeVariables": {
     "transitionColor":"red",
@@ -80,7 +53,7 @@ stateDiagram
 }
 
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid2" style="width: 100%; height: 20%;">
 sequenceDiagram
     Alice->>+John: Hello John, how are you?
     Alice->>+John: John, can you hear me?
@@ -94,7 +67,7 @@ sequenceDiagram
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'neutral',
+        theme: 'default',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
@@ -108,7 +81,7 @@ sequenceDiagram
         state:{
           nodeSpacing: 50,
           rankSpacing: 50,
-          // defaultRenderer: 'dagre-wrapper',
+          defaultRenderer: 'dagre-wrapper',
         },
 
         fontSize: 18,

src/diagrams/state/stateRenderer-v2.js

@@ -117,7 +117,7 @@ const setupNode = (g, parent, node, altFlag) => {
         labelText: node.note.text,
         classes: 'statediagram-note', //classStr,
         style: '', //styles.style,
-        id: node.id + '----note',
+        id: node.id + '----note-' + cnt,
         domId: 'state-' + node.id + '----note-' + cnt,
         type: nodeDb[node.id].type,
         padding: 15 //getConfig().flowchart.padding