Merge pull request #227 from statelyai/davidkpiano/update-docs-images-for-what-is-a-state-machine

Update images for "What is a state machine?" post

Author: davidkpiano

blog/2023-10-02-what-is-a-state-machine/flight-booking-state-machine.png

@@ -18,22 +18,13 @@ If you’ve worked with flowcharts or diagrammed a process on a whiteboard with
 
 A state machine is a way of modeling how something works, using states and transitions to show how something changes over time in response to events.
 
-![Two states of locked and unlocked. On the unlocked state you can transition to un-locked on a coin event or transition to locked on a push event. On the locked state you can transition to un-locked with a coin event or transition to locked with a push event.](turnstile-state-machine.svg)
+![A state machine for a music player. The state machine starts in the Paused state, and on play, goes to the Playing state. On pause, it goes back to the Paused state. In any state, you can skip to the next track.](music-player-state-machine-dark.png)
 
 Specifically, it formally models how a system transitions from one state to another based on specific events (e.g., triggers, signals, changes, etc.). Think of it as a useful tool for visualizing and designing the flow of user experiences, product features, or any process you’re working on.
 
 Visually, state machine diagrams are similar to flowcharts. Both use shapes to represent states (e.g., steps in a flow) and arrows to indicate transitions between those states. The main difference is that state machines are more precise, formal, and powerful than flowcharts. They’re also more flexible since you can use them to model any kind of logic, not just processes.
 
-<p>
-  <ThemedImage
-    alt="A booking state machine with an initial idle state. From idle you can transition to car booking, flight booking, and hotel booking states."
-    sources={{
-      light:
-        'https://prodstack-ogimagebuckete7b3c4ce-fcz4tpdpagli.s3.amazonaws.com/studio-ec345257-35c4-4fcc-bfbc-9a9255bc8d13-light.png',
-      dark: 'https://prodstack-ogimagebuckete7b3c4ce-fcz4tpdpagli.s3.amazonaws.com/studio-ec345257-35c4-4fcc-bfbc-9a9255bc8d13-dark.png',
-    }}
-  />
-</p>
+![A booking state machine with an initial idle state. From idle you can transition to car booking, flight booking, and hotel booking states.](flight-booking-state-machine.png)
 
 State machines are a concept deeply rooted in computer science; however, they have broad applications that extend to various business domains and design disciplines. From developing intuitive software interfaces to designing effective business processes, state machines provide a structured way to model and understand complex systems. Whether you’re a product owner, project manager, designer, developer, QA tester, business analyst, or any other role, understanding state machines can significantly improve your ability to design, manage, and refine features, processes, and products.
 
@@ -147,7 +138,7 @@ There are many key advantages of using state machines:
 
 With state machine diagrams, you can visually represent the states of a process, making it easier to grasp and communicate complex logic. These diagrams bridge the communication gap between technical and non-technical team members. They also provide a clear way to document and share app logic, which you could use for onboarding new team members. After all, following boxes and arrows (just like a flowchart) is much easier than parsing code, especially for someone unfamiliar with the codebase.
 
-![A mermaid diagram of our order state machine.](mermaid-diagram.svg)
+![A mermaid diagram of our order state machine.](mermaid-order-machine-dark.png)
 
 _Our [export to Mermaid feature](/docs/export-as-code#export-formats) enables you to embed your state machines in GitHub and GitLab pull requests and comments._
 
@@ -172,39 +163,49 @@ _Our [export to Stories feature](/docs/export-as-code#export-formats) enables yo
 #### orderMachine.Pending
 
 1. _Start_
+
    → **State** `orderMachine.Pending`
 
 #### orderMachine.Shipped
 
 1. _Start_
+
    → **State** `orderMachine.Pending`
 
 2. **Event** `item shipped`
+
    → **State** `orderMachine.Shipped`
 
 #### orderMachine.Delivered
 
 1. _Start_
+
    → **State** `orderMachine.Pending`
 
 2. **Event** `item shipped`
+
    → **State** `orderMachine.Shipped`
 
 3. **Event** `item delivered`
+
    → **State** `orderMachine.Delivered`
 
 #### orderMachine.Returned
 
 1. _Start_
+
    → **State** `orderMachine.Pending`
 
 2. **Event** `item shipped`
+
    → **State** `orderMachine.Shipped`
 
 3. **Event** `item delivered`
+
    → **State** `orderMachine.Delivered`
 
 4. **Event** `item returned`
+
    → **State** `orderMachine.Returned`
 
 :::