Visualise xState with plantUML

visualise.js

import { Machine } from "xstate";
import visualize from "xstate-plantuml";
import plantumlEncoder from "plantuml-encoder";

const promiseMachine = Machine({
  id: "promise",
  initial: "pending",
  states: {
    pending: {
      on: {
        START: "in_progress",
      },
    },
    in_progress: {
      on: {
        SUBMIT: "under_review",
      },
    },
    under_review: {
      on: {
        ACCEPT: "accepted",
        REJECT: "rejected",
      },
    },
    accepted: {
      type: "final",
    },
    rejected: {
      type: "final",
    },
  },
});

const plantUML = visualize(promiseMachine);

<img src={`http://www.plantuml.com/plantuml/img/${plantumlEncoder.encode(plantUML)}`} />