Generated by XState Viz: https://xstate.js.org/viz

machine.js

// source: https://egghead.io/lessons/xstate-simplify-state-explosion-in-xstate-through-hierarchical-states
const door = Machine({
  id: 'door',
  initial: 'locked',
  states: {
    locked: {
      id: 'locked',
      on: {
        UNLOCK: 'unlocked'
      }
    },
    unlocked: {
      initial: 'closed',
      states: {
        closed: {
          on: {
            OPEN: 'opened'
          }
        },
        opened: {
          on: {
            LOCK: '#locked',
            CLOSE: 'closed'
          }
        }
      }
    }
  }
});