陶胖子矢量图生成技能
把一堆并列要点变成一张专业结构图，一次产出两份东西：
- 透明背景的 SVG 矢量图 —— 可直接插进 PPT、Word、网页，任意放大不失真，没有白底遮挡。
- PPT 原生可编辑矢量图 —— 不是插入图片，而是用 PowerPoint 自身的形状（矩形、圆、自由曲线、连接符、文本框）一比一重画。生成后每个色块可选中、可改色、可改字、右键「编辑顶点」可改形状。
两种输出由同一份中间描述（spec）驱动，几何位置完全一致。
核心原则
- SVG 绝不铺底色：整个画布不能画背景矩形，否则「透明背景」失效。
- PPT 绝不插图片：一律用原生形状，否则不可编辑。
- 一页一图：一张图输出一个 SVG 文件、PPT 里占一页。
- 多样式不重样：同一批图要给不同版式和配色，避免 5 张图长得一模一样。
工作流程
第 1 步：把输入整理成 spec
输入可能是三种形态，统一先变成一份 spec（JSON）：
| 输入 | 处理方式 |
|---|---|
| 文字（用户直接给的要点、粘贴的提纲） | 直接按语义拆成条目，写成 spec |
| PPT 文件 | 先跑 scripts/extract_pptx.py <file.pptx> 拿到每页文本草稿，再自己复核分组后写成 spec |
| 截图 / 图片 | 用 Read 工具读图识别文字，或调用 tesseract-image-ocr 技能做 OCR，再整理成 spec |
extract_pptx.py 的输出里 raw 是该页全部文本（按从上到下、从左到右排序），draft 只是机器初猜，以 raw 为准自行分组。
第 2 步：选版式和配色
- 不确定就写
"style": "auto"，脚本按中文关键词自动推荐（流程/步骤→timeline，举措/改革→steps，定位/方向→radial…）。 - 一批多张图时必须显式指定不同 style，保证不重样。
第 3 步：生成
# 只出 SVG
python scripts/gen_svg.py --spec spec.json --out-dir 输出目录 --name 前缀
# 只出 PPT（可编辑矢量）
python scripts/gen_pptx.py --spec spec.json --out 输出.pptx --ratio 16:9
# 追加到已有 PPT 后面
python scripts/gen_pptx.py --spec spec.json --out 输出.pptx --base 原文件.pptx
Python 用隔离环境的解释器（Windows 下是 Scripts/python.exe，不是 bin/）：
C:/Users/Administrator/.workbuddy/binaries/python/envs/default/Scripts/python.exe，需要 python-pptx。
第 4 步：自检（可选但推荐）
python scripts/render_check.py --svg-dir 输出目录 --out-dir 预览目录
用本机 Chrome/Edge 无头模式把每张 SVG 铺在棋盘格背景上截图，肉眼确认：透明是否真的透明、文字有没有重叠或溢出、颜色是否协调。发现问题改 spec 或改 layouts.py 后重跑。
spec 格式
最小可用：
{
"title": "建设的三个主攻方向",
"style": "radial",
"palette": "navy-gold",
"items": [
{"n": "1", "title": "面向现代传媒行业", "sub": "是学校发展的主攻方向。"},
{"n": "2", "title": "培养卓越传媒人才", "sub": "是学校发展的主责主业。"},
{"n": "3", "title": "服务国家和浙江战略", "sub": "是学校办学的价值归宿。"}
]
}
批量多张图用 {"diagrams": [ {…}, {…} ]}。
完整字段、items 写法、四象限/时间轴的特殊字段见 references/spec-format.md。
14 种版式速查
| style | 版式 | 适合的内容 | 条目建议 |
|---|---|---|---|
radial |
中心放射 | 一个中心 + 若干并列方向、定位 | 3–5 |
chevron |
阶梯递进（箭头横排） | 有先后顺序的阶段、路径 | 3–5 |
tree |
自上而下树形 | 总—分结构、任务分解 | 3–4 组，可带子项 |
donut |
环形占比 / 环形要点 | 抓手、维度、评价构成 | 4–6 |
steps |
台阶上升 | 递进举措、改革任务 | 3–5 |
pyramid |
金字塔 | 层级、基础到顶端 | 3–5 |
matrix |
四象限矩阵 | 二维分类（需 axes） |
4 |
timeline |
时间轴 | 时间节点、推进计划 | 3–6 |
compare |
双栏对比 | 十三五 vs 十四五、前后对比 | 任意行数 |
cycle |
闭环循环 | PDCA、持续改进、迭代 | 3–5 |
funnel |
漏斗 | 层层筛选、转化、留存 | 3–5 |
venn |
韦恩交集圆 | 产教融合、三位一体、交叉点 | 2–3 圈 |
cards |
卡片网格 | 6–9 条并列要点平铺 | 6–9 |
org |
组织架构 | 隶属、下属、汇报关系 | 3–5 个部门 |
图例与详细选型建议见 references/styles.md。
配色
11 套：navy-gold（藏青+金）、scholar（学术暖灰）、teal-amber（青+琥珀）、forest（森林绿）、indigo-rise（靛蓝渐变）、burgundy（酒红）、steel（钢灰蓝）、royal（宝蓝）、sage（鼠尾草绿）、sunset（暖褐橙）、copper（铜金）。
每个 style 有默认配色且互不相同（venn/cards/org 与其它版式各有一对共享，但因几何差异大，实际不撞）。不指定 palette 时自动套用。想完全自定义就传 colors（5 个十六进制色）+ ink（文字色）+ accent（点缀色）。
常见坑
build_freeform()要传两个独立整数，不能传元组。- python-pptx 1.0.2 的
FreeformBuilder没有add_curve，圆弧只能用多段折线逼近（30 段已足够平滑，仍是矢量）。 - PPT 里中文要同时设置
run.font.name和注入<a:ea typeface="…"/>，否则中文字形可能不对。 - Chrome 无头截图必须给绝对路径，否则图片会被写进 Chrome 安装目录。
更多排错见 references/pitfalls.md。
文件结构
taopangzi-vector-diagrams/
├── SKILL.md 本文件
├── README.md 技能介绍与使用说明（面向人阅读）
├── scripts/
│ ├── palettes.py 11 套配色
│ ├── prims.py 中间图元定义（两种渲染器共用）
│ ├── layouts.py 14 种版式 + 自动选型
│ ├── gen_svg.py spec → 透明背景 SVG
│ ├── gen_pptx.py spec → 可编辑矢量 PPT
│ ├── extract_pptx.py PPT → spec 草稿
│ └── render_check.py Chrome 无头渲染自检
├── references/
│ ├── spec-format.md spec 字段全解
│ ├── styles.md 版式图例与选型
│ └── pitfalls.md 排错清单
└── assets/examples/
├── ai-5diagrams.json 真实案例：5 张图 5 种版式
└── all-14-styles.json 14 种版式的示例数据
