Flutter插件visma的介绍与使用详解

Flutter插件visma的介绍与使用详解

Flutter插件visma的简介

Visma 是一个用于可视化状态机的工具。该插件提供了一个名为 visma 的命令行工具，可以将使用 hisma 包创建的分层状态机渲染为交互式状态机图。它通过与 hisma 的监控器 hisma_visual_monitor 配合工作，并借助 pumli 包将这些更新渲染为交互式的网页。

Flutter插件visma的特性

状态机概览页面

状态机页面

事件触发

Visma 不仅可以监控状态机，还可以从其用户界面触发事件。

快速开始Flutter插件visma

有以下两种方法运行 Visma：

1. 使用 Docker 容器
2. 使用 dart pub global activate 安装命令行工具

无论选择哪种方式，当 Visma 运行时，您都可以通过浏览器访问其用户界面，默认地址为 http://127.0.0.1:4040（如果您使用默认端口配置）。

方法 1：使用 Docker 容器

这是最简单的启动方式：

$ docker run -it -p 127.0.0.1:4040:4040 tamasp/visma

这会从 Docker Hub 拉取并运行 Visma 的镜像（首次运行时）。该镜像包含 Visma 和所有依赖项（如 Java 和 Graphviz）。

更多关于镜像的信息，请查看 Visma Docker Hub 仓库。

有关 Docker 的更多信息，请访问 Docker 官方网站。

方法 2：手动安装

依赖项

在安装 Visma 之前，确保安装了 PlantUML 及其依赖项（如 Java 和 Graphviz）。PlantUML 的安装指南可参考 https://plantuml.com/starting。

重要提示：建议使用经过良好测试的 PlantUML V1.2022.1 版本，具体信息请参阅 pumli。

安装 Visma

如果已安装 PlantUML 和其依赖项，则可以通过以下命令安装 Visma：

$ dart pub global activate visma

使用

首先，了解 visma 命令行参数的用法：

$ visma -h

输出如下：

A visualization server for Hisma the hierarchical state machine.
Without parameters it will try running the 'plantuml -picoweb' command as the renderer for visma.

Usage: visma [--bind=BIND] [--port=PORT] [--plantuml_public] | [--plantuml_url=URL] | [--plantuml_jar=JAR --plantuml_bind=BIND --plantuml_port=PORT] [--help]

Options:
-p, --port               Port of the visma service listening on.
-b, --bind               Specify bind address of the visma service.
    --plantuml_public    The public PlantUML service will be used as renderer.
    --plantuml_url       PlantUML service at this URL will be used to render.
    --plantuml_port      Port of the PlantUML renderer service that will be started.
    --plantuml_jar       Specify PlantUML jar location.
    --plantuml_bind      Specify bind address of the local PlantUML service to be started.
-h, --help               Shows this help.

示例

示例 1：简单启动（默认参数）

$ visma
"plantuml -picoweb:4020:127.0.0.1":
webPort=4020

示例 2：指定 PlantUML Jar 文件路径

$ visma --plantuml_jar files/plantuml/plantuml.1.2022.1.jar

额外信息

如上所述，Visma 从 hisma_visual_monitor 获取状态机更新。请参阅 hisma_visual_monitor 文档以了解如何将其与您的状态机和 Visma 结合使用。

如果您有任何问题或评论，请前往 Hisma GitHub 讨论区 开始或加入讨论。

示例代码

以下是一个完整的示例，展示如何启动 Visma 并监控状态机。

启动 Visma

$ visma
"plantuml -picoweb:4020:127.0.0.1":
webPort=4020

启动示例应用程序进行监控

请参考以下代码，它启动一个简单的 hisma 状态机并使用 hisma_visual_monitor 监控它：

// hisma_visual_monitor_example.dart
import 'package:hisma/hisma.dart';
import 'package:hisma_visual_monitor/hisma_visual_monitor.dart';

void main() {
  // 创建一个简单的状态机
  final stateMachine = Hisma(
    initialState: 'idle',
    states: {
      'idle': {
        'start': 'working',
      },
      'working': {
        'stop': 'idle',
      },
    },
  );

  // 启动状态机监控器
  final monitor = HismaVisualMonitor(stateMachine);

  // 开始监控
  monitor.start();

  print('状态机已启动，访问 http://127.0.0.1:4040 查看状态机图');
}