版块 › 教程文档 › 丢一个常用的一种风格的svg架构图绘制prompt

hk640509 发表于 2025-7-25 15:56:27

丢一个常用的一种风格的svg架构图绘制prompt

<p><img src="data/attachment/forum/202507/25/155500m3zwpc9m0iz931ox.png" alt="图片.png" title="图片.png" /></p>
<p>其实这个提示词挺简单的</p>
<pre><code>完整通用SVG流程图生成提示词模板
请根据以下业务流程描述创建一个专业的SVG流程架构图：
[在此处插入您的业务流程自然语言描述]
视觉设计原则
配色方案采用清爽简洁的风格，避免深色背景或复杂渐变。使用浅色背景（如#fafbfc或#f8fafc）搭配明亮但不刺眼的主色调。不同功能模块应使用语义化的色彩区分，例如绿色系表示处理功能，橙色系表示审核功能，蓝色系表示交互功能，红色系表示重要决策或转换节点。
节点设计保持统一性和层次感。所有矩形节点使用相同的圆角半径（通常5-8px），通过颜色深浅和边框粗细来区分重要程度。关键节点使用较粗的边框（2-3px），普通节点使用标准边框（1-2px）。节点内文字采用层次化设计，主标题使用粗体较大字号，副标题或说明文字使用较小字号和灰色。
布局和流程结构
采用从左到右的时间线布局，将整个流程按照时间顺序水平排列。将相似功能的节点垂直对齐，形成功能分组。重要的转换节点或决策点应在视觉上突出显示，可使用不同的形状、颜色或位置来强调。
连线设计应简洁明确。使用不同颜色的连线对应不同的功能流程，所有连线都应包含适当的箭头标记以明确方向。对于复杂的多段路径，必须使用path元素而非line元素。虚线用于表示可选路径或回退操作。分支连线应采用清晰的分叉设计，从决策节点的共同起点水平延伸后再分向不同目标，避免使用直接的斜线连接。
技术实现要求
SVG代码结构应清晰规范。在文档开头定义所有必要的marker元素，包括不同颜色的箭头标记。合理分组和注释代码段，每个功能区域使用清晰的注释标识。确保所有多段连线使用正确的path语法，避免在line元素中重复定义坐标属性。
连线精确定位规范必须严格遵守。起点应从源节点的边缘适当位置延伸，终点应准确连接到目标节点的边缘中心区域，避免连接到节点的角落或顶点。水平连线应连接节点的左右边缘中心点，垂直连线应连接节点的上下边缘中心点。连线路径规划必须避免穿越其他节点，当直线路径会与中间节点产生视觉冲突时，应设计合理的绕行路径，通过增加适当的转折点确保连线清晰可见。
对于从一个决策点分向多个目标的分支连线，应使用折线分叉结构而非直接的斜线连接。具体实现为从源节点右边缘中心点水平延伸一定距离形成主干，然后在适当位置垂直分叉至各目标节点的垂直位置，最后水平连接到目标节点的左边缘中心点。这种设计能够清晰表达从单一决策点派生多个路径的逻辑关系。
多段连线的转折点应基于节点的实际位置和尺寸精确计算，确保有足够的间距避免视觉拥挤。转折点之间的距离应保持一致性，维护整体布局的规整感。绕行路径应选择最短且最整洁的方案，优先使用水平和垂直线段的组合。
文字和标注规范
文字和标注设计注重可读性。使用无衬线字体确保在不同设备上的显示效果。关键信息使用适当的字重和颜色强调。在流程图底部添加简洁的说明文字，解释主要流程逻辑。节点内文字应保持简洁明确，主标题控制在2-4个字符或词汇，副标题提供必要的功能说明。
响应性和可维护性要求
响应性和可维护性考虑。使用合理的viewBox设置确保图表在不同尺寸下的显示效果。保持一致的命名规范和代码结构，便于后续修改和维护。节点尺寸和间距应保持规律性，便于整体布局的调整。
参考模板结构
请参考以下SVG模板的结构、样式和技术实现方式，确保生成的流程图符合上述所有设计规范和技术要求：
&lt;svg viewBox=&quot;0 0 1400 800&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;defs&gt;
    &lt;marker id=&quot;arrow&quot; markerWidth=&quot;10&quot; markerHeight=&quot;10&quot; refX=&quot;9&quot; refY=&quot;3&quot; orient=&quot;auto&quot;&gt;
      &lt;path d=&quot;M0,0 L0,6 L9,3 z&quot; fill=&quot;#1f2937&quot;/&gt;
    &lt;/marker&gt;
    &lt;marker id=&quot;greenArrow&quot; markerWidth=&quot;10&quot; markerHeight=&quot;10&quot; refX=&quot;9&quot; refY=&quot;3&quot; orient=&quot;auto&quot;&gt;
      &lt;path d=&quot;M0,0 L0,6 L9,3 z&quot; fill=&quot;#16a34a&quot;/&gt;
    &lt;/marker&gt;
    &lt;marker id=&quot;orangeArrow&quot; markerWidth=&quot;10&quot; markerHeight=&quot;10&quot; refX=&quot;9&quot; refY=&quot;3&quot; orient=&quot;auto&quot;&gt;
      &lt;path d=&quot;M0,0 L0,6 L9,3 z&quot; fill=&quot;#f59e0b&quot;/&gt;
    &lt;/marker&gt;
    &lt;marker id=&quot;blueArrow&quot; markerWidth=&quot;10&quot; markerHeight=&quot;10&quot; refX=&quot;9&quot; refY=&quot;3&quot; orient=&quot;auto&quot;&gt;
      &lt;path d=&quot;M0,0 L0,6 L9,3 z&quot; fill=&quot;#2563eb&quot;/&gt;
    &lt;/marker&gt;
    &lt;marker id=&quot;redArrow&quot; markerWidth=&quot;10&quot; markerHeight=&quot;10&quot; refX=&quot;9&quot; refY=&quot;3&quot; orient=&quot;auto&quot;&gt;
      &lt;path d=&quot;M0,0 L0,6 L9,3 z&quot; fill=&quot;#dc2626&quot;/&gt;
    &lt;/marker&gt;
