working in support for notes

this code need to be refactor

Author: igorwessel

playground/testcases/state.ts

@@ -174,6 +174,59 @@ export const STATE_DIAGRAM_TESTCASES = [
     }
     `,
   },
+
+  {
+    name: "Notes",
+    definition: `stateDiagram-v2
+    State1: The state with a note
+    note right of State1
+        Important information! You can write
+        notes.
+    end note
+    State1 --> State2
+    note left of State2 : This is the note to the left.
+    `,
+  },
+  {
+    name: "Note left and right in same state",
+    definition: `stateDiagram-v2
+    State1: The state with a note
+    note right of State1
+        Important information! You can write
+        notes.
+    end note
+    note left of State1 : This is the note to the left.
+    `,
+  },
+  {
+    name: "Multiple notes in the same state",
+    definition: `stateDiagram-v2
+    State1: The state with a note
+    note right of State1
+        Important information! You can write
+        notes.
+    end note
+    note left of State1 : Left.
+    note left of State1 : Join.
+    note left of State1 : Out.
+    note right of State1 : Ok!.
+    `,
+  },
+  {
+    name: "Notes inside a composite state",
+    definition: `stateDiagram-v2
+    [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+
+        note right of second
+        First is a composite state
+        end note
+  
+    }
+    `,
+  },
   {
     name: "Sample 1",
     definition: `stateDiagram-v2

src/converter/types/state.ts

@@ -23,9 +23,11 @@ export const StateToExcalidrawSkeletonConvertor = new GraphConverter({
         case "rectangle":
           const element = transformToExcalidrawContainerSkeleton(node);
 
-          Object.assign(element, {
-            roundness: { type: 3 },
-          });
+          if (!element.id?.includes("note")) {
+            Object.assign(element, {
+              roundness: { type: 3 },
+            });
+          }
 
           elements.push(element);
           break;
@@ -43,6 +45,10 @@ export const StateToExcalidrawSkeletonConvertor = new GraphConverter({
     });
 
     chart.edges.forEach((edge) => {
+      if (!edge) {
+        return;
+      }
+
       const points = edge.reflectionPoints.map((point: Point) => [
         point.x - edge.reflectionPoints[0].x,
         point.y - edge.reflectionPoints[0].y,
@@ -61,6 +67,11 @@ export const StateToExcalidrawSkeletonConvertor = new GraphConverter({
         return;
       }
 
+      if (endVertex.id?.includes("note") || startVertex.id?.includes("note")) {
+        arrow.endArrowhead = null;
+        arrow.strokeStyle = "dashed";
+      }
+
       arrow.start = {
         id: startVertex.id,
         type: "rectangle",