Skip to main content

State Machine

A drag-and-drop visual editor for state diagrams, available at embedhub.com/tools/StateMachine. Useful for designing firmware control flows, protocol handshakes, or any event-driven system you want a picture of.

What it does​

  • Add states (initial, normal, final) and connect them with event-labelled transitions on a canvas.
  • Live-renders an SVG of the diagram as you edit.
  • Saves the diagram to the selected project so the project page picks it up automatically.

Where it lives​

When you save a state machine, two paired files land in the project:

state-machines/
  state-machine-1736123456789.svg     # the diagram (shown on the project page)
  state-machine-1736123456789.yaml    # the structured data (for tooling)

The YAML omits visual positions — it's just the logical states, events, transitions, and the initial state — so other tools (CI, agents, codegen) can consume it without parsing SVG.

Project page​

The project page automatically displays the latest SVG from state-machines/. Older diagrams are kept; the most recent one wins.