&lt;/defs&gt;
&lt;!-- 背景 --&gt;
&lt;rect width=&quot;1400&quot; height=&quot;800&quot; fill=&quot;#fafbfc&quot;/&gt;
&lt;!-- 标题 --&gt;
&lt;text x=&quot;700&quot; y=&quot;30&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;20&quot; font-weight=&quot;bold&quot; fill=&quot;#1f2937&quot;&gt;业务流程架构图&lt;/text&gt;
&lt;!-- 左侧初始节点区域 --&gt;
&lt;rect x=&quot;30&quot; y=&quot;150&quot; width=&quot;140&quot; height=&quot;60&quot; rx=&quot;8&quot; fill=&quot;#f8fafc&quot; stroke=&quot;#64748b&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;100&quot; y=&quot;175&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#1f2937&quot;&gt;流程起始点&lt;/text&gt;
&lt;text x=&quot;100&quot; y=&quot;195&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;11&quot; fill=&quot;#64748b&quot;&gt;初始化操作&lt;/text&gt;
&lt;rect x=&quot;30&quot; y=&quot;260&quot; width=&quot;140&quot; height=&quot;60&quot; rx=&quot;8&quot; fill=&quot;#f0f9ff&quot; stroke=&quot;#0ea5e9&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;100&quot; y=&quot;285&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#0c4a6e&quot;&gt;选择界面&lt;/text&gt;
&lt;text x=&quot;100&quot; y=&quot;305&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;11&quot; fill=&quot;#64748b&quot;&gt;功能选择配置&lt;/text&gt;
&lt;!-- 处理流程A（绿色） --&gt;
&lt;rect x=&quot;250&quot; y=&quot;120&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#dcfce7&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;315&quot; y=&quot;140&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#15803d&quot;&gt;流程A启动&lt;/text&gt;
&lt;text x=&quot;315&quot; y=&quot;155&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;处理类型A&lt;/text&gt;
&lt;rect x=&quot;420&quot; y=&quot;120&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#dcfce7&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;485&quot; y=&quot;140&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#15803d&quot;&gt;参数配置A&lt;/text&gt;
&lt;text x=&quot;485&quot; y=&quot;155&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;配置处理参数&lt;/text&gt;
&lt;rect x=&quot;590&quot; y=&quot;120&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#dcfce7&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;655&quot; y=&quot;140&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#15803d&quot;&gt;数据处理A&lt;/text&gt;
&lt;text x=&quot;655&quot; y=&quot;155&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;数据格式化&lt;/text&gt;
&lt;rect x=&quot;760&quot; y=&quot;120&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#dcfce7&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;825&quot; y=&quot;140&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#15803d&quot;&gt;执行处理A&lt;/text&gt;
&lt;text x=&quot;825&quot; y=&quot;155&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;核心业务处理&lt;/text&gt;
&lt;rect x=&quot;930&quot; y=&quot;120&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#dcfce7&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;995&quot; y=&quot;140&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#15803d&quot;&gt;生成结果A&lt;/text&gt;
&lt;text x=&quot;995&quot; y=&quot;155&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;输出处理结果&lt;/text&gt;
&lt;!-- 处理流程B（橙色） --&gt;
&lt;rect x=&quot;250&quot; y=&quot;220&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#fef3c7&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;315&quot; y=&quot;240&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#92400e&quot;&gt;流程B启动&lt;/text&gt;
&lt;text x=&quot;315&quot; y=&quot;255&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;处理类型B&lt;/text&gt;
&lt;rect x=&quot;420&quot; y=&quot;220&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#fef3c7&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;485&quot; y=&quot;240&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#92400e&quot;&gt;参数配置B&lt;/text&gt;
&lt;text x=&quot;485&quot; y=&quot;255&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;配置处理参数&lt;/text&gt;
&lt;rect x=&quot;590&quot; y=&quot;220&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#fef3c7&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;655&quot; y=&quot;240&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#92400e&quot;&gt;数据处理B&lt;/text&gt;
&lt;text x=&quot;655&quot; y=&quot;255&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;数据格式化&lt;/text&gt;
&lt;rect x=&quot;760&quot; y=&quot;220&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#fef3c7&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;825&quot; y=&quot;240&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#92400e&quot;&gt;执行处理B&lt;/text&gt;
&lt;text x=&quot;825&quot; y=&quot;255&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;核心业务处理&lt;/text&gt;
&lt;rect x=&quot;930&quot; y=&quot;220&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#fef3c7&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;995&quot; y=&quot;240&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#92400e&quot;&gt;生成结果B&lt;/text&gt;
&lt;text x=&quot;995&quot; y=&quot;255&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;输出处理结果&lt;/text&gt;
&lt;!-- 右侧结果展示 --&gt;
&lt;rect x=&quot;1100&quot; y=&quot;160&quot; width=&quot;140&quot; height=&quot;80&quot; rx=&quot;8&quot; fill=&quot;#f3f4f6&quot; stroke=&quot;#6b7280&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;1170&quot; y=&quot;185&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#374151&quot;&gt;结果展示区域&lt;/text&gt;
&lt;text x=&quot;1170&quot; y=&quot;205&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;11&quot; fill=&quot;#64748b&quot;&gt;处理结果A展示&lt;/text&gt;
&lt;text x=&quot;1170&quot; y=&quot;220&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;11&quot; fill=&quot;#64748b&quot;&gt;处理结果B展示&lt;/text&gt;
&lt;text x=&quot;1170&quot; y=&quot;235&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;11&quot; fill=&quot;#64748b&quot;&gt;实时状态更新&lt;/text&gt;
&lt;!-- 状态转换 --&gt;
&lt;rect x=&quot;500&quot; y=&quot;340&quot; width=&quot;400&quot; height=&quot;60&quot; rx=&quot;8&quot; fill=&quot;#fef2f2&quot; stroke=&quot;#dc2626&quot; stroke-width=&quot;3&quot;/&gt;
&lt;text x=&quot;700&quot; y=&quot;365&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;16&quot; font-weight=&quot;bold&quot; fill=&quot;#dc2626&quot;&gt;系统状态转换节点&lt;/text&gt;
&lt;text x=&quot;700&quot; y=&quot;385&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; fill=&quot;#64748b&quot;&gt;保持上下文状态，继承处理历史&lt;/text&gt;
&lt;!-- 交互处理流程（蓝色） --&gt;
&lt;rect x=&quot;250&quot; y=&quot;480&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#f0f9ff&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;315&quot; y=&quot;500&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#1e40af&quot;&gt;用户交互输入&lt;/text&gt;
&lt;text x=&quot;315&quot; y=&quot;515&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;交互界面处理&lt;/text&gt;
&lt;rect x=&quot;420&quot; y=&quot;480&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#f0f9ff&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;485&quot; y=&quot;500&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#1e40af&quot;&gt;输入验证&lt;/text&gt;
&lt;text x=&quot;485&quot; y=&quot;515&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;数据验证处理&lt;/text&gt;
&lt;rect x=&quot;590&quot; y=&quot;480&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#f0f9ff&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;655&quot; y=&quot;500&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#1e40af&quot;&gt;交互处理&lt;/text&gt;
&lt;text x=&quot;655&quot; y=&quot;515&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;综合交互处理&lt;/text&gt;
&lt;rect x=&quot;760&quot; y=&quot;480&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#f0f9ff&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;825&quot; y=&quot;500&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#1e40af&quot;&gt;内容更新&lt;/text&gt;
&lt;text x=&quot;825&quot; y=&quot;515&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;基于历史更新&lt;/text&gt;
&lt;rect x=&quot;930&quot; y=&quot;480&quot; width=&quot;130&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#f0f9ff&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;995&quot; y=&quot;500&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#1e40af&quot;&gt;生成更新版本&lt;/text&gt;
&lt;text x=&quot;995&quot; y=&quot;515&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;优化后输出&lt;/text&gt;
&lt;!-- 实时更新展示 --&gt;
&lt;rect x=&quot;1100&quot; y=&quot;480&quot; width=&quot;140&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#f3f4f6&quot; stroke=&quot;#6b7280&quot; stroke-width=&quot;2&quot;/&gt;
&lt;text x=&quot;1170&quot; y=&quot;500&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#374151&quot;&gt;实时更新展示&lt;/text&gt;
&lt;text x=&quot;1170&quot; y=&quot;515&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;动态内容更新&lt;/text&gt;
&lt;!-- 虚线框选输出结果区域 --&gt;
&lt;rect x=&quot;920&quot; y=&quot;110&quot; width=&quot;150&quot; height=&quot;170&quot; rx=&quot;10&quot; fill=&quot;none&quot; stroke=&quot;#9ca3af&quot; stroke-width=&quot;2&quot; stroke-dasharray=&quot;8,4&quot;/&gt;
&lt;text x=&quot;995&quot; y=&quot;105&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;11&quot; fill=&quot;#6b7280&quot;&gt;初始处理结果&lt;/text&gt;
&lt;!-- 重新处理路径 --&gt;
&lt;rect x=&quot;550&quot; y=&quot;620&quot; width=&quot;200&quot; height=&quot;50&quot; rx=&quot;5&quot; fill=&quot;#fff7ed&quot; stroke=&quot;#ea580c&quot; stroke-width=&quot;2&quot; stroke-dasharray=&quot;5,5&quot;/&gt;
&lt;text x=&quot;650&quot; y=&quot;640&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; font-weight=&quot;bold&quot; fill=&quot;#c2410c&quot;&gt;重新处理路径&lt;/text&gt;
&lt;text x=&quot;650&quot; y=&quot;655&quot; text-anchor=&quot;middle&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;重新启动处理流程&lt;/text&gt;
&lt;!-- 主要连接线 --&gt;

