Elysia Tools
导航
Data Visualization
用 Mermaid 风格语法描述节点与连线，生成分层流程图
详情
将紧凑的类 Mermaid 文本（A[步骤] --> B{决策}）解析为节点和有向边，用最长路径算法为每个节点分配层级，按所选方向均匀排列各层，并渲染带箭头和可选边标签的 SVG 流程图。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
流程图生成器是一款在线可视化工具，支持使用简洁的类 Mermaid 语法快速绘制分层流程图。您只需输入节点与连线关系，即可自定义图表方向、节点形状与配色方案，并实时渲染出带有箭头和边标签的高清 SVG 格式流程图，无需手动拖拽排版。
背景
需要在技术文档中加入用户登录时的身份验证和错误处理逻辑图。
问题
手动用绘图软件画图效率低，且后续修改不便。
如何使用
在流程定义中输入登录校验的节点和条件分支，选择“从上到下”方向和“圆角”形状。
flowDefinition: "A[开始] --> B{验证凭据}\nB -->|成功| C[进入主页]\nB -->|失败| D[显示错误提示]\nC --> E([结束])\nD --> E"
direction: "TB"
nodeShape: "rounded"
colorScheme: "default"结果
快速生成了一张清晰的登录验证 SVG 流程图，直接嵌入到 Markdown 文档中。
背景
需要向客户展示订单从提交、审核到发货的横向业务流向。
问题
纵向流程图在宽屏上展示效果不佳，需要横向排版且色彩柔和。
如何使用
输入订单流转的文本定义，将方向设置为“从左到右 (LR)”，配色方案选择“柔和 (pastel)”。
flowDefinition: "Order[提交订单] --> Review{财务审核}\nReview -->|通过| Ship[仓库发货]\nReview -->|拒绝| Cancel[取消订单]"
direction: "LR"
nodeShape: "rectangle"
colorScheme: "pastel"结果
生成了一张横向排版、色彩柔和的业务流程图，完美契合汇报 PPT 的版式。
支持矩形、圆角矩形、胶囊形和菱形等常见形状。
在连线符号后使用双竖线包裹文字，例如 -->|标签文本|。
渲染生成的是 SVG 格式的矢量图形，支持无损缩放。
可以，支持从上到下 (TB)、从下到上 (BT)、从左到右 (LR) 和从右到左 (RL) 四种布局方向。
如果输入的语法不符合规范，解析器将无法正确渲染，请参考默认示例的格式书写。