# 可视化工具

XState Visualizer (opens new window) 是一种通过可视化你的应用状态的方式，用于创建和检查状态图的工具。

作为一种可视化工具，Visualizer 可帮助开发人员了解他们的应用程序逻辑，并使其易于与设计人员、项目经理和团队其他成员共享。

编写你的应用程序逻辑，并立即将其可视化。
保存你的状态图到 Stately Registry 并与任何人分享。
分享你的状态图，可以嵌入到你的团队文档中使用，并能保证实时更新状态图。

Visualizer 已经有许多功能可以帮助你，使代码做得更多。

# 编写和可视化你的代码

立即编写和可视化你的代码

使用 Code 选项卡中的代码编辑器编写状态机代码。
按 Visualize 可视化你的状态机。

# 分享你的状态机

你可以通过多种方式与团队和网络共享你的状态机。

共享菜单包含四个选项：

Copy link。复制状态机的 Visualizer 链接。
Twitter。写一条带有状态机链接的 Twitter。
Copy Image URL。复制状态机快照图像的链接。
Embed。创建一个包含状态机可嵌入 iframe。

# Twitter 链接

共享菜单中的 Twitter 链接选项会撰写一条推文，其中包含指向状态机 Visualizer 的链接。

Composed tweet with the text “Check out the state machine I built in the @statelyai visualizer”, and a link to the machine.

# 实时更新快照图像

共享菜单中的 Copy Image URL 选项将状态机图像的链接复制到剪贴板。该图像是状态机的快照，并且会随着你状态机的任何更改而更新。

下图是 David’s example fetch machine (opens new window) 的快照。

Statechart for a fetch machine.

# 嵌入模式

共享菜单中的 Embed 选项为状态机的可嵌入 iframe 打开一个选项面板。

从文本域复制代码并将其粘贴到你想要嵌入状态机的任何位置。该状态机可以嵌入任何可以使用 iframe 的地方。

下面的嵌入式状态机是 David fetch 状态机示例 (opens new window) 在 State 面板激活的完整模式下，启用了平移和缩放的控制按钮：

你可以为你嵌入式状态机从多个选项中进行选择：

# 模式选项

默认模式是 viz。

viz: 仅在嵌入的 iframe 中显示 Visualizer。
panels: 在嵌入的 iframe 中仅显示 Code、State、Events 和 Actors 面板。
full: 在嵌入的 iframe 中同时显示 Visualizer 和 Code、State、Events 和 Actors 面板。

# 显示控制按钮选项

在 viz 模式和 full 模式下，还有更多选项可以显示 Visualizer 的控制按钮。当 show control buttons 被选中时, 还会显示 Allow panning 和 Allow zooming。如果未选择这些选项，按钮将可见但被禁用。

# 面板选项

在 panels 和 full 模式下，还有更多选项来选择 active panel，将编辑器设为只读以及显示到 Visualizer 的原始链接。

# 克隆 (Fork) 存在的状态机

在 the Rgistry (opens new window) 找到可用状态机？

使用 Fork 按钮，你可以 fork 一个状态机以便你自己使用。

# 有用的错误信息

在代码无法被可视化的时候，Visualizer 将提供具有描述性的错误消息，可帮助你发现和改正错误。

Error message reading “',' expected.”. Error message reading “Invalid transition definition for state node 'fetch.failure': Child state 'load' does not exist on 'fetch'”. Error message reading “Unable to evaluate guard 'notImplemented' in transition for event in state node '(machine)': ((intermediate value)(intermediate value)(intermediate value) || t.predicate is not a function”.