By name: svg-book-illustrator homepage: https://github.com/cat-xierluo/legal-skills author: 杨卫薪律师（微信ywxlaw） version: "1.5.0" license: MIT description: 书籍/文章 SVG 配图生成工具，专注于架构图、流程图、层次图等专业技术配图。当用户需要为书籍章节或正式文章生成配图、创建架构图/流程图/层次图，或提到"章节配图"、"书籍插图"、"架构图"、"流程图"时使用此技能。
SVG Book Illustrator
为书籍章节和正式文章生成简洁专业的 SVG 技术配图。
本 Skill 生成静态 SVG，直接嵌入 Markdown 文件（
<svg>标签），风格为简洁专业、透明背景 + 内部模块多色柔和区分（v1.5.0），适合纸质出版。
快速开始
/svg-book-illustrator @path/to/chapter.md
核心工作流程
第一阶段：分析章节，规划插图
- 读取章节 Markdown 文件
- 如果
references/diagram-catalog.md有当前章节的预定义插图，匹配之 - 扫描章节内容，识别适合配图的位置：
- 架构描述处（"X 层"、"体系"、"架构"等）
- 流程描述处（"步骤"、"流程"、"阶段"等）
- 对比描述处（"vs"、"对比"、"前后"等）
- 层次描述处（"层级"、"分类"、"金字塔"等）
- 循环描述处（"循环"、"迭代"、"闭环"等）
- 生态/关系描述处（"生态"、"要素"、"关系"等）
- 在合适位置插入占位符
[[FIG:N:简要描述]]（N 从 1 开始编号） - 列出所有规划的插图（类型、位置、描述），除非用户明确要求先确认，否则继续生成 SVG
插图密度：每章「一节一张」为基准，数万字章节 6-8 张，宁精勿滥；纯 walkthrough / 总结节可省图避免冗余。密度指标：图/节 ≥ 0.7、图/万字 ≥ 0.8，低于判「偏少」并提示补图位置（详见第四阶段 + references/review-checklist.md）。
第二阶段：生成 SVG
完成插图规划后，逐张生成：
- 根据插图描述选择布局模板（flow / layer / matrix / hub / tree / cycle，或组合模板）
- 读取
references/layout-templates.md获取模板规范 - 按
references/style-guide.md的设计规范生成 SVG 代码 - 将
<svg>标签嵌入 Markdown，替换对应占位符 - 在 SVG 下方添加图注：
**图 N-X：图标题**
第三阶段：归档
生成完成后，提取所有 SVG 到独立文件：
python scripts/extract_svgs.py path/to/chapter.md --output output/figures/
第四阶段：审查与验收（必须过三道门禁）
生成 + 嵌入后，逐章过审查门禁，详见 references/review-checklist.md：
① 配图密度审查：图/节 ≥ 0.7、图/万字 ≥ 0.8；低于判「偏少」，列出可补图的小节。跨章均衡——相邻章密度不宜骤变（认知/入门篇图密度不应远低于方法/实战篇）。
② 图-正文论点一致性审查：每张图回溯所在小节，核对节点数 / 层级名 / 流程方向 / 对比维度 与正文表述一致；替换 mermaid / ASCII 图时原信息（节点、关系、标注）不丢失；图注准确概括图内容，不夸大不遗漏。
③ 视觉目检（多模态渲染后眼检）：SVG 渲染为 PNG（scripts/svg2png.js 或 rsvg-convert -w 720 -h 400）后，用多模态模型逐张查——文字不溢出容器、框不重叠（间距 ≥24px）、箭头落位方向正确、字号可读（节点≥16px 副≥12px）、黑白可辨、整体美观留白合理。发现问题回改 SVG 坐标，复检直到目检通过。
多模态生产提示：若环境支持图像理解，③ 必须真正"看"渲染图，不能只靠 xmllint / rsvg 无警告间接验证——语法通过 ≠ 布局美观，溢出/重叠/箭头错位只有肉眼（或多模态模型）能发现。
布局模板
8 种布局模板（6 种基础 + 2 种组合），详见 references/layout-templates.md。
| 模板 | 适用场景 | 典型元素数 |
|---|---|---|
| flow | 流程图、步骤图、管道图 | 3-5 个节点（水平≤4） |
| layer | 层次架构、分层堆叠 | 3-4 层 |
| matrix | 前后对比、并排比较 | 2 列 |
| hub | 中心辐射、生态关系 | 1 核心 + 4-8 外围 |
| tree | 层级结构、组织图、金字塔 | 3 层 |
| cycle | 循环流程、迭代闭环 | 4-6 个节点 |
| flow+matrix | 递进流程附带阶段对比 | 3-4 阶段 + 对比区 |
| flow+hub | 编排流程中节点展开 | 主流程 + 展开节点 |
设计规范
详见 references/style-guide.md。核心要点：
- 画布：720x400，透明背景（硬约束）——不画背景矩形、不设底色；安全边距 40px（基于 16开 115mm 通栏物理尺寸推算）。底色由书页/排版提供。
- 风格：简洁、专业、静态（无动画、无渐变、无滤镜、无 emoji）
- 颜色（v1.5.0 透明背景 + 内部模块多色版）：新生成图透明底，配色用于 SVG 内部不同模块 / 分支 / 方向 / 层级之间的多色柔和区分——颜色尽量多样（一图 4-6 种甚至更多柔和模块色）。从 8 组预定义调色板（P1 雾蓝系 / P2 浅青系 / P3 嫩绿系 / P4 暖米系 / P5 浅紫系 / P6 浅粉系 / P7 暖灰系 / P8 混合柔和系）选 1 组，组内 5-6 个柔和模块色按"模块 1 取色 1、模块 2 取色 2…"依次分配，相邻模块不同色。文字色统一深灰
#2D3436/#636E72保证可读。打印友好约束（文字 vs 所在模块填充色对比 ≥4.5:1 WCAG AA、相邻模块区分度 ≥10%、模块色明度 L*≥80、禁高饱和荧光、CMYK 不偏色、灰度差≥10%）。仅新生成图用新配色，main 上既有 34 张白底单色 SVG 保持稳定不回改。 - 颜色语法硬约束：颜色只用
fill/stroke属性内联——禁<style>块定义颜色、禁<svg>开标签写 font-family、禁 CSS 变量/class、禁画背景矩形（已验证的 Obsidian 渲染 + 透明背景硬约束，详见 style-guide.md §5.4）。 - 文字：继承渲染环境默认无衬线字体（PingFang SC / Microsoft YaHei 落在系统层），节点标签 18px 起（16开 115mm 通栏下物理 2.88mm = 8.2pt）
- 形状：圆角矩形（rx="6"）、简洁箭头、最小 24px 间距
- 印刷：黑白可辨，颜色不是唯一区分手段（黑白降级仍可辨是硬约束）
插图目录
references/diagram-catalog.md 定义插图目录格式和创建方法。
PNG 导出
出版社通常需要位图版本。使用 scripts/svg2png.js 将 SVG 转为高分辨率 PNG：
# 单张转换（默认 600 DPI）
node scripts/svg2png.js input.svg
# 指定输出文件和 DPI
node scripts/svg2png.js input.svg output.png 300
# 批量转换目录下所有 SVG
find figures/ -name "*.svg" -exec node scripts/svg2png.js {} \;
依赖：PNG 导出功能需要 Puppeteer 和 Chrome/Chromium。首次使用前运行：npm install puppeteer
印刷 DPI 建议：
- 300 DPI：最低印刷要求
- 600 DPI：推荐，清晰锐利
- 1200 DPI：线条图最高质量
成功标准
- 每张图只表达 1-2 个核心概念
- 架构图层次清晰，流程图逻辑通顺
- 风格简洁专业，无装饰性元素
- SVG 在 Markdown 预览中正确渲染（语法门禁：开标签 viewBox 720×400、无 font-family、无
<style>、颜色只用fill/stroke属性内联、无背景矩形、xmllint well-formed、rsvg 无警告） - 图注格式统一：图 N-X：标题
- 配图密度达标：图/节 ≥ 0.7、图/万字 ≥ 0.8
- 图-正文一致：节点/层级/方向/维度与正文论点吻合，替换 mermaid/ASCII 图信息无损
- 视觉目检通过：渲染后无溢出/重叠/箭头错位，字号可读、黑白可辨、美观
- 印刷友好：16开 115mm 通栏下文字 ≥8pt 清晰可读，黑白打印可辨，文字对比度 ≥4.5:1（WCAG AA），CMYK 转换不偏色
- 配色合规（v1.5.0）：新生成图透明背景（无画布底色矩形）；从调色板 8 组选 1 组，组内模块色用于内部模块多色柔和区分（一图 4-6 色）、相邻模块不同色；文字色统一深灰；颜色只用
fill/stroke属性内联；既有 34 张白底单色图保持稳定不回改
语法门禁（xmllint/rsvg）只是必要不充分条件——保证 SVG 合法，不保证图正确美观。密度 + 一致性 + 目检三道审查才是验收依据（
references/review-checklist.md）。