“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>
Claude 接收到提示词以后,会先用 UML 精准定义流程图,然后精准的绘制可视化流程图。
使用示例
小技巧
如果生成的图片有些地方需要调整,可以将 SVG 图片放到PPT里,右键转换为形状,就可以在PPT 中直接编辑使用。
最后
边界已被打破,创意正在重生。
未来,很精彩,我们,共见证~
我是「云中江树」,这里每周为你分享AI工具、方法和观点。
👉 点赞、在看、分享三连支持 ,关注「云中江树」,深度驾驭AI!