The order of guarded transitions is misleading

[florianLepretre]

The order of the guards as implemented in the code is not understandable in the state chart, when using multiple guards in guarded transitions.

For example, this code:

states: {
    foo: {
      on: {
        BAR: [
          { target: "one", cond: "isFirst" },
          { target: "two", cond: "isSecond" },
          { target: "three" },
        ],
      },
    },
    ...

... produces the following state chart, which gives the misleading impression that guards will be executed in a weird order:

Full code: https://stately.ai/viz/a31ea271-a4b5-4153-b660-4e59d2bd11e1.