# Sketch To Drawio

> 把位图草图（GPT/AI 生成或手绘扫描的论文框架图、方法图、流程图草稿）重绘为原生可编辑的 draw.io 学术矢量图，含开源图标检索、草图图标描摹、复杂插画裁剪高清化、归属与质量台账。Use when the user provides a raster draft/sketch (PNG/JPG of a framework diagram, method overview, or pipeline figure) to rebuild as an editable vector figure. 无草图、从零绘图时不要用本 skill（整图路由给 drawio-skill；按文字描述选配/生成图标路由给 icon-forge）。

- Skill: `lz1159435992/sketch-to-drawio` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add lz1159435992/sketch-to-drawio`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lz1159435992/sketch-to-drawio/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: lz1159435992 (https://skillmd.com/u/lz1159435992)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/lz1159435992/sketch-to-drawio

---


# Sketch to Drawio

以位图草图为**构图、模块和关系参考**，用原生 draw.io 形状、可编辑文本和独立 SVG 图标重绘学术论文插图。草图本身绝不作为背景或整图嵌入最终产物。

## 输入与输出

输入由用户指定或在工作区发现：

- 草图位图（PNG/JPG，必须）；
- 可选文字说明/spec 文件（提供正式文字、数据、配色等时以其为准）。

输出到用户指定目录，文件名按图名 slug 派生（下例 slug 为 `<fig>`）：

- `<fig>.drawio`：可编辑源文件（所有对象可编辑）；
- `<fig>.svg` / `<fig>.png`：最终导出（PNG 白底、适合论文/Word 插图的清晰度）；
- `<fig>-icon-attribution.md`：图标来源与处理清单；
- `<fig>-QC.md`：质量检查与待确认项；
- 中间图标文件放在用户指定的 reference 目录。

## 工作流

1. **读图分析**：识别模块、标题、箭头方向、容器层级；忽略草图中的文字/数字/公式/水印（除非 spec 提供，否则用占位符并记为待确认）。
2. **元素规划**：为每个图形元素确定功能语义，并先分类——**简单功能图标**（单一语义：车、文件、盾、搜索）还是**复杂插画/场景**（多元素、装饰性，如山路风景）——再按对应阶梯处理。
3. **原生重绘**：用 draw.io XML 重建全部模块、容器、连线、文本；布局从左到右或从上到下，阅读顺序明确。
4. **导出自检**：导出 PNG 预览并目检（裁切、重叠、错位、断线、箭头方向、字号、图标一致性、颜色可区分性）；纯布局问题直接改 XML 重导，直至通过。
5. **交付台账**：写出 attribution 与 QC 文件，并在最终回复中汇总全部 `needs_user_confirmation` 项。

## 图形元素处理优先级（每元素独立判定）

**简单功能图标**走 A→B→C：

- **A. 开源 SVG 优先**：默认统一 Lucide 单色线性风格；不足时检索 Iconify 开源图标集（医疗/设备类优先 mdi、fluent）。同图不混风格；记录库、名称、许可证、署名要求。检索与下载机制见 [references/icon-sourcing.md](references/icon-sourcing.md)，下载用 `scripts/fetch_icon.py`。
- **B. 找不到时描摹草图图标**：裁剪→清晰化（放大、降噪、去背景，不补造原图不存在的细节）→vtracer/Inkscape 转 SVG→优先按轮廓用几何形状重绘，无法重绘才插入独立 SVG（不栅格化）。工具缺失时直接降 C 并记录。判定与命令见 [references/icon-tracing.md](references/icon-tracing.md)。
- **C. 仍不可靠时保守通用形状**：不猜语义。数据→文件/圆柱；处理→圆角矩形/齿轮；系统→容器/云/服务器；人员→人物轮廓；输入/输出→方向箭头/文件框；完全不确定→无装饰圆角矩形+清晰文字标签；标题也不可靠→占位文本 `[需确认]`。全部记为待确认项，分类标准见 [references/qc.md](references/qc.md)。

**复杂插画/场景**走 A′→B′→C′→D′→E，两条原则：**风格一致性优先于语义匹配**；**忠实原图优先于重新构图**（重新构图是“混乱感”的主要来源）。逐级降级、最后才用保底：

- **A′. 同集组合插画（首选，有质量门槛）**：用与全图同一图标集的多个元素 + z-order 遮挡构图（如 Lucide `mountain-snow` 居后 + `tree-pine`×2 两侧 + `route` 居前），可用图内既有色板的 2–3 色做前后景分层。质量门槛：元素 ≤3 个、大小层级清晰、重叠克制；目标尺寸下仍显混乱时最多修订一轮即降级，不反复打磨。
- **B′. 原图裁剪 + 彩色描摹（"裁剪高清化"的矢量版）**：直接从草图裁下插画 → vtracer `--colormode color` 矢量化 → 色板映射后目检，保持全矢量、忠实原图构图。
- **C′. 原图裁剪 + 栅格高清化（装饰补丁允许栅格）**：裁剪 → 放大 2–4 倍 + 降噪 + 轻锐化（`scripts/embed_raster.py`）→ PNG 包进 SVG `<image>` 再 percent-encode 嵌入；只裁插画不裁文字，分辨率按显示尺寸 ×2–3 准备。
- **D′. 色板映射彩色集 / 原生形状组合**：选扁平几何彩色集 + 色板映射（渐变系 emoji 贴纸风为反模式），或用基础形状拼简化场景。
- **E. 保底**：单色线性图标组合（如 Lucide route+cloud-sun），再不行才降 C 通用形状。

详细判定、命令与许可表见 [references/illustrations.md](references/illustrations.md)。

图标和插画都是辅助元素，不得替代关键文字和逻辑关系。

## 学术图约束

- 白底、3–5 种低饱和配色、统一线宽/圆角/箭头样式；默认按 A4 页面宽度优化，缩小后标题与关键标签仍可读。
- 彩色插画每张图最多 1–2 处作视觉锚点，其余元素保持单色线性；同图不混风格对图标与插画同样适用，风格不一致进 QC。
- 中文论文注意 CJK 字体在导出端的可用性（缺字会变成方框，自检时必查）。

## 防虚构护栏

- 不得虚构研究流程、技术细节、变量、方法、结论或数值。
- 清晰化不得补造原图不存在的细节；无法识别就降 C，不生成可能错误的新图标。
- 凡语义判断置信度低、文字/数据缺失、风格被覆盖的地方，一律进 QC 待确认清单。

## 与其他 skill 的关系

draw.io XML 语法、形状检索、导出 CLI 机制与故障排查复用 **drawio-skill**（headless 导出用 `xvfb-run -a drawio --no-sandbox ...`；其 troubleshooting 覆盖 root/无显示等情形），本 skill 不重复这些机制。

无草图、按文字描述为元素选配或生成图标时路由给 **icon-forge**；其 A/B 路径复用本 skill 的 `references/icon-sourcing.md` 与 `scripts/fetch_icon.py`，C 路径（AI 生成）复用 `references/illustrations.md` 的风格硬约束与 `scripts/remap_svg_colors.py`。