UD5工具箱
使用前准备
在开始使用本工具之前，请确保您的浏览器满足以下条件：
- 使用现代浏览器（Chrome 60+、Firefox 55+、Edge 79+、Safari 12+），推荐使用最新版本以获得最佳体验
- 启用JavaScript支持（默认已启用），工具依赖JavaScript实现交互功能
- 确保屏幕分辨率至少为1024x768，以获得最佳设计体验，更大屏幕效果更好
- 建议使用鼠标进行操作，触摸屏设备也可使用但效率较低，推荐使用有线或无线鼠标
- 确保网络连接正常，虽然工具主要功能离线可用，但首次加载需要网络
操作步骤
步骤 1打开工具页面
在浏览器地址栏输入工具URL并访问。页面加载完成后，您将看到一个空白的画布区域和顶部的工具栏。工具栏包含所有主要功能按钮，画布是状态机设计的主要工作区域。建议先熟悉界面布局，了解各个按钮的功能。
步骤 2添加第一个状态
在画布上双击鼠标左键，即可添加一个新的状态。新状态会自动命名为"q0"、"q1"等。您可以通过双击状态名称来修改状态名，使其更具描述性。状态创建后会显示在画布中央位置，可以拖拽调整位置。
步骤 3设置状态属性
选中一个状态后，可以使用工具栏中的按钮设置其属性。点击"设为初始状态"按钮将选中的状态标记为起始状态（通常用箭头指向）。点击"切换接受状态"按钮可以将状态设置为接受状态（通常用双圈表示）。每个状态机只能有一个初始状态，但可以有多个接受状态。
步骤 4创建状态转换
要创建状态之间的转换关系，按住鼠标左键从一个状态拖拽到另一个状态，然后松开鼠标。此时会创建一条连接线，代表从源状态到目标状态的转换。您可以在连接线上添加标签，描述触发转换的输入事件或条件。支持创建自环转换（从状态到自身的转换）。
步骤 5编辑转换标签
双击转换线上的标签区域，即可编辑转换条件。例如，对于交通灯状态机，可以设置"红灯"、"绿灯"、"黄灯"等标签。标签内容应该简洁明了，清晰描述触发转换的事件。支持字母、数字和常见符号，建议使用简短的描述性文本。
步骤 6调整布局和导出
拖拽状态可以调整其位置，使状态图布局更加清晰。使用"适应画布"按钮可以自动调整视图，确保所有元素都可见。设计完成后，点击"导出JSON"按钮保存设计，或点击"导入JSON"按钮加载之前保存的设计。建议定期保存设计成果。
步骤 7使用预设示例
如果您是初学者，建议从预设示例开始学习。工具提供交通灯、自动门、奇偶校验器和自动售货机等经典示例。加载示例后，可以查看其状态和转换结构，理解有限状态机的设计方法。您也可以在示例基础上进行修改和扩展。
使用技巧
设计技巧
- 使用预设示例快速入门，修改现有设计比从零开始更高效
- 合理命名状态和转换，提高设计的可读性和可维护性
- 保持状态图布局整洁，避免连线交叉，必要时调整状态位置
- 为复杂状态机添加注释，说明各个状态和转换的含义
效率技巧
- 定期保存设计，防止意外丢失工作成果
- 利用统计面板监控设计复杂度，避免过度复杂的状态机
- 对于复杂设计，先画草图规划状态布局，再使用工具实现
- 导出JSON文件进行版本控制，便于团队协作和历史追溯
常见操作说明
- 选择元素：单击状态或转换进行选择，选中元素会高亮显示
- 移动状态：拖拽选中的状态到新位置，连线会自动跟随调整
- 删除元素：选中元素后点击工具栏的删除按钮，或按Delete键
- 编辑文本：双击状态名称或转换标签进入编辑模式
- 缩放画布：使用鼠标滚轮或缩放控件调整画布大小
- 平移画布：按住鼠标中键或空格键拖拽画布
- 适应画布：点击"适应画布"按钮自动调整视图
- 撤销操作：使用Ctrl+Z撤销上一步操作