在线流程图工具

一、添加图形节点

1. 在左侧面板点击图形类型按钮（矩形、菱形、开始/结束、圆角），然后点击"添加节点"按钮，即可在画布中央生成对应图形。

2. 也可以直接在左侧图形类型按钮上双击，快速添加一个节点。

3. 添加后可在"添加/编辑新节点名称"输入框中输入文字，再点"添加节点"，新节点会自动带上文字。

二、编辑节点文字

1. 单击选中图形节点，节点上的文字会自动显示到左侧文本框，直接修改即可实时更新。

2. 也可以直接双击图形内部，在图形上直接编辑文字，按 Enter 确认或点击空白处完成。

3. 拖动字号滑块可以调整选中图形的文字大小（10-24号）。

三、移动与调整大小

1. 鼠标按住图形拖动即可移动位置。

2. 选中图形后，右下角出现蓝色小圆点，拖动可调整图形宽高。

3. 图形四周的白色圆点是连接点，用于连线（见下节）。

四、连接图形（连线）

1. 鼠标移到图形边缘的白色小圆点（连接点）上，按住拖拽到另一个图形上松开，即可建立连线。

2. 连线自动带箭头指向目标图形。

3. 修改单条连线颜色：先单击选中要修改的连线（连线会变粗），然后在左侧"连线颜色"选择器选颜色，只改选中的那条。

4. 统一修改所有连线颜色：不选中任何连线，直接在"连线颜色"选颜色，全部连线统一变色。

5. 删除连线：单击选中连线，按键盘 Delete 键即可删除。

6. 添加连线标签：双击连线，可输入文字标签。

五、颜色与样式

1. 节点颜色：选中图形后，点击上方或左侧的颜色方块，即可修改选中图形的填充色。不选图形时点击颜色，会设置为默认颜色，影响后续新添加的节点。

2. 边框颜色：选中图形后，在"边框颜色"选择器选颜色，修改选中图形的边框颜色。

3. 主题样式：点击圆形主题色板，可一键将当前所有节点应用为该主题配色。

六、排列与操作

1. 上下排列：点击"↑上下"按钮，将所有节点按垂直方向自动整齐排列。

2. 左右排列：点击"→左右"按钮，将所有节点按水平方向自动整齐排列。

3. 撤销/重做：操作区的左箭头撤销、右箭头重做。

4. 复制：选中图形后点复制按钮，可复制一个相同图形。

5. 取消选择：点击"取消选择"按钮，取消当前所有选中。

6. 清空画布：点击红色"清空画布"按钮，删除所有节点和连线。

七、导入 Mermaid 代码

1. 在底部文本框中粘贴 Mermaid 流程图代码（如 graph TD\n A[开始] --> B[处理]）。

2. 点击"导入代码"按钮，系统自动解析并在画布上生成对应的图形和连线。

3. 右侧"生成代码"区域实时显示当前画布对应的 Mermaid 代码，可点击"复制代码"复制。

八、保存与导出

1. 保存：点击蓝色"保存"按钮，当前流程图自动保存到浏览器本地，下次打开自动恢复。

2. 导出图片：点击绿色"导出图片"按钮，在弹出菜单选择导出 PNG、JPG 或 PDF 格式。

3. 导出的图片会自动下载到本地。

九、注意事项

⚠ 数据保存在浏览器本地，清除浏览器缓存会丢失数据，请及时导出备份。

⚠ 连线时请对准图形边缘的白色连接点拖拽，拖到目标图形中心松开即可。

⚠ 修改连线颜色前请先单击选中目标连线（连线变粗表示选中），否则会修改全部连线。

⚠ 本工具完全离线运行，无需联网，所有数据不会上传服务器。