From 8d9cb09261856430631935c33d0655ba14eeb739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Celil=20Bu=C4=9Fra=20Karacan?=
 <49951195+cbugk@users.noreply.github.com>
Date: Fri, 19 Apr 2024 16:39:03 +0300
Subject: [PATCH 1/3] Update stateDiagram.md

Add renamed composite as an example of composites with spaced names.
---
 packages/mermaid/src/docs/syntax/stateDiagram.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index d2b7282e4..a5eff29bf 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -107,6 +107,14 @@ stateDiagram-v2
         [*] --> second
         second --> [*]
     }
+
+    [*] --> NamedComposite
+    NamedComposite: Another Composite
+    state NamedComposite {
+        [*] --> namedSimple
+        namedSimple --> [*]
+        namedSimple: Another simple
+    }
 ```
 
 You can do this in several layers:

From 718811be9c450b73d1a693b1ef1b80d2af77ec30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Celil=20Bu=C4=9Fra=20Karacan?=
 <49951195+cbugk@users.noreply.github.com>
Date: Fri, 19 Apr 2024 16:40:34 +0300
Subject: [PATCH 2/3] Update stateDiagram.md

Add explanation for naming a composite state
---
 packages/mermaid/src/docs/syntax/stateDiagram.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index a5eff29bf..a78cb16d1 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -98,7 +98,7 @@ In a real world use of state diagrams you often end up with diagrams that are mu
 have several internal states. These are called composite states in this terminology.
 
 In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
-state between \{\}. See the example below:
+state between \{\}. You can name a composite state on a seperate line just like a simple state. See the example below:
 
 ```mermaid-example
 stateDiagram-v2

From e49c95c220625c6774ad9ca55e7029002b5ecfc2 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 26 Apr 2024 23:16:11 +0530
Subject: [PATCH 3/3] chore: Fix typo

---
 docs/syntax/stateDiagram.md                    | 18 +++++++++++++++++-
 .../mermaid/src/docs/syntax/stateDiagram.md    |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md
index 7c40a5d2f..a6b06a4b7 100644
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -160,7 +160,7 @@ In a real world use of state diagrams you often end up with diagrams that are mu
 have several internal states. These are called composite states in this terminology.
 
 In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
-state between {}. See the example below:
+state between {}. You can name a composite state on a separate line just like a simple state. See the example below:
 
 ```mermaid-example
 stateDiagram-v2
@@ -169,6 +169,14 @@ stateDiagram-v2
         [*] --> second
         second --> [*]
     }
+
+    [*] --> NamedComposite
+    NamedComposite: Another Composite
+    state NamedComposite {
+        [*] --> namedSimple
+        namedSimple --> [*]
+        namedSimple: Another simple
+    }
 ```
 
 ```mermaid
@@ -178,6 +186,14 @@ stateDiagram-v2
         [*] --> second
         second --> [*]
     }
+
+    [*] --> NamedComposite
+    NamedComposite: Another Composite
+    state NamedComposite {
+        [*] --> namedSimple
+        namedSimple --> [*]
+        namedSimple: Another simple
+    }
 ```
 
 You can do this in several layers:
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index a78cb16d1..a287d4168 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -98,7 +98,7 @@ In a real world use of state diagrams you often end up with diagrams that are mu
 have several internal states. These are called composite states in this terminology.
 
 In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
-state between \{\}. You can name a composite state on a seperate line just like a simple state. See the example below:
+state between \{\}. You can name a composite state on a separate line just like a simple state. See the example below:
 
 ```mermaid-example
 stateDiagram-v2