test

test.md

stateDiagram-v2
  state "form input
      entry: a, b" as form%20input
  state form%20input {
    state "active
      entry: enableInput
      exit: blah blah" as machine.active
    state "disabled
      entry: disableInput
      exit: blah blah" as machine.disabled
    [*] --> machine.active
    state machine.active {
      state "focus
        entry: anonymous" as machine.active.focus
      state "validation" as machine.active.validation
      state machine.active.focus {
        state "unfocused" as machine.active.focus.unfocused
        state "focused" as machine.active.focus.focused
        [*] --> machine.active.focus.unfocused
        machine.active.focus.unfocused
        
        machine.active.focus.focused
        machine.active.focus.unfocused --> machine.active.focus.focused: FOCUS
        machine.active.focus.focused --> machine.active.focus.unfocused: BLUR
      }
      --
      state machine.active.validation {
        state "pending" as machine.active.validation.pending
        state "valid" as machine.active.validation.valid
        state "invalid" as machine.active.validation.invalid
        [*] --> machine.active.validation.pending
        machine.active.validation.pending
        
        machine.active.validation.valid
        
        machine.active.validation.invalid
        
        machine.active.validation.valid --> machine.active.validation.pending: VALIDATE
        machine.active.validation.invalid --> machine.active.validation.pending: VALIDATE
      }
    }
    
    machine.disabled
    machine.active --> machine.disabled: DISABLE_INPUT
    machine.disabled --> machine.active: ENABLED_INPUT
  }