&lt;!-- 初始流程连接 --&gt;
&lt;line x1=&quot;100&quot; y1=&quot;210&quot; x2=&quot;100&quot; y2=&quot;260&quot; stroke=&quot;#1f2937&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#arrow)&quot;/&gt;
&lt;text x=&quot;110&quot; y=&quot;235&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; fill=&quot;#64748b&quot;&gt;进入&lt;/text&gt;

&lt;!-- 从选择界面到功能分支 --&gt;
&lt;path d=&quot;M 170 290 L 200 290 L 200 150 L 250 150&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#greenArrow)&quot; fill=&quot;none&quot;/&gt;
&lt;path d=&quot;M 170 290 L 200 290 L 200 240 L 250 240&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#orangeArrow)&quot; fill=&quot;none&quot;/&gt;
&lt;text x=&quot;210&quot; y=&quot;190&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; fill=&quot;#16a34a&quot;&gt;流程A&lt;/text&gt;
&lt;text x=&quot;210&quot; y=&quot;260&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; fill=&quot;#f59e0b&quot;&gt;流程B&lt;/text&gt;

&lt;!-- 处理流程A连接 --&gt;
&lt;line x1=&quot;380&quot; y1=&quot;145&quot; x2=&quot;420&quot; y2=&quot;145&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#greenArrow)&quot;/&gt;
&lt;line x1=&quot;550&quot; y1=&quot;145&quot; x2=&quot;590&quot; y2=&quot;145&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#greenArrow)&quot;/&gt;
&lt;line x1=&quot;720&quot; y1=&quot;145&quot; x2=&quot;760&quot; y2=&quot;145&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#greenArrow)&quot;/&gt;
&lt;line x1=&quot;890&quot; y1=&quot;145&quot; x2=&quot;930&quot; y2=&quot;145&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#greenArrow)&quot;/&gt;

&lt;!-- 处理流程B连接 --&gt;
&lt;line x1=&quot;380&quot; y1=&quot;245&quot; x2=&quot;420&quot; y2=&quot;245&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#orangeArrow)&quot;/&gt;
&lt;line x1=&quot;550&quot; y1=&quot;245&quot; x2=&quot;590&quot; y2=&quot;245&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#orangeArrow)&quot;/&gt;
&lt;line x1=&quot;720&quot; y1=&quot;245&quot; x2=&quot;760&quot; y2=&quot;245&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#orangeArrow)&quot;/&gt;
&lt;line x1=&quot;890&quot; y1=&quot;245&quot; x2=&quot;930&quot; y2=&quot;245&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#orangeArrow)&quot;/&gt;

&lt;!-- 到结果展示的连接 --&gt;
&lt;line x1=&quot;1060&quot; y1=&quot;145&quot; x2=&quot;1100&quot; y2=&quot;180&quot; stroke=&quot;#16a34a&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#greenArrow)&quot;/&gt;
&lt;line x1=&quot;1060&quot; y1=&quot;245&quot; x2=&quot;1100&quot; y2=&quot;220&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#orangeArrow)&quot;/&gt;

&lt;!-- 进入交互流程 --&gt;
&lt;path d=&quot;M 500 370 L 200 370 L 200 450 L 315 450 L 315 480&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;3&quot; marker-end=&quot;url(#blueArrow)&quot; fill=&quot;none&quot;/&gt;
&lt;text x=&quot;290&quot; y=&quot;425&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;14&quot; fill=&quot;#2563eb&quot;&gt;进入交互&lt;/text&gt;

&lt;!-- 交互流程连接 --&gt;
&lt;line x1=&quot;380&quot; y1=&quot;505&quot; x2=&quot;420&quot; y2=&quot;505&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#blueArrow)&quot;/&gt;
&lt;line x1=&quot;550&quot; y1=&quot;505&quot; x2=&quot;590&quot; y2=&quot;505&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#blueArrow)&quot;/&gt;
&lt;line x1=&quot;720&quot; y1=&quot;505&quot; x2=&quot;760&quot; y2=&quot;505&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#blueArrow)&quot;/&gt;
&lt;line x1=&quot;890&quot; y1=&quot;505&quot; x2=&quot;930&quot; y2=&quot;505&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#blueArrow)&quot;/&gt;
&lt;line x1=&quot;1060&quot; y1=&quot;505&quot; x2=&quot;1100&quot; y2=&quot;505&quot; stroke=&quot;#2563eb&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#blueArrow)&quot;/&gt;
&lt;!-- 重新开始路径 --&gt;
&lt;path d=&quot;M 995 280 L 995 400 L 1260 400 L1260 645 L 750 645&quot; stroke=&quot;#ea580c&quot; stroke-width=&quot;2&quot; stroke-dasharray=&quot;5,5&quot; marker-end=&quot;url(#arrow)&quot; fill=&quot;none&quot;/&gt;
&lt;path d=&quot;M 995 280 L 995 365L 900 365&quot; stroke=&quot;#dc2626&quot; stroke-width=&quot;2&quot; marker-end=&quot;url(#redArrow)&quot; fill=&quot;none&quot;/&gt;
&lt;path d=&quot;M 550 645 L 100 645 L 100 320&quot; stroke=&quot;#ea580c&quot; stroke-width=&quot;2&quot; stroke-dasharray=&quot;5,5&quot; marker-end=&quot;url(#arrow)&quot; fill=&quot;none&quot;/&gt;
&lt;text x=&quot;870&quot; y=&quot;565&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;10&quot; fill=&quot;#ea580c&quot;&gt;重新开始&lt;/text&gt;
    &lt;!-- 流程说明区域 --&gt;
&lt;rect x=&quot;50&quot; y=&quot;720&quot; width=&quot;1300&quot; height=&quot;60&quot; rx=&quot;5&quot; fill=&quot;#f8fafc&quot; stroke=&quot;#e2e8f0&quot; stroke-width=&quot;1&quot;/&gt;
&lt;text x=&quot;70&quot; y=&quot;740&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#1f2937&quot;&gt;核心流程说明&lt;/text&gt;
&lt;text x=&quot;70&quot; y=&quot;760&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; fill=&quot;#475569&quot;&gt;1. 用户从起始点进入系统，通过选择界面配置参数，系统根据选择执行相应的处理流程并生成初始结果&lt;/text&gt;
&lt;text x=&quot;70&quot; y=&quot;775&quot; font-family=&quot;Arial, sans-serif&quot; font-size=&quot;12&quot; fill=&quot;#475569&quot;&gt;2. 系统转换至交互模式，用户可通过交互界面进行内容调整，支持基于历史的增量更新和实时展示&lt;/text&gt;
&lt;/svg&gt;
</code></pre>
<p>然后我们实际测试一下整理出来的这个提示词的能力（以Claude-4-sonnet为测试模型）：</p>
<pre><code>一个合适的业务流程描述示例：
企业员工培训管理系统业务流程
企业培训管理流程从人力资源部门识别培训需求开始，通过年度绩效评估和技能差距分析确定培训目标。培训需求确认后，系统进入培训计划制定阶段，包括课程设计、讲师安排和培训资源配置。培训部门根据不同岗位和职级制定个性化的培训方案，同时考虑预算约束和时间安排。
培训计划审批通过后进入实施阶段。系统自动向目标员工发送培训通知，员工通过企业内部平台进行报名确认。培训开始前需要完成学前评估，了解员工的基础知识水平和学习期望。培训实施过程中系统记录员工的出勤情况、参与度和阶段性测试成绩。
培训结束后进入评估环节，包括知识测试、技能考核和培训满意度调查。系统根据评估结果生成个人学习报告和整体培训效果分析。对于未达到预期效果的员工，系统会推荐补充培训或重新安排相关课程。培训数据最终归档到员工个人发展档案，为后续的职业规划和绩效评估提供依据。
整个流程中如果出现培训取消、讲师变更或员工请假等异常情况，系统会启动相应的处理机制，包括重新安排培训时间、调配替代资源或安排补课方案。系统还具备培训成本核算和投资回报率分析功能，为企业培训决策提供数据支持。
</code></pre>
<p>生成的效果是：<br />
<img src="data/attachment/forum/202507/25/155602im9y6qzyc6o0o67j.png" alt="图片.png" title="图片.png" /></p>
<p>好像稍微有点瑕疵不过已经能接受了，不行手动改一下代码就行</p>

hljsyz 发表于 2025-7-25 15:58:08

感谢分享

xjdata 发表于 2025-7-25 15:58:29

claude 4 原生的提示其实都可以啊

mahao 发表于 2025-7-25 15:59:14

工具分享一波，看起来挺不错，下次汇报说不定就用上了

lihanyue 发表于 2025-7-25 15:59:23

赞，收藏了

猎人阿祥 发表于 2025-7-25 15:59:41

但看这个svg，看起来效果很不错哦

查看完整版本: 丢一个常用的一种风格的svg架构图绘制prompt