AsyncMachine Inspector
Inspector and a debugger for AsyncMachine.
Features
- shows a graph of AsyncMachines with their states and relations
- rendered with JointJS (drag-drop, drag-scroll, zooming)
- automatically layout the graph (dagre in a worker, diff repaints)
- supports multiple machines and pipes between them
- live updates
- log view
- machines view
- transitions view
- minimap
- scrolling through the history
- step by state changes, transitions or everything
- highlight transition-related elements
- highlighting and scrolling to states
- preserve the UI settings to localstorage
- export / import of snapshots to json
- remote logger support via socket.io
- automatic colors
- keyboard navigation
- legend
- workerpool for logger diffs
- still work in progress
Live demo
Install
# UI npm install -g asyncmachine-inspector# Logger module npm install ami-logger# Server component # (connects the logger directly to the UI) npm install -g ami-server
Example
// main logger class// mixin to save files using the fs module// example machine// construct the logger class// instantiate the loggerlogger.start// make changesexample.add'Dry'example.add'Water'// save a snapshotlogger.saveFile'./snapshot.json'
Usage
Using snapshots
- Generate a snapshot using one of the following mixins
ami-logger/mixins/file-fs
(node)ami-logger/mixins/file-http
(browser)
$ am-inspector
- Load the snapshot using the toolbar
Using the server
$ ami-server
- Use one of the following mixins
ami-logger/mixins/remote-node
ami-logger/mixins/remote-browser
$ am-inspector -s
Browser bundles
import { Logger, Network } from 'ami-logger/browser
import { Logger, Network } from 'ami-logger/browser-remote
- Both are bundled UMD modules, so the following will also work
<script src='ami-logger/browser.js'><script>