文章图解

把一段说明，变成一张讲得清的图。

你提供文章，Agent 选择流程、对比或层级结构，保留条件和原文依据。交付可以继续修改的图解。登录后免费领取完整安装包，在自己的 Codex 项目中使用。

可插入文章的 SVG 图解与可选 PNG。
可编辑 JSON、离线 HTML、逐项原文摘录与来源哈希。
修改一处后重新导出，保留之前的版本。

现已开放 · v1.0.0

登录后免费。

你想完成哪件事？

讲清一个流程

说明操作步骤与不同条件下的去向。

保留分支条件的流程图，箭头附原文依据。

比较几种方案

将文章里的两到三种方式放到同一维度比较。

每个单元可查来源的对比图，不捏造缺失信息。

整理层级关系

说明团队、模块或概念的归属关系。

可编辑结构图，保留原文中的职责与限制。

两种参加方式，未知信息也说清

真实输出 · 原创虚构示例

给它什么

原创虚构说明：现场可借纸质书，线上只提供讨论提纲；线上不录制，现场录像未规定。

怎么处理

按地点、报名、资料和录像四个维度整理；每个单元引用原文，未知信息保留为未知。

浏览全部输出示例

实际输出 · 中文对比图 — 原创读书会说明，明确区分“不录制”和“原文未规定”；来自包内工具。
实际输出 · 英文分支流程 — 虚构图书馆借阅流程，库存不足进入候补，没有补造候补转领取的箭头。
实际输出 · 中文组织结构 — 原创读书会分工，保留“不收集身份证号”的信息边界。
AI 概念示意 · 非实际输出 — Codex 生图制作的纸艺隐喻，用于解释文章到关系图的用途；安装包不生成这种纸艺照片。

从你的材料，到交付文件

读原文，选关系
识别步骤、分支、共同对比维度或父子关系。未说明的事实保留为未知，不随意补全。
排版并检查依据
运行本地工具生成图解和来源索引；打开真实画面，核对文字、箭头和原文含义。
改一处，另存新版
告诉 Agent 要改什么；更新输入与对应来源，再输出到新目录，旧图不会被覆盖。

把这项任务带到你的 Agent

先准备这些材料

准备有权使用的原文、读者和图解用途。无需自己编写 JSON：由 Agent 整理；源文会随交付保留，分享前检查敏感信息。

登录后获取安装包。
将整个文件夹解压到项目中： .agents/skills/article-diagram/SKILL.md (Codex) 或 .claude/skills/article-diagram/SKILL.md (Claude Code).
在该项目打开新对话，附上材料，将下方需求中的方括号替换为真实信息，先让 Agent 检查说明与依赖。

使用 article-diagram，先阅读安装包 SKILL.md 和 INSTALL.md。把我提供的[原文]整理成给[读者]看的流程图，用于[用途]。保留原文条件、例外与未知信息，每个节点和关系附逐字来源摘录。交付 SVG、离线 HTML、可编辑 JSON 和来源索引，打开真实图解核对文字与关系；如环境支持，再导出 PNG。缺少原文时先请我补充，不虚构依据。

安装与排错指引

得到第一版后，可以这样继续改

把原文里的“次日 16:00 归还”改成“次日 15:00 归还”，更新对应节点和依据，其余条件保持不变。

安装包交付什么

可插入文章的 SVG 图解与可选 PNG。
可编辑 JSON、离线 HTML、逐项原文摘录与来源哈希。

你需要另外准备什么

自己的 Codex 服务和 Node.js 24；生成 HTML/SVG 无 npm 依赖。
PNG 另需 Playwright 1.58.2 与 Chromium 或 Chrome。安装依赖需网络，运行可离线。

使用前须知

只给一个主题可以吗？

这款 Skill 解释你提供的材料。缺少原文时会请你补充，不把编出的事实当成来源。

能在网页里拖拽改图吗？

当前 HTML 用于阅读、查来源和下载。修改由 Agent 编辑 JSON 后重新生成；不是浏览器画图编辑器。

支持什么范围？

流程和结构最多 12 个节点、每层最多 4 个；对比为 2–3 列、最多 10 行。不支持反馈循环；过于复杂时拆成有明确范围的小图。

有来源就代表正确吗？

不代表。工具只能检查摘录匹配，Agent 仍需审阅是否断章取义、箭头反向或把相关性写成因果。

摘录匹配只证明原文中存在这些文字，不等于语义核验；Agent 仍须检查箭头与改写。首版不支持反馈循环，不是统计图表或浏览器绘图编辑器。模型费用另计。