GGlyph

Docs · Engines

State machine (FSM)

Native finite state machines — cleaner than Mermaid's stateDiagram for serious modelling. Declare states (with optional `final` marker), an `initial` state (rendered with a lead-in dot), and transitions with `on` events, `[guards]`, and `/ actions`. Self-loops render as curved arrows above the state; final states get the canonical double-ring symbol.

Templates
14
Source language
plaintext
Workstation
Studio
Engine id
statemachine
Open in Studio

In the same space

Most users come to State machine (FSM) from XState visualizer or UML state diagram tools. Glyph runs this engine in the browser — no install, shareable via URL, exportable to PNG / SVG / PDF / source.

Syntax at a glance

state Idle
state Paid final
initial Idle
transition Idle -> Paid on "pay"

Paste this in the Studio code pane to see State machine (FSM) render live. The full grammar is at the upstream-docs link above.

Sample templates

All 14 →
uml
State machine — order lifecycle

Standard ecommerce order state diagram.

uml
State machine — TCP connection

Simplified TCP connection state machine.

uml
State machine — traffic light

Three-phase traffic-light state cycle.

uml
State machine — auth session

Session auth state machine.

uml
State machine — document publishing

Editorial doc state machine.

uml
Traffic Light (State Machine)

The cyclic states of a traffic light.

Engine reference: statemachine · ← Browse all engines · Quick-start guide