你必须严格按照以下六个阶段顺序执行，每个阶段产出明确的中间产物。不可跳过任何阶段。

输入规范

接受的输入类型

自然语言段落描述
编号/无序列表
伪代码 / 逻辑描述
已有流程文档的摘要
关键词 + 关系描述的组合

输入约束

必须包含至少 2 个可识别的流程步骤
如果输入不足以生成有意义的流程图，执行「错误处理 - 输入不足」策略
如果超过 30 个核心节点，执行「错误处理 - 复杂度过高」策略

输出规范

最终输出

完整的 SVG 代码块，可直接保存为 .svg 文件
UTF-8 编码
使用 viewBox 实现响应式缩放
默认画布宽度 800–1200px，高度自适应

中间产物（可选展示）

用户未要求时可折叠/省略中间产物，但内部必须完整执行每个阶段。如用户要求「显示过程」或「分步展示」，则输出每个阶段的中间产物。

═══════════════════════════════════════

执行流水线（六阶段）

═══════════════════════════════════════

Phase 1: 输入识别与分析

目标：全面理解用户意图，提取核心信息，评估输入质量。

执行步骤：

类型判断：识别输入属于自然语言 / 列表 / 伪代码 / 文档 / 混合类型
实体提取：
- 动作/操作（如：提交、审核、发送）
- 对象/状态（如：订单、邮件、账户）
- 角色/主体（如：用户、系统、管理员）
- 条件/规则（如：如果库存充足、当金额>1000）
关系识别：
- 顺序关系（A → B）
- 条件分支（if/else）
- 并行关系（同时进行）
- 循环关系（重复直到）
- 汇聚关系（多条路径合并）
领域分类：业务流程 / 技术流程 / 决策流程 / 交互流程
完整度评估：
- 是否有明确的起点和终点
- 是否所有分支都有归宿
- 是否存在歧义或缺失环节

输出格式：

## Phase 1 分析报告

- 输入类型：[自然语言描述]
- 领域分类：[业务流程]
- 识别实体：[N] 个动作，[N] 个对象，[N] 个角色，[N] 个条件
- 关系类型：顺序 ✓ | 分支 ✓ | 并行 ✗ | 循环 ✗ | 汇聚 ✓
- 完整度：[4/5]
- 缺失/待确认项：
  - [具体描述]
- 领域关键词：[keyword1, keyword2, ...]

Phase 2: 内容优化与文字稿生成

目标：将原始输入转化为完整、清晰、无歧义的结构化流程文字稿。

执行规则：

补全：
- 必须有明确的「开始」触发条件
- 必须有明确的「结束」状态
- 每个判断分支必须有完整的是/否（或多条件）路径
- 补充合理的异常处理路径（如果原始输入遗漏）
统一：
- 同一概念使用统一术语
- 动作描述使用「动词 + 宾语」结构
- 条件描述使用「当...时」或「如果...则」结构
精简：
- 每个步骤描述不超过 15 字（用于节点标签）
- 详细描述放入步骤说明中
排序：
- 按实际执行顺序排列
- 分支路径缩进标注

输出格式：

## Phase 2 优化文字稿

### 流程名称：[名称]
### 流程概述：[一句话描述]

### 参与角色
| 角色 | 职责 |
|------|------|
| [角色] | [职责描述] |

### 流程步骤

**1. [步骤名称]**（节点标签：[≤15字的精简标签]）
- 描述：[详细描述]
- 角色：[执行角色]
- 输入：[所需输入]
- 输出：[产出结果]

**2. [判断名称]**（节点标签：[≤15字]）
- 类型：条件判断
- 条件：[判断条件]
- ✅ 是 → 转到步骤 [N]
- ❌ 否 → 转到步骤 [N]

...（依次列出所有步骤）

### 异常处理
| 异常场景 | 处理方式 |
|----------|----------|
| [场景] | [处理] |

### 补充说明
- [说明事项]

Phase 3: 流程结构拆解

目标：将文字稿转化为结构化 JSON 数据，精确定义所有节点和连接。

执行规则：

节点定义：
- 每个节点必须有唯一 id（格式：node_01, node_02, ...）
- 节点类型必须从以下选取：terminal（开始/结束）、process（处理）、decision（判断）、io（输入/输出）、subprocess（子流程）
- label 不超过 15 个中文字符或 30 个英文字符
- 开始节点 label 固定为「开始」，结束节点 label 固定为「结束」（或对应英文）
边定义：
- 每条边必须有 from 和 to，指向有效的节点 id
- 条件分支的边必须有 label（如「是」「否」）
- 普通顺序边 label 留空
位置规划：
- 使用 row/col 网格定位（从 0 开始）
- 主流程走中间列（通常 col=1 或 col=2）
- 分支向两侧展开
- 同一层级的节点在同一行
元数据：
- 必须包含 title（流程名称）
- 可选 subtitle（概述）和 footnote（备注）

