[@xstate/graph] Add toGraph()

[davidkpiano]

This PR introduces a helper function that converts machines to a directed graph structure, making it easy to use with graph-related algorithms, such as GraphViz and ELK.

import { toDirectedGraph } from '@xstate/graph';

const machine = createMachine({/* ... */});

const digraph = toDirectedGraph(machine);

// returns an object with this structure:
{
  id: '...',
  stateNode: /* StateNode */,
  children: [
    { id: '...', children: [/* ... */], edges: [/* ... */] },
    { id: '...', /* ... */ },
    // ...
  ],
  edges: [
    { source: /* ... */, target: /* ... */, transition: /* ... */ }
    // ...
  ]
}

See the snapshot for more details.

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 142f54e

We got this.

This PR includes changesets to release 1 package

Name	Type
@xstate/graph	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 142f54e:

Sandbox	Source
XState Example Template	Configuration
XState React Template	Configuration

[Andarist]

What's the exact purpose of @xstate/graph? Seems like such an algorithm (getChildren) would, maybe, be a good candidate to be included here?

[davidkpiano]

Good call - the purpose of @xstate/graph is for graph-related utilities and helper functions, such as traversal, etc.

A good example of this is Cytoscape.

[Andarist]

What not to like about this one? 😉 Great job!

Just please add an appropriate changeset so this will get added to the next release.