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

machine.js

const machine = Machine({
  id: 'stepMachine',
  initial: 'step1',
  on: {
    // Accepted in step1, step2 or step3
    FINISH_MACHINE: 'step3'
  },
  states: {
    step1: {
      initial: 'a',
      on: {
        // Accepted in state step1.a, step1.b, or step1.c
        // Targets state c relative to a
        RELATIVE_JUMP: '.c'
      },
      states: {
        a: {
          on: {
            // Accepted in state step1.a
            NEXT: 'b'
          }
        },
        b: {
          invoke: {
            src: 'someService',
            // Built in events
            onDone: 'c',
            // Target a node's (default) id
            onError: '#stepMachine.error'
          }
        },
        c: {
          on: {
            // Accepted in state step1.c
            // Target a node's custom id
            ABSOLUTE_JUMP: '#customId'
          }
        }
      }
    },
    step2: {
      id: 'customId',
      type: 'parallel',
      on: {
        // Accepted in state step2
        // Targets multiple
        FINISH_LEFT: {target: ['.left.c']},
        FINISH_RIGHT: {target: ['.right.c']},
        FINISH_BOTH: {target: ['.left.c', '.right.c']}
      },
      states: {
        left: {
          initial: 'a',
          states: {
            a: {on: {NEXT_LEFT: 'b'}},
            b: {on: {NEXT_LEFT: 'c'}},
            c: {type: 'final'}
          }
        },
        right: {
          initial: 'a',
          states: {
            a: {on: {NEXT_RIGHT: 'b'}},
            b: {on: {NEXT_RIGHT: 'c'}},
            c: {type: 'final'}
          }
        }
      },
      onDone: 'step3'
    },
    step3: {type: 'final'},
    error: {}
  }
});