MermaidJS to Superstate

[tomByrer]

FYI I might make another target to translate Mermaid JS to Superstate.

I'm already 1/2 way there; since I knew there would be multiple types of sources & targets for statecharts, I made an intervening output (sort of simple AST), so the only step is to go from that Object notation to Superstate. EG: source:

stateDiagram-v2
id mermaidJS state diagram
%% inspiration: https://mermaid.js.org/syntax/stateDiagram.html
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still : STOP %% named transition / event
Moving --> Crash
Crash --> [*]

to OSM:

{
  "final": [
    "Still",
    "Crash",
  ],
  "id": "mermaidJS state diagram",
  "initial": "Still",
  "isConcurrent": false,
  "states": {
    "Crash": {
      "Crash--FINIS": "FINIS",
    },
    "FINIS": "final",
    "Moving": {
      "Moving--Crash": "Crash",
      "STOP": "Still",
    },
    "Still": {
      "Still--FINIS": "FINIS",
      "Still--Moving": "Moving",
    },
  },
}

Which in tern is used to make a XState machine

import { createMachine } from "xstate";

export const machinemermaidJSstatediagram = createMachine({
	id: "mermaidJS state diagram",
	initial: "Still",
	states: {
		Still: {
			on: {
				"Still--Moving": {
					target: "Moving"
				},
				"Still--FINIS": {
					target: "FINIS"
				}
			}
		},
		Moving: {
			on: {
				STOP: {
					target: "Still"
				},
				"Moving--Crash": {
					target: "Crash"
				}
			}
		},
		Crash: {
			on: {
				"Crash--FINIS": {
					target: "FINIS"
				}
			}
		},
		FINIS: {
			type: "final"
		}
	}
},);