Skip to content
AFSM

Visualizing the Diagram

AFSM auto-generates a mermaid state diagram — no manual writing needed.

stateDiagram getter

const obj = new MyFSM()
console.log(obj.stateDiagram)

Returns an array of strings, each a line of mermaid stateDiagram-v2 syntax:

[*] --> connecting : connect
connecting --> connected : connect 🟢
connecting --> [*] : connect 🔴

Conventions

Each @ChangeState(from, to) generates three edges:

LineMeaning
from --> actioning : actionfrom start state into intermediate state
actioning --> to : action 🟢success transition
actioning --> from : action 🔴failure rollback
  • success marker
  • failure marker
  • action defaults to the method name, customizable via opt.action

Rendering

Concatenate stateDiagram into full mermaid source to render:

const source = ['stateDiagram-v2', ...obj.stateDiagram].join('\n')
// feed source to mermaid

In markdown you can preview directly with a code block:

stateDiagram-v2
    [*] --> connecting : connect
    connecting --> connected : connect 🟢
    connecting --> [*] : connect 🔴
    connected --> disconnecting : disconnect
    disconnecting --> disconnected : disconnect 🟢
    disconnecting --> connected : disconnect 🔴

from: [] special handling

from: [] (any state) generates edges from all known states into the intermediate, reflecting “force transition” semantics:

@ChangeState([], 'disconnected')
async disconnect() {}

Generates:

connected --> disconnecting : disconnect
disconnecting --> disconnected : disconnect 🟢
connected --> disconnected : disconnect 🟢
...

@ActionState is not in the diagram

Note: @ActionState does not register in stateDiagram — it’s a transient operation, not a formal node. If you want a state to appear, use @ChangeState.

Inheritance merging

Subclasses auto-merge the parent’s diagram. Accessing sub.stateDiagram recursively merges parent edges and all states. See Inheritance.

Live observation with DevTools

Static mermaid is great in docs; for runtime inspection, install the DevTools extension:

  1. Load unpacked from devtools/dist (Chrome / Edge developer mode)
  2. Open your page or this site’s Playground, press F12
  3. Switch to the AFSM tab for the instance tree, diagram, and timeline

With the DevTools extension, you can watch the live graph with current / processing highlights.

The Playground on this site uses the same Cytoscape visualization — try it live:

Next steps