Claude：让业务流程图绘制变得简单

“Claude 是否可以绘制流程图？”

之前有粉丝在评论区留言，我尝试以后发现要画好看并不容易。

花了几天时间探索以后，问题已经被我解决，分享给大家~

Claude 绘制流程图

如何使用？

通过多轮对话逐步生成结果。为了方便大家使用，我们将其封装成以下提示词供大家直接调用。

为了确保效果，提示词内容略长，但结构非常清晰：

指令 + 流程 + 要求 + 示例。

使用时，请务必将您的「业务流程」填写到下方提示词中标记为 <flow> 的位置。

提示词模板：

任务: 绘制SVG流程图

（先写出流程UML，然后再绘图（SVG））

流程：

<flow> 

「填入业务流程」

</flow> 

* 要求：清晰美观，文字元素不重叠 

* 参考示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 650">

  <!-- 样式定义 -->

  <defs>

    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">

      <polygon points="0 0, 10 3.5, 0 7" fill="#333" />

    </marker>

  </defs>

  <!-- 纯白背景 -->

  <rect width="900" height="650" fill="white" />

  <!-- 流程图标题 -->

  <text x="450" y="40" font-family="Source Han Sans CN, sans-serif" font-size="24" text-anchor="middle" font-weight="600" fill="#333">会议室预订流程</text>

  <!-- 开始事件：员工提交预订请求 -->

  <rect x="100" y="80" width="200" height="80" rx="4" ry="4" fill="#f3e5ff" stroke="#9c51f0" stroke-width="2" />

  <rect x="130" y="100" width="140" height="10" rx="5" ry="5" fill="#d9b8ff" opacity="0.7" />

  <text x="200" y="130" font-family="Source Han Sans CN, sans-serif" font-size="18" text-anchor="middle" font-weight="500">员工提交预订请求</text>

  <!-- 连接线1 -->

  <line x1="300" y1="120" x2="370" y2="120" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)" />

  <!-- 系统检查会议室可用性（任务） -->

  <rect x="370" y="80" width="200" height="80" rx="4" ry="4" fill="#e3f2ff" stroke="#4f96f0" stroke-width="2" />

  <rect x="400" y="100" width="140" height="10" rx="5" ry="5" fill="#b8daff" opacity="0.7" />

  <text x="470" y="130" font-family="Source Han Sans CN, sans-serif" font-size="18" text-anchor="middle" font-weight="500">系统检查会议室可用性</text>

  <!-- 审核连接线 -->

  <line x1="470" y1="160" x2="470" y2="210" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)" />

  <!-- 决策点：会议室是否可用 -->

  <path d="M 470 210 L 540 280 L 470 350 L 400 280 Z" fill="#f3e5ff" stroke="#9c51f0" stroke-width="2" />

  <text x="470" y="285" font-family="Source Han Sans CN, sans-serif" font-size="18" text-anchor="middle" font-weight="500">会议室可用?</text>

  <!-- 会议室不可用连接线 -->

  <path d="M 400 280 L 320 280 L 320 120" stroke="#333" stroke-width="1.5" fill="none" stroke-dasharray="5,3" marker-end="url(#arrowhead)" />

  <text x="350" y="260" font-family="Source Han Sans CN, sans-serif" font-size="16" fill="#ff6b6b" text-anchor="middle">No 建议其他时间</text>

  <!-- 会议室可用连接线 -->

  <line x1="540" y1="280" x2="590" y2="280" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)" />

  <text x="570" y="260" font-family="Source Han Sans CN, sans-serif" font-size="16" fill="#2ecc71" text-anchor="middle">Yes</text>

  <!-- 管理员审批请求（任务） -->

  <rect x="590" y="240" width="200" height="80" rx="4" ry="4" fill="#e3f2ff" stroke="#4f96f0" stroke-width="2" />

  <rect x="620" y="260" width="140" height="10" rx="5" ry="5" fill="#b8daff" opacity="0.7" />

  <text x="690" y="290" font-family="Source Han Sans CN, sans-serif" font-size="18" text-anchor="middle" font-weight="500">管理员审批请求</text>

  <!-- 连接线到审批决策点 -->

  <line x1="690" y1="320" x2="690" y2="350" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)" />

  <!-- 决策点：审批是否通过 -->

  <path d="M 690 350 L 760 420 L 690 490 L 620 420 Z" fill="#f3e5ff" stroke="#9c51f0" stroke-width="2" />

  <text x="690" y="425" font-family="Source Han Sans CN, sans-serif" font-size="18" text-anchor="middle" font-weight="500">审批通过?</text>

  <!-- 审批不通过连接线 -->

  <path d="M 620 420 L 200 420 L 200 160" stroke="#333" stroke-width="1.5" fill="none" stroke-dasharray="5,3" marker-end="url(#arrowhead)" />

  <text x="400" y="400" font-family="Source Han Sans CN, sans-serif" font-size="16" fill="#ff6b6b" text-anchor="middle">No 通知员工</text>

  <!-- 审批通过连接线 -->

  <line x1="690" y1="490" x2="690" y2="530" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)" />

  <text x="710" y="510" font-family="Source Han Sans CN, sans-serif" font-size="16" fill="#2ecc71" text-anchor="middle">Yes</text>

  <!-- 系统发送预订确认（任务） -->

  <rect x="590" y="530" width="200" height="80" rx="4" ry="4" fill="#e3f2ff" stroke="#4f96f0" stroke-width="2" />

  <rect x="620" y="550" width="140" height="10" rx="5" ry="5" fill="#b8daff" opacity="0.7" />

  <text x="690" y="580" font-family="Source Han Sans CN, sans-serif" font-size="18" text-anchor="middle" font-weight="500">系统发送预订确认</text>

  <!-- 连接线 -->

  <line x1="590" y1="570" x2="520" y2="570" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)" />

  <!-- 员工使用会议室（任务） -->

  <rect x="320" y="530" width="200" height="80" rx="4" ry="4" fill="#ffe3ed" stroke="#f04f85" stroke-width="2" />

  <rect x="350" y="550" width="140" height="10" rx="5" ry="5" fill="#ffb8d1" opacity="0.7" />

  <text x="420" y="580" font-family="Source Han Sans CN, sans-serif" font-size="18" text-anchor="middle" font-weight="500">员工使用会议室</text>

  <!-- 连接线 -->

  <line x1="320" y1="570" x2="250" y2="570" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)" />

  <!-- 预订完成（结束事件） -->

  <rect x="50" y="530" width="200" height="80" rx="4" ry="4" fill="#e3ffed" stroke="#4bcf93" stroke-width="2" />

  <rect x="80" y="550" width="140" height="10" rx="5" ry="5" fill="#b8ffe3" opacity="0.7" />

  <text x="150" y="580" font-family="Source Han Sans CN, sans-serif" font-size="18" text-anchor="middle" font-weight="500">预订完成</text>

  <!-- 说明文字 - 移至预订完成元素上方 -->

  <text x="50" y="450" font-family="Source Han Sans CN, sans-serif" font-size="16" fill="#666" text-anchor="start" font-weight="500">备注:</text>

  <text x="50" y="480" font-family="Source Han Sans CN, sans-serif" font-size="16" fill="#666" text-anchor="start" font-weight="500">• 会议结束后请清理会议室</text>

  <text x="50" y="510" font-family="Source Han Sans CN, sans-serif" font-size="16" fill="#666" text-anchor="start" font-weight="500">• 如需取消预订请提前通知</text>

</svg>

python

Claude 接收到提示词以后，会先用 UML 精准定义流程图，然后精准的绘制可视化流程图。

使用示例

如果生成的图片有些地方需要调整，可以将 SVG 图片放到PPT里，右键转换为形状，就可以在PPT 中直接编辑使用。