输出格式：严格遵循 assets/templates/structure_schema.json 的 schema。

Phase 4: 文本线框图生成

目标：基于 Phase 3 的结构数据，生成可视化的文本线框布局。

执行规则：

流向选择：
- 默认使用 TB（自上而下）
- 如果流程是线性且步骤较多（>8步），考虑 LR（从左到右）
- 如果存在复杂的并行分支，使用 TB
ASCII 线框规范：
- 使用 [ ] 表示处理节点
- 使用 (( )) 表示开始/结束节点
- 使用 { } 表示判断节点
- 使用 │ ─ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼ 绘制连接线
- 使用 ▼ ▶ ◀ ▲ 表示流向箭头
- 使用 [是] [否] 标注分支条件
布局检查：
- 确认无节点重叠
- 确认连接线无不必要的交叉
- 确认整体布局左右均衡

输出格式：

## Phase 4 文本线框图

### 布局参数
- 流向：TB（自上而下）
- 网格：[行数] 行 × [列数] 列
- 节点数：[N]
- 连接数：[N]

### ASCII 线框

（在此绘制 ASCII 线框图）

Phase 5: 视觉设计方案

目标：为流程图设计专业的视觉样式，确保美观和可读性。

执行规则：

配色选择：
- 根据领域类型从 assets/references/color_palettes.json 中选取配色方案
- 也可根据用户指定的风格自定义
- 必须确保文字与背景的对比度 ≥ 4.5:1（WCAG AA 标准）
排版规则：
- 字体族："PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif
- 节点标签字号：13–14px，font-weight: 500
- 边标签字号：11–12px
- 标题字号：20–24px，font-weight: 700
- 备注字号：12px，斜体
节点样式：
- 圆角半径：处理节点 8px，开始/结束节点 25px（胶囊形）
- 阴影：drop-shadow(0 2px 4px rgba(0,0,0,0.1))
- 内边距：水平 20px，垂直 12px
- 节点宽度根据文字内容自适应，但同类节点保持统一宽度
连接线样式：
- 线宽：1.5–2px
- 颜色：中性灰色（与节点边框色协调）
- 转角使用圆弧（radius 4-6px）
- 箭头：实心三角形，大小 8px
间距规则：
- 垂直间距（TB模式）：60–80px
- 水平间距：50–70px
- 画布内边距：40–60px

输出格式：严格遵循 assets/templates/style_schema.json 的 schema。

Phase 6: SVG 代码生成

目标：综合 Phase 3–5 的全部数据，生成最终的 SVG 代码。

6.1 布局规划（必须先执行）

⚠️ 关键原则：先计算整体布局，再开始编码。避免元素重叠。

执行步骤：

列出所有内容区块

区块名称        预估高度    起始Y    结束Y
─────────────────────────────────────────
标题区          80px       0        80
左侧面板        ???px      100      ???
中间流程图      ???px      100      ???  ← 找最高的！
右侧面板        ???px      100      ???
图例区          40px       ???      ???
底部说明        60-80px    ???      ???
─────────────────────────────────────────

找出最高的列作为基准
- 单列流程图：流程步骤数 × (节点高度 + 间距)
- 多列布局：取所有列中的最大高度
- 节点高度估算：处理节点 40px，判断节点 80px，终端节点 45px
- 间距估算：60-80px（TB 模式）

计算关键坐标

header_height = 80
content_start_y = 100
max_column_height = Math.max(所有列高度)
footer_y = content_start_y + max_column_height + 20  // 20px 间距
total_height = footer_y + footer_height + 30         // 30px 底部边距

画布尺寸公式

宽度 = 内容宽度 + 左右边距(各 40-60px)
高度 = 最高列底端 + 底部区域高度 + 边距

宁大勿小：预估高度 × 1.1 作为安全系数

常见错误案例：

❌ 错误做法：
   - 边写边估算坐标
   - 把底部元素放在"看起来差不多"的位置
   - 导致底部说明与流程图重叠

✅ 正确做法：
   - 先画布局草图，标注预估坐标
   - 确定最高列的结束 Y 坐标
   - 底部元素放在最高列结束 + 20px 之后

6.2 SVG 代码结构

<svg xmlns="..." viewBox="..." font-family="...">
  <!-- 1. 定义区：滤镜、渐变、箭头标记 -->
  <defs>
    <filter id="shadow">...</filter>
    <marker id="arrowhead">...</marker>
  </defs>

  <!-- 2. 背景层 -->
  <rect class="canvas-bg" ... />

  <!-- 3. 标题区 -->
  <text class="title">...</text>
  <text class="subtitle">...</text>

  <!-- 4. 连接线层（先渲染，使其位于节点下方） -->
  <g class="edges">
    <path ... />
    <text class="edge-label">...</text>
  </g>

  <!-- 5. 节点层 -->
  <g class="nodes">
    <g class="node" id="node_01">
      <rect ... />
      <text>...</text>
    </g>
  </g>

  <!-- 6. 标注层 -->
  <g class="annotations">...</g>

  <!-- 7. 备注/脚注 -->
  <text class="footnote">...</text>
</svg>

6.3 生成规则

画布：
- 使用 viewBox，不硬编码 width/height，确保响应式
- 实际输出可添加 width="100%" 便于嵌入
- viewBox 高度必须 ≥ Phase 6.1 计算的 total_height
节点渲染：
- terminal 节点：圆角矩形（rx 等于高度一半），实心填充
- process 节点：圆角矩形，白底 + 彩色边框
- decision 节点：用 <polygon> 或旋转45°的 <rect> 绘制菱形
- 所有文字使用 <text> 并设置 text-anchor="middle" + dominant-baseline="central"
连接线渲染：
- 优先使用正交折线（直角转弯），用 <path> 的 L/H/V 命令
- 如需圆角转弯，使用 Q（二次贝塞尔）
- 箭头通过 marker-end="url(#arrowhead)" 引用
- 分支标签放在连接线起始端附近
坐标计算：
- 根据 Phase 3 的 row/col + Phase 5 的间距参数计算实际 x/y
- 公式：x = padding + col * (nodeWidth + gapH) + nodeWidth/2
- 公式：y = titleAreaHeight + padding + row * (nodeHeight + gapV) + nodeHeight/2
- 连接线的起止点对齐到节点的边缘中心点
文字处理：
- 超过节点宽度的文字需要折行（使用多个 <tspan>）
- 中文按字符数估算宽度（每字符约 14px × fontSize 比例）

6.4 质量检查（生成后必须执行）

布局检查：

✅ 底部元素（说明、图例、脚注）不与内容区域重叠
✅ viewBox 高度足够容纳所有元素
✅ 所有列的元素都在预期 Y 范围内

内容检查：

✅ 所有节点文字完整可见，未被截断
✅ 节点之间无重叠
✅ 连接线箭头方向正确
✅ 判断分支的「是/否」标签清晰
✅ 整体布局均衡，无明显偏移
✅ 配色和谐，文字可读

错误处理

场景1：输入不足

当用户输入无法识别出 ≥ 2 个流程步骤时：

说明当前识别到的信息
提出 2-3 个引导问题帮助用户补充
不生成流程图

场景2：复杂度过高

当识别到的核心节点 > 30 个时：

建议将流程拆分为主流程 + 子流程
提供拆分方案（列出建议的子流程边界）
先生成高层概览图，子流程标注为 subprocess 节点

场景3：存在歧义

当流程存在多种合理理解时：

列出不同的理解方式
选择最常见/最合理的作为默认
在流程图 footnote 中标注「注：此处存在 [N] 种理解，本图采用 [具体方案]」

场景4：用户指定风格

如用户指定了配色、风格、品牌色等：

在 Phase 5 中优先使用用户指定的方案
确保自定义配色仍满足对比度标准

场景5：多区域布局重叠

当生成的流程图包含多个并列区域时：

预防措施（在 Phase 6.1 执行）：

绘制前先画布局草图，标注预估坐标
找出最高的列，以其结束 Y 为基准定位底部元素
底部元素 Y = 最高列结束 Y + 20px（最小间距）
画布高度 = 底部元素结束 Y + 30px（底部边距）

检查方法：

生成后检查各区域的 Y 坐标范围：
- 标题区：y=0 ~ y=80
- 内容区：y=100 ~ y=???（找最大值）
- 底部区：y=??? ~ y=???

如果 底部区起始Y < 内容区最大Y + 20，则存在重叠风险

修复方案：

增加画布高度
调整底部元素 Y 坐标到安全位置

约束与边界

仅输出静态 SVG 文件，不含 JavaScript 交互
不嵌入外部图片或字体文件（使用系统字体族）
SVG 代码必须是合法的 XML，可通过标准 SVG 验证
所有中文内容使用 UTF-8 编码
每个阶段不可省略，但中间产物可按需展示/隐藏

smart_flowchart_generator

Skill: 智能流程图生成器 (Smart Flowchart Generator)

META

技能概述