使用方法
Flowchart生成把文本关系图转成代码，四步：
- 在输入框里每行写一条关系，用 -> 连接，例如「开始 -> 收集需求」。
- 想表达分支就写多条以同一节点为起点的行，例如「评审 -> 开发」和「评审 -> 方案设计」形成回环。
- 点「生成 Mermaid」，下方得到以
flowchart TD开头的代码。 - 点「复制代码」，粘到支持 Mermaid 的编辑器即可渲染成图。
Flowchart生成能解决什么
它解决「画流程图要装软件、拖来拖去」的麻烦：
- 快速出草图：先把逻辑用文字理顺，再一键转成代码。
- 写文档：README、Wiki 里直接嵌 Mermaid 代码即可显示流程图。
- 改起来快：改文字比拖拽节点省事，尤其分支多的时候。
本页不做的事：不在页面内直接渲染图形，只生成 Mermaid 源码；也不做布局美化。
原理和变量
① 用了哪个具体函数：逐行用 split('->')（按箭头切分），左右两端各 trim 作为起点与终点，用一个 Set 收集所有节点后去重。
② 关键参数为什么这样取：用「->」作分隔符而不是空格，是因为节点名里可能含空格（如「方案设计 初稿」）；箭头写法兼容 -> 与 -->。
③ 遵循哪个标准：输出符合 Mermaid 的 flowchart 语法，首行 flowchart TD 表示自上而下布局。
④ 输入怎么变成输出：演示 6 行关系 → 去重得到 5 个节点（开始、收集需求、方案设计、评审、开发、上线）→ 生成 6 条连线代码。
⑤ 边界与阈值：空行忽略；缺少箭头的行会被跳过并在提示里说明行号；节点名重复自动合并，不重复声明。
⑥ 常见误用的正确解释：Mermaid 不是「所见即所得」，要粘到支持的渲染器里才成图；节点名里的特殊字符（如括号）可能需加引号，本页会自动为含空格的节点名加引号。
完整示例
演示输入 6 行关系：开始->收集需求、收集需求->方案设计、方案设计->评审、评审->开发、评审->方案设计、开发->上线。
- 去重后节点：开始、收集需求、方案设计、评审、开发、上线（6 个）。
- 连线：6 条，其中「评审 → 方案设计」形成一条回到设计环节的环路。
- 输出首行为
flowchart TD，随后是 6 行节点 --> 节点。
把这段代码粘进支持 Mermaid 的编辑器，即得到一张自上而下的流程图。演示仅作说明。
输入范围与对照表
输入写法与解析对照：
| 你写的行 | 解析结果 | 说明 |
|---|---|---|
| A -> B | A 指向 B | 标准写法 |
| A --> B | A 指向 B | 多一个横杠也识别 |
| A -> B -> C | 两条连线 | 一行多箭头 |
| （空行） | 忽略 | 不产生节点 |
| 没有箭头的一行 | 跳过并提示行号 | 避免脏数据 |
| 方案设计 初稿 | "方案设计 初稿" | 含空格自动加引号 |
| 重复的 A -> B | 只保留一条 | 连线去重 |
结果边界和舍入
本工具不涉及数值计算。需要注意：节点总数与连线数会随输入变化，重复连线会被合并（可能少于你写的行数）；空输入时输出框为空并提示「请先写至少一条关系」。
常见问题
一定要用 -> 这个箭头吗？
是，本页以「->」或「-->」作为关系分隔符；其他符号不会被识别为连线。
页面里能直接看到图吗？
不能，本页只生成 Mermaid 代码，需要粘到支持 Mermaid 的编辑器里渲染。
节点名里有空格会出错吗？
不会，含空格的节点名会自动加引号，避免 Mermaid 解析歧义。
重复写同一条连线会重复吗？
不会，重复的连接会被去重，只保留一条。
支持横向布局吗？
目前固定输出自上而下的 TD 布局；如需左右布局，可在得到代码后把首行改为 flowchart LR。
数据会上传吗？
不会，解析与生成全部在浏览器本地完成。
能生成带颜色的流程图吗？
不能，本页只输出基础结构与连线，不含样式。
一行能写多条关系吗？
可以，例如「A -> B -> C」会拆成两条连线。