企业官网建设流程全解析

Diagram Design导入draw.io：把旧图表一键重绘成编辑级质量

【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design

draw.io（diagrams.net）几乎是技术团队画架构图的默认工具，但它的默认输出——手拖出来的坐标、六种马卡龙色、对角线乱飞的连接线——放进正式文档、博客和幻灯片里，总显得不够专业。Diagram Design 这个开源项目为 Claude Code 提供了一键「draw.io导入」能力：它不是简单的格式转换，而是读懂源图里的组件、关系和分组，再按编辑级设计系统整体重绘，输出自包含的 HTML + SVG 图表。下面这篇教程，带你快速上手这个 draw.io 重绘功能。

上图就是真实的导入效果：一份 12 节点的 draw.io 文件，以balanced细节重绘成适合博客文章的样子——源图的六种马卡龙色变成了一种强调色，手拖的坐标变成了整齐的 4px 网格。

为什么是「重绘」而不是「转换」？

很多工具做的是「转换」：把 draw.io 的坐标、颜色、字体原样搬到新格式里，本质只是换了个皮肤。Diagram Design 的 draw.io 导入走的是另一条路——重绘：

• 丢弃源坐标：draw.io 里节点都是手拖的，落在奇数像素上；重绘后在 4px 网格上重新布局，左右或上下主流向清晰、分区对齐、间距均匀。
• 丢弃源配色：源图的填充色只是「角色信号」，重绘时映射到语义角色——蓝色盒子是后端服务、绿色是主路径、红色是失败风险，最终输出统一为「一种强调色 + 墨色渐变」的编辑级配色。
• 重排所有连接线：draw.io 的斜线连接器全部改成圆角正交折线，出线点扇形排布、互不重叠，彻底告别「线团」。
• 保留的是内容：组件、关系、分组、流向这些真正有价值的信息，一个都不丢。

一键开始：draw.io 导入的两种最快启动方式

在 Claude Code（或 Codex、Pi）里，你只需要两种方式之一：

方式一：斜杠命令。直接调用项目自带的导入命令：

/diagram-design:import platform.drawio /diagram-design:import platform.drawio --size=slide-16x9 --detail=simplified --audience=executive /diagram-design:import platform.drawio --detail=faithful --format=png --page=all

命令定义见 commands/import-drawio.md。

方式二：自然语言。直接说一句人话，Agent 会自动帮你完成：

"redraw this drawio file for my deck" "把这个 draw.io 图表重绘得正式一点"

draw.io 导入支持哪些文件格式？

无论你的源文件是哪种形态，都能直接喂给导入功能：

多页文件也支持：默认取第 0 页，用--page=all可以一页一个 HTML 输出，每页独立判断图表类型。完整的格式与边界情况说明见 import-drawio.md。

四个旋钮：让重绘结果精确匹配使用场景

同一个 draw.io 源文件，可以重绘成三种完全不同的图表——关键在四个可调参数：

详细规格见 output-spec.md。

导入流程内部是如何工作的？

整个 draw.io 导入有清晰的六步管线：

1. 抽取中间表示（IR）：先运行drawio_extract.py，把 draw.io 文件解码、压平成一个结构化的 Markdown 摘要——节点、边、绝对坐标、形状类别、容器、环路、枢纽度一应俱全。绝不直接读原始 XML。
2. 设定四个旋钮：确定格式、尺寸、细节与受众。
3. 选择图表类型：根据摘要里的形状词汇自动推断——swimlane容器是泳道图、rhombus菱形加 yes/no 边是流程图、icon:aws图标族是架构图……共 27 种类型可选，也可以--type强制指定。
4. 构建语义模型：提炼一句话核心故事，重写标签（svc-auth-prod-v2变成Auth Service），裁剪布局已隐含的冗余边。
5. 重绘：在 4px 网格上从零布局，应用设计系统，重排全部连接线。
6. 交付：写出自包含 HTML，再按需导出 SVG / PNG，并附上 fidelity ledger（保真清单）。

类型选择与重绘规则分散在各类型参考文档中，例如 type-architecture.md、type-flowchart.md，可随时查阅。

用 fidelity ledger 追踪每次重绘的取舍

重绘不是无损操作，所以每次导入结束都会输出一份保真清单，告诉你哪些内容被合并、折叠或删除了：

Detail: balanced · 12 source nodes → 8 drawn Collapsed: "Token valid?" decision → edge label on Gateway → Auth Dropped: 1 sticky note ("legacy path, to be retired") — unconnected in source Kept in full: the request path (Web/Mobile → Gateway → Orders → Postgres)

你熟悉源图，自然会发现删了什么——清单让你对每一次取舍都心里有数。

重绘后的质量到底长什么样？

下面这张架构图是重绘体系下的常规水准：分区清晰（EDGE / CORE SERVICES / DATA）、一个焦点节点（橙色 API Gateway）、正交连接线、等宽字体呈现技术细节。

你可以直接打开项目自带的导入示例 example-import-drawio.html 在浏览器里查看成品，完整设计系统规范见 SKILL.md。

立即上手：clone 仓库开始体验

想亲自试试 draw.io 导入？克隆仓库后，把任意.drawio文件丢给 Claude Code，一句话即可完成重绘：

git clone https://gitcode.com/GitHub_Trending/di/diagram-design

把.drawio文件喂给导入命令，几分钟内你就能拿到一份可以直接进文档、上幻灯片的编辑级图表——从此告别「手动画图半小时，改了十版还是丑」的尴尬。🎨

【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design