100% FREE · NO SIGNUP · UNLIMITED

Free State Diagram Maker

Model what your system IS at any moment — states, transitions, guards, and events. BPMN tells you what it does; a state diagram tells you what it is.

State diagram · every result is a state diagram  ·  ⌘↵ to run

Free forever · no signup · no credit card · unlimited diagrams

Live sample · CI/CD pipeline — type above to make your own
CI/CD Pipeline — Flowchart Flowchart with 13 nodes and 15 edges. CI/CD Pipeline A → B B → C C → D D → E: no no E → A D → F: yes yes F → G G → H H → I: no no I → E H → J: yes yes J → K K → L: no no L → E K → M: yes yes CI Passes? CI Passes? Build Image Build Image Deploy Staging Deploy Staging Stage OK? Stage OK? Rollback Staging Rollback Staging Deploy Prod Deploy Prod Canary OK? Canary OK? Rollback Prod Rollback Prod Released Released Notify Author Notify Author Dev Push Dev Push Lint Lint Unit Tests Unit Tests

How to make a state diagram

  1. List the states your system can be in

    Start with a plain-English sentence: name the object (an order, a user session, a device) and list the states it passes through. Include any terminal states such as delivered or cancelled.

  2. Generate the state diagram

    Click Generate and FreeDiagram produces a UML state machine diagram with an initial pseudo-state, correctly shaped state boxes, and labeled transition arrows.

  3. Add guards and actions

    Refine with follow-up prompts — add a guard condition ('only if payment confirmed'), an entry action, or a composite state that nests sub-states.

  4. Export for docs or implementation

    Download as SVG or PNG for design documents, or copy the Mermaid source to paste directly into GitHub, Notion, or your wiki.

About state diagrams

Frequently asked questions

What is a state diagram used for?

State diagrams model the lifecycle of an object or system — every condition it can be in and every event that moves it between conditions. Common uses include e-commerce order status, user session management, UI component states, network protocols, and embedded device firmware.

What is the difference between a state diagram and a flowchart?

A flowchart models a process — a sequence of steps. A state diagram models an object — the set of conditions it can occupy. Flowcharts answer 'what happens next?'; state diagrams answer 'what is the system right now?' Use a state diagram when the same event can have different effects depending on the current state.

What is a guard condition in a state diagram?

A guard condition is a Boolean expression that must be true for a transition to fire. It is written in square brackets on the transition arrow — for example, 'paymentReceived [balance >= total]'. Guards let you model conditional transitions without adding extra states.

Can I model composite states with nested sub-states?

Yes. Describe the nesting in your prompt — for example, 'the Processing state contains Picking, Packing, and Labelling sub-states'. FreeDiagram will render a composite state with the sub-states inside and a shared transition out.

Does the output follow UML standards?

Yes. FreeDiagram uses UML State Machine notation — initial pseudo-state (filled circle), states (rounded rectangles), final state (bullseye), and labeled transition arrows. The output is compatible with documentation standards used in software architecture and systems design.

Other diagram types you can make

FreeDiagram supports 25+ types — all free, no signup.