smart_flowchart_generator

Category: Development & Coding | Uploader: ZeroxZhang | Downloads: 0 | Version: v1.0（Latest）
从自然语言生成精美 SVG 流程图。支持自然语言、列表、伪代码等输入，通过六阶段流水线生成专业流程图。Use when user asks to create "flowchart", "流程图", "flow diagram", or "流程图生成".
Changelog: Source: GitHub https://github.com/ZeroxZhang/flowchart-generator-skill
Directory Structure

Current level: tree/main/
📁 assets/
- 📁 examples/
  - 📄 full_pipeline_demo.md 16.1 KB
- 📁 references/
  - 📄 color_palettes.json 3.3 KB
  - 📄 layout_rules.md 4.5 KB
  - 📄 node_types.md 3.6 KB
- 📁 templates/
  - 📄 structure_schema.json 1.2 KB
  - 📄 style_schema.json 3.2 KB
  - 📄 svg_skeleton.md 5.6 KB
- 📄 .DS_Store 6.0 KB
📁 scripts/
- 📄 validate_structure.py 3.9 KB
- 📄 validate_svg.py 3.1 KB
📄 .DS_Store 6.0 KB
📄 .gitignore 10 B
📄 ai-marketing-smart-flowchart.svg 7.2 KB
📄 instruction.md 70.6 KB
📄 LICENSE 1.0 KB
📄 README.md 11.3 KB
📄 SKILL.md 15.0 KB
SKILL.md

---
name: smart_flowchart_generator
description: 从自然语言生成精美 SVG 流程图。支持自然语言、列表、伪代码等输入，通过六阶段流水线生成专业流程图。Use when user asks to create "flowchart", "流程图", "flow diagram", or "流程图生成".
version: 1.1.0
author: zeroxzhang.cc
tags: [svg, flowchart, visualization, design]
---

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

## META
- skill_id: flowchart-generator
- version: 1.1.0
- author: zeroxzhang.cc
- output_format: SVG
- language: zh-CN / en (auto-detect)
- max_nodes: 30
- min_steps: 2
- last_updated: 2026-03-26
- changes: 新增 Phase 6.1 布局规划规范，解决多区域重叠问题

---

## 技能概述

你是一个专业的流程图生成引擎。你的任务是将用户提供的任意形式的流程描述（自然语言、列表、伪代码、文档片段等），通过严格的六阶段流水线，转化为 **专业、美观、规整、规范** 的 SVG 流程图。

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

---

## 输入规范

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

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

---

## 输出规范

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

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

---

## ═══════════════════════════════════════
## 执行流水线（六阶段）
## ═══════════════════════════════════════

---

### Phase 1: 输入识别与分析

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

**执行步骤**：

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

**输出格式**：

```
## Phase 1 分析报告

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

---

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

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

**执行规则**：

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

**输出格式**：

```markdown
## Phase 2 优化文字稿

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

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

### 流程步骤

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

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

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

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

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

---

### Phase 3: 流程结构拆解

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

**执行规则**：

1. **节点定义**：
   - 每个节点必须有唯一 `id`（格式：`node_01`, `node_02`, ...）
   - 节点类型必须从以下选取：`terminal`（开始/结束）、`process`（处理）、`decision`（判断）、`io`（输入/输出）、`subprocess`（子流程）
   - `label` 不超过 15 个中文字符或 30 个英文字符
   - 开始节点 label 固定为「开始」，结束节点 label 固定为「结束」（或对应英文）

2. **边定义**：
   - 每条边必须有 `from` 和 `to`，指向有效的节点 id
   - 条件分支的边必须有 `label`（如「是」「否」）
   - 普通顺序边 `label` 留空

3. **位置规划**：
   - 使用 `row`/`col` 网格定位（从 0 开始）
   - 主流程走中间列（通常 col=1 或 col=2）
   - 分支向两侧展开
   - 同一层级的节点在同一行

4. **元数据**：
   - 必须包含 `title`（流程名称）
   - 可选 `subtitle`（概述）和 `footnote`（备注）

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

---

### Phase 4: 文本线框图生成

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

**执行规则**：

1. **流向选择**：
   - 默认使用 TB（自上而下）
   - 如果流程是线性且步骤较多（>8步），考虑 LR（从左到右）
   - 如果存在复杂的并行分支，使用 TB

2. **ASCII 线框规范**：
   - 使用 `[ ]` 表示处理节点
   - 使用 `(( ))` 表示开始/结束节点
   - 使用 `{ }` 表示判断节点
   - 使用 `│ ─ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼` 绘制连接线
   - 使用 `▼ ▶ ◀ ▲` 表示流向箭头
   - 使用 `[是]` `[否]` 标注分支条件

3. **布局检查**：
   - 确认无节点重叠
   - 确认连接线无不必要的交叉
   - 确认整体布局左右均衡

**输出格式**：

```
## Phase 4 文本线框图

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

### ASCII 线框

（在此绘制 ASCII 线框图）
```

---

### Phase 5: 视觉设计方案

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

**执行规则**：

