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] 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