hisma_visual_monitor 0.3.1+2 copy "hisma_visual_monitor: ^0.3.1+2" to clipboard
hisma_visual_monitor: ^0.3.1+2 copied to clipboard

Visual monitor for Hisma, a hierarchical state machine implementation.

Visual monitor for Hisma, a hierarchical state machine implementation.

Hisma defines a monitoring API: One can register monitor creator functions and the monitors created by these will be invoked by Hisma when the state machines are created or their active state changes.

This monitor is a visual monitor implementation for hisma. It transforms and then sends state machine information to its counterpart, the visma application. visma in turn renders these state machines to its interactive web user interface.

Features #

See hisma_visual_monitor in action using visma and an actual Flutter (example) application side-by-side. Note that left side rendered state machine diagrams are updated regardless the event triggering the state machine change was initiated from the application or from the visma user interface:


Getting started #

Create your hisma state machines that you want to monitor.

Usage #

Practically right at the beginning of your program in the main function set visual monitor creator for the [StateMachine]:

StateMachine.monitorCreators = [
  (machine) => VisualMonitor(machine),

This [VisualMonitor] will connect to visma listening at the localhost on its default port (4020).

[!IMPORTANT] When using VisualMonitor in a MacOS desktop application you need to add com.apple.security.network.client to your macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements files of your project to allow connectivity to visma:


You can also connect to a visma instance listening on a different port or even at a remote host:

StateMachine.monitorCreators = [
    (machine) => VisualMonitor(
          host: '',
          port: 1111,

Furthermore as visma state machine overview page will organize machines into hierarchy not only based in their position in the state machine hierarchy, but also the [hostname] and [domain] of their [VisualMonitor], it is possible to set these to something else (any string) than their default values (and those are "localhost" and "domain" respectively):

VisualMonitor.hostname = 'testMachine1';
VisualMonitor.domain = 'groupA';

This allows organizing your state machines into two hierarchy levels at the top. In this image we see the visma overview page showing that those state machines visualized are coming from three sources ("testMachine1", "testMachine2" and "host") and they are further organized into domains ("groupA", "groupB" and "domain"):


Additional information #

If you have any questions, comments please go to Hisma GitHub Discussions to start or join discussions.

pub points


unverified uploader

Visual monitor for Hisma, a hierarchical state machine implementation.

Repository (GitHub)
View/report issues


API reference




hisma, logging, web_socket_channel


Packages that depend on hisma_visual_monitor