# 流程图生成器

用 Mermaid 风格语法描述节点与连线，生成分层流程图

> 标准页面: https://elysiatools.com/zh/tools/flowchart-maker

- **分类:** Data Visualization

- **关键词:** 流程图, 节点, 连线, 流程, mermaid

## 概述

将紧凑的类 Mermaid 文本（A[步骤] --> B{决策}）解析为节点和有向边，用最长路径算法为每个节点分配层级，按所选方向均匀排列各层，并渲染带箭头和可选边标签的 SVG 流程图。

## 输入项

- **流程定义** (textarea): Mermaid-style flow: A\[Label\] --> B, with optional |edge label| and shapes \[rect\], {diamond}, (stadium)
- **方向** (select)
- **节点形状** (select)
- **配色方案** (select)

## 适用场景

- 需要快速将文本逻辑或步骤说明转化为直观的流程图，避免繁琐的手动绘图排版时。
- 编写技术文档、系统架构或业务流程时，需要插入清晰的 SVG 格式分层关系图时。
- 想要通过简单的文本代码版本化管理流程图，方便随时修改和重新生成时。

## 工作原理

- 在输入框中编写类 Mermaid 语法的文本，定义节点（如 A\[步骤\]）和带标签的指向连线（如 -->|是| B）。
- 选择流程图的布局方向（如从上到下或从左到右）、默认节点形状以及配色方案。
- 系统解析文本并应用最长路径算法自动计算节点层级，渲染并输出带箭头的 SVG 流程图。

## 使用案例

- 软件开发人员用于绘制系统登录校验、API 请求处理等算法逻辑流程。
- 产品经理用于梳理用户注册、下单支付等业务功能的操作路径。
- 运营人员用于制作客服标准作业程序（SOP）和用户问题排查指南。

## 常见问题

### 支持哪些节点形状？

支持矩形、圆角矩形、胶囊形和菱形等常见形状。

### 如何为连线添加文字标签？

在连线符号后使用双竖线包裹文字，例如 -->|标签文本|。

### 导出的流程图是什么格式？

渲染生成的是 SVG 格式的矢量图形，支持无损缩放。

### 布局方向可以调整吗？

可以，支持从上到下 (TB)、从下到上 (BT)、从左到右 (LR) 和从右到左 (RL) 四种布局方向。

### 语法写错会有提示吗？

如果输入的语法不符合规范，解析器将无法正确渲染，请参考默认示例的格式书写。

## 相关工具

- [河流图生成器](https://elysiatools.com/zh/tools/stream-graph): 生成流畅的河流图，用于可视化时间序列数据流动，非常适合展示随时间变化的构成，具有有机的流动形状
- [文氏图生成器](https://elysiatools.com/zh/tools/euler-diagram-generator): 生成可自定义的文氏图，用于可视化集合关系、包含关系和层次结构
- [分组柱状图生成器](https://elysiatools.com/zh/tools/grouped-bar-chart): 生成分组柱状图，用于并排比较多个类别，非常适合多类别对比和比较分析
- [直方图生成器](https://elysiatools.com/zh/tools/histogram-maker): 将数值数据分箱并绘制直方图，可视化统计分布，可选叠加正态曲线与统计摘要
- [弦图生成器](https://elysiatools.com/zh/tools/chord-diagram-generator): 生成交互式弦图，可视化实体间的双向流动和关系
- [漏斗图生成器](https://elysiatools.com/zh/tools/funnel-chart-generator): 从数据生成可自定义的漏斗图，非常适合显示转化率、销售管道和流程
- [里程碑图生成器](https://elysiatools.com/zh/tools/milestone-chart): 生成项目里程碑图表，包含时间线节点和关键成就点
- [组织架构图生成器](https://elysiatools.com/zh/tools/org-chart-maker): 把层级 JSON 数据渲染成带姓名与职位的垂直组织架构图

## 示例

- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

- [结构与逻辑图生成器](https://elysiatools.com/zh/hubs/structural-and-logic-diagram-generators): 从文本、JSON、集合定义或日志生成流程图、思维导图、组织架构图、树状图、韦恩图、ASCII 目录树与时序图。