---
title: 流程图
category: drawing
order: 5
---

# 流程图

流程图是表达流程和逻辑的常用工具，Opentu 支持 AI 生成流程图和手动绘制。

## 效果展示

<img src="../../product_showcase/流程图.gif" alt="流程图演示" style="max-width: 100%; border-radius: 8px;" />

只需用文字描述流程，AI 就能自动生成专业的流程图。

## AI 生成流程图

这是最快捷的方式：

### 方法一：自然语言描述

在底部输入框输入流程描述，如：

- "用户登录流程：输入账号密码 → 验证 → 成功进入首页/失败提示重试"
- "订单处理流程：下单 → 支付 → 发货 → 签收"

AI 会理解你的描述并生成相应的流程图。

### 方法二：Mermaid 语法

如果你熟悉 Mermaid 语法，可以更精确地控制流程图：

1. 点击工具栏的 **工具箱** 图标
2. 选择 **Mermaid 转流程图**
3. 输入 Mermaid 代码
4. 点击生成

**示例代码：**

```mermaid
graph TD
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E
```

## 手动绘制流程图

<Screenshot id="flowchart-step-1" />
<p class="screenshot-caption">流程图工具</p>

### 第 1 步：添加形状

<Screenshot id="flowchart-step-2" />
<p class="screenshot-caption">选择流程图形状：① 开始/结束 ② 处理步骤 ③ 判断条件</p>

1. 点击工具栏的形状工具
2. 选择需要的形状：
   - **矩形** - 表示操作/步骤
   - **菱形** - 表示判断/条件
   - **椭圆/圆角矩形** - 表示开始/结束
   - **平行四边形** - 表示输入/输出

3. 在画布上点击或拖拽创建

### 第 2 步：添加文字

双击形状，输入说明文字。

### 第 3 步：连接形状

<Screenshot id="flowchart-step-3" />
<p class="screenshot-caption">拖动连接点创建连线，双击编辑文本</p>

1. 按 `A` 键切换到箭头工具
2. 从一个形状拖动到另一个形状
3. 箭头会自动连接两个形状

### 第 4 步：调整布局

拖动形状调整位置，连接线会自动跟随调整。

## 形状含义

| 形状 | 含义 | 使用场景 |
|------|------|----------|
| 圆角矩形 | 开始/结束 | 流程的起点和终点 |
| 矩形 | 处理/操作 | 具体的执行步骤 |
| 菱形 | 判断/决策 | 需要做选择的节点 |
| 平行四边形 | 输入/输出 | 数据的输入或结果输出 |

## 连接线操作

### 添加连接线

1. 选择箭头工具（按 `A` 键）
2. 从起始形状拖到目标形状

### 添加标签

双击连接线，可以添加文字标签（如"是"、"否"）。

### 调整连接点

拖动连接线的端点，可以改变连接位置。

### 折线连接

如果需要拐弯的连接线，选择 **折线箭头** 类型。

## 编辑技巧

### 对齐形状

选中多个形状后，使用对齐功能让它们整齐排列：
- 左对齐 / 右对齐
- 顶部对齐 / 底部对齐
- 水平居中 / 垂直居中

### 等距分布

选中多个形状，使用"等距分布"让间距均匀。

### 复制结构

选中一组形状和连接线，`Ctrl/Cmd + C` 复制，`Ctrl/Cmd + V` 粘贴，可以快速复制相似的结构。

## 快捷键

| 快捷键 | 功能 |
|--------|------|
| `R` | 矩形工具 |
| `O` | 椭圆工具 |
| `A` | 箭头工具 |
| `V` | 选择工具 |
| `双击形状` | 编辑文字 |
| `Delete` | 删除选中项 |

## 小贴士

:::tip
先用 AI 生成基础框架，再手动微调细节，效率最高。
:::

:::tip
流程图太大？选中所有内容，缩小尺寸，或者分成多个子流程图。
:::

:::note
导出为图片时，建议选择 PNG 格式以保持清晰度。
:::