图搭子

泳道图模板

员工手册、制度文件、OA 审批说明里的泳道图，这里每一套都是一段能直接渲染的 Mermaid 代码：一个角色一条泳道，谁在哪一步做什么一眼看清。挑角色最接近的一套，改成你公司的环节，免费导出 Word、PPT 或高清 PNG。免登录、无水印，渲染与导出都在你的浏览器本地完成。

7 套模板 · 免费 · 免登录 · 无水印

现成的泳道图模板

点开看预览与完整代码，直接下载 PNG / SVG / Word / PPT；「在编辑器里打开」后改文字、换主题再导出。

三步拿到能交的图

  1. 挑一套角色最接近的模板，点「在编辑器里打开」
  2. 在预览里双击节点改成你的环节；要加一个部门，就在代码里多写一段 subgraph。也可以把下面的提示词发给 AI，说清角色与步骤，让它生成后整段粘贴进来
  3. 流程长就在「布局」里把方向切成从左到右，选一套主题，点「导出 Word」或「导出 PPT」

泳道图的 Mermaid 写法

flowchart TB
    subgraph 申请人
        A[填写申请] --> B[提交]
        F[收到结果]
    end
    subgraph 主管
        C{是否通过?}
    end
    subgraph 财务
        D[登记付款]
    end
    B --> C
    C -- 是 --> D
    C -- 否 --> F
    D --> F

改这段试试：复制后粘贴进编辑器就能渲染。

  • Mermaid 没有专门的泳道语法：在 flowchart 里用 subgraph 给每个角色画一个分组，就是一条泳道
  • 角色自己的步骤写在它的 subgraph 里；跨角色的连线写在所有 subgraph 之外，写在里面会把对方的节点拉进这条泳道
  • 审批判断用菱形 {是否通过?}，分支写在连线上：-- 是 --> 与 -- 否 -->
  • 第一行 flowchart TB 是泳道竖排、流程往下走，改成 LR 泳道就横排。泳道宽度由排版引擎按内容算，不是严格等宽，角色分工与流转关系是清楚的

让 AI 按这个结构生成你的版本

把下面这段发给豆包、DeepSeek、Kimi 或元宝，把【】里的内容换成你的，再把它的回复整段粘贴到编辑器，会自动识别其中的代码。

请用 Mermaid 的 flowchart TB 语法画一张泳道图：用 subgraph 表示【申请人、直属主管、财务】几条泳道，每个角色的步骤写在自己的 subgraph 里，跨角色的连线写在所有 subgraph 之外。流程是：【申请人填写并提交申请 → 主管审批，通过则由财务登记付款，驳回则通知申请人】。审批判断用菱形节点，分支连线上标「是 / 否」。只输出 mermaid 代码块。

常见问题

Mermaid 能画泳道图吗？
能。用 flowchart 的 subgraph 给每个角色画一个分组，跨角色的连线写在分组之外，渲染出来就是按角色分泳道的流程图。它不像 Visio 那样有严格等宽的泳道，但角色、步骤与流转关系一样清楚，改流程只用改文字。
泳道图和普通流程图有什么区别？
普通流程图只画步骤顺序；泳道图多一个维度，每个步骤属于哪个角色或部门，一列（或一行）就是一个角色。涉及多个部门交接的审批、报销、订单流程，用泳道图能直接看出谁在等谁。
能在 Excel 或 Word 里用吗？
导出 PNG 或 SVG 后插进 Excel、Word、PPT 都行；直接导出 Word（docx）或 PPT（pptx）时，文件里是一张高清图、文末附 Mermaid 代码，以后改环节把代码贴回来重新导出即可，不用在表格里挪形状。
泳道能横着排吗？
能。把第一行的 flowchart TB 改成 flowchart LR，或在编辑器的「布局」里切方向：一行一个角色，流程从左往右走。步骤多的流程横排更省高度，方便放进 PPT。
怎么让 AI 帮我画我们公司的流程？
把本页的提示词发给 AI 助手，把角色与每个角色的步骤换成你们的，再补一句审批规则（如「金额超过 5000 元要总经理审批」）。把它的回复整段粘贴到编辑器，前后的说明文字会自动忽略。

相关内容