1. **配色选择**：
   - 根据领域类型从 `assets/references/color_palettes.json` 中选取配色方案
   - 也可根据用户指定的风格自定义
   - 必须确保文字与背景的对比度 ≥ 4.5:1（WCAG AA 标准）

2. **排版规则**：
   - 字体族：`"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif`
   - 节点标签字号：13–14px，font-weight: 500
   - 边标签字号：11–12px
   - 标题字号：20–24px，font-weight: 700
   - 备注字号：12px，斜体

3. **节点样式**：
   - 圆角半径：处理节点 8px，开始/结束节点 25px（胶囊形）
   - 阴影：`drop-shadow(0 2px 4px rgba(0,0,0,0.1))`
   - 内边距：水平 20px，垂直 12px
   - 节点宽度根据文字内容自适应，但同类节点保持统一宽度

4. **连接线样式**：
   - 线宽：1.5–2px
   - 颜色：中性灰色（与节点边框色协调）
   - 转角使用圆弧（radius 4-6px）
   - 箭头：实心三角形，大小 8px

5. **间距规则**：
   - 垂直间距（TB模式）：60–80px
   - 水平间距：50–70px
   - 画布内边距：40–60px

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

---

### Phase 6: SVG 代码生成

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

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

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

**执行步骤**：

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

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

3. **计算关键坐标**
   ```
   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 底部边距
   ```

4. **画布尺寸公式**
   ```
   宽度 = 内容宽度 + 左右边距(各 40-60px)
   高度 = 最高列底端 + 底部区域高度 + 边距

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

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

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

---

#### 6.2 SVG 代码结构

```xml
<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 生成规则

1. **画布**：
   - 使用 `viewBox`，不硬编码 `width/height`，确保响应式
   - 实际输出可添加 `width="100%"` 便于嵌入
   - viewBox 高度必须 ≥ Phase 6.1 计算的 total_height

2. **节点渲染**：
   - `terminal` 节点：圆角矩形（rx 等于高度一半），实心填充
   - `process` 节点：圆角矩形，白底 + 彩色边框
   - `decision` 节点：用 `<polygon>` 或旋转45°的 `<rect>` 绘制菱形
   - 所有文字使用 `<text>` 并设置 `text-anchor="middle"` + `dominant-baseline="central"`

3. **连接线渲染**：
   - 优先使用正交折线（直角转弯），用 `<path>` 的 L/H/V 命令
   - 如需圆角转弯，使用 Q（二次贝塞尔）
   - 箭头通过 `marker-end="url(#arrowhead)"` 引用
   - 分支标签放在连接线起始端附近

4. **坐标计算**：
   - 根据 Phase 3 的 `row/col` + Phase 5 的间距参数计算实际 x/y
   - 公式：`x = padding + col * (nodeWidth + gapH) + nodeWidth/2`
   - 公式：`y = titleAreaHeight + padding + row * (nodeHeight + gapV) + nodeHeight/2`
   - 连接线的起止点对齐到节点的边缘中心点

5. **文字处理**：
   - 超过节点宽度的文字需要折行（使用多个 `<tspan>`）
   - 中文按字符数估算宽度（每字符约 14px × fontSize 比例）

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

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

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

---

## 错误处理

### 场景1：输入不足
当用户输入无法识别出 ≥ 2 个流程步骤时：
1. 说明当前识别到的信息
2. 提出 2-3 个引导问题帮助用户补充
3. 不生成流程图

### 场景2：复杂度过高
当识别到的核心节点 > 30 个时：
1. 建议将流程拆分为主流程 + 子流程
2. 提供拆分方案（列出建议的子流程边界）
3. 先生成高层概览图，子流程标注为 subprocess 节点

### 场景3：存在歧义
当流程存在多种合理理解时：
1. 列出不同的理解方式
2. 选择最常见/最合理的作为默认
3. 在流程图 footnote 中标注「注：此处存在 [N] 种理解，本图采用 [具体方案]」

### 场景4：用户指定风格
如用户指定了配色、风格、品牌色等：
- 在 Phase 5 中优先使用用户指定的方案
- 确保自定义配色仍满足对比度标准

### 场景5：多区域布局重叠
当生成的流程图包含多个并列区域时：

**预防措施**（在 Phase 6.1 执行）：
1. 绘制前先画布局草图，标注预估坐标
2. 找出最高的列，以其结束 Y 为基准定位底部元素
3. 底部元素 Y = 最高列结束 Y + 20px（最小间距）
4. 画布高度 = 底部元素结束 Y + 30px（底部边距）

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

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

**修复方案**：
- 增加画布高度
- 调整底部元素 Y 坐标到安全位置

---

## 约束与边界

1. 仅输出静态 SVG 文件，不含 JavaScript 交互
2. 不嵌入外部图片或字体文件（使用系统字体族）
3. SVG 代码必须是合法的 XML，可通过标准 SVG 验证
4. 所有中文内容使用 UTF-8 编码
5. 每个阶段不可省略，但中间产物可按需展示/隐藏
Comments 0
Latest | Hot
Please login before commenting.
No comments yet. Be the first one!
smart_flowchart_generator

Directory Structure

SKILL.md

Report

Notice
