svg-flowchart

SVG Flowchart Maker — 专业流程图生成 Skill

概览

本 skill 将用户描述的流程步骤转换为标准化、风格统一的 SVG 流程图。 核心流程：步骤解析 → 布局选型 → SVG 生成 → 文件输出

---

第一步：信息采集与确认

必须收集的信息

信息项	说明	无则处理
流程步骤	各步骤标题（必须）	无法继续，必须询问
步骤说明	每步骤的补充说明文字（可选）	步骤框只写标题
分支条件	判断节点的条件描述（有分支时必须）	菱形框内写「[条件]」占位
流程标题	整个流程图的标题（可选）	省略标题区
输出用途	嵌入HTML报告 / 独立文件 / 其他	默认独立 .svg 文件

生成前确认（调用 ask_user_input）

信息采集完成后，必须调用 ask_user_input 工具确认以下选项：

问题1（single_select）：
  标题：布局方向
  选项：["垂直（从上到下）", "水平（从左到右）", "自动判断"]
  默认：自动判断

问题2（single_select）：
  标题：是否含判断分支
  选项：["是（有 是/否 或 条件 分支）", "否（线性步骤）", "自动判断"]
  默认：自动判断

问题3（single_select）：
  标题：配色风格
  选项：["暖墨纸（默认）", "清爽蓝绿", "极简灰白", "工程橙"]
  默认：暖墨纸

问题4（single_select）：
  标题：附加输出
  选项：["仅 SVG 文件", "SVG + HTML 预览页"]
  默认：仅 SVG 文件

根据回答设定工作变量：

变量	值
LAYOUT	vertical / horizontal / auto
HAS_BRANCH	true / false
THEME	default / blue / minimal / engineering
NEED_HTML	true / false

---

第二步：布局自动判断（当 LAYOUT=auto 时）

步骤数 ≤ 4 且无分支  →  水平布局
步骤数 5–8 且无分支  →  垂直布局
步骤数 > 8 且无分支  →  垂直分组（每组 4 步，多列）
含分支               →  垂直 + 菱形判断节点

---

第三步：SVG 生成规范

读取 references/svg-spec.md 获取：

• 箭头 marker 标准写法（orient="auto" 机制）
• 各布局的坐标计算公式
• 节点类型（矩形步骤框 / 菱形判断 / 圆角开始结束 / 平行四边形输入输出）
• 配色方案（4 套主题）

核心生成规则（摘要）

SVG 根元素（必须）：

<svg width="100%" viewBox="0 0 680 {H}" xmlns="http://www.w3.org/2000/svg">

• viewBox 宽度固定 680，高度 H 按内容推导（公式见 svg-spec.md）
• 不写死 width 像素值，width="100%" 保证响应式

箭头必须遵守：

<marker id="arr" markerWidth="10" markerHeight="7"
        refX="9" refY="3.5" orient="auto">
  <path d="M0,0 L0,7 L10,3.5 z" fill="#2f4f4f"/>
  <!-- 尖端在 x 最大处 (10,3.5) → orient="auto" 时自动朝向连线终点 -->
</marker>

步骤框标准尺寸（基于 viewBox 680）：

• 宽：260px（垂直）/ 自适应（水平，按公式压缩）
• 高：44px（单行）/ 64px（双行标题+说明）/ 72px（长标题两行）
• 圆角：rx="8"（统一，不用 rx=12/14）
• 步骤间箭头区：28px
• 开始/结束胶囊：160×32，rx="16"

文字必须用 dominant-baseline：

<!-- 正确：y = 节点垂直中心，dominant-baseline 保证视觉居中 -->
<text x="340" y="{node_top + node_height/2}"
      text-anchor="middle" dominant-baseline="central"
      font-size="14" font-family="Georgia,serif" fill="#1d2328">标题</text>

• 标题：font-size="14" + dominant-baseline="central"
• 说明：font-size="12" + dominant-baseline="central"，y = 标题 y + 22
• 条件标注：偏移 10px 避免压线，不放箭头正中心