# Gracker Diagrams

> Generate architecture diagrams, Mermaid-to-image redraws, and technical infographics. Four modes: (1) Whiteboard architecture — Excalidraw-like hand-drawn visual abstracts with low-saturation pastel accents, thick black outlines, orthogonal arrows, and optional Perfetto-style timeline tracks. Trigger: 画图, 架构图, 系统图, 模块关系, Mermaid 转图, 流程图, 时序图, 白板图. (2) Macaron infographic — hand-drawn educational infographic on warm cream paper with pastel rounded cards, wavy arrows, cartoon icons, vertical layout, and optional bottom summary. Trigger: 信息图, infographic, 单页摘要, 竖屏图, 长图, 知识总结图, 框架图, Skill 概览图. (3) Gracker infographic — no card borders, high text density, background color zones with hand-drawn connecting lines, minimal icons, warm cream paper. Optimized for technical content with rich detail. Trigger: gracker图, 技术信息图, 调研图, 深度信息图, 技术长图. (4) Gracker Xiaohongshu infographic — same Gracker visual language, split into two compact social-network cards for mobile reading without zooming. Trigger: 小红书风格, 小红书图, xhs, 社交图, 双

- Skill: `gracker/gracker-diagrams` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add gracker/gracker-diagrams`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gracker/gracker-diagrams/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gracker (https://skillmd.com/u/gracker)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gracker/gracker-diagrams

---


# Gracker Diagrams

默认目标：**低压感、高解释力、强结构化**，视觉克制但信息扎实。采用“先结构化内容，再生成视觉 prompt，最后按需渲染”的流程，把风格固定成 Gracker 偏好的技术手绘风。

## 强制执行原则

不要把原文直接丢给图片生成/绘图工具，也不要临场手写最终 prompt。必须先按流程产出中间文件：

1. `source.md`：保存原始输入或原文摘录
2. `analysis.md`：分析信息结构和取舍依据
3. `structured-content.md`：由 Skill 决定哪些内容进入视觉成品
4. `copy.md`：对所有可见标题、模块名、标签、脚注做图前文案把关
5. `prompts/infographic.md`：基于对应 prompt template 生成最终视觉 prompt

只有完成以上文件后，才能进入交付或可选渲染。内容很长时先按章节拆页；单页内再筛选高价值信息。禁止把多章压进一张总览海报，也禁止用临场 prompt 任意压缩。

## 分页默认规则

除非用户明确说「只要一张图 / 单页 / 压成一张」，**信息图默认按内容章节分页，一章一图**，把该章讲细。不要等用户每次再说一遍。

**适用**

- 风格 B 马卡龙、风格 C Gracker 信息图
- 视频、文章、调研、课程、长笔记等「把一份材料画出来」的任务
- 风格 D 小红书：用户说「双图」才固定 2 张；否则同样按章节出卡，每张独立可读

**不要硬套**

- 用户只要一张架构图、一张 Mermaid 转图、或一个单独概念
- 风格 A 白板架构图默认仍是一张；只有系统大到一张看不清主路径时，才按子系统/分层拆页

**怎么切**

1. 优先用原文官方章节、时间轴、小标题
2. 没有官方章节时，按主题转折切，不要发明额外章
3. 过薄的钩子/片头可并入下一章；不要为了凑页数再切一刀
4. `analysis.md` 必须写清：切了几张、每张对应哪一章、为什么合并
5. `copy.md` 按 `Card 01` … `Card NN` 列出每页可见文字
6. prompt 写成 `prompts/infographic-01.md` … `infographic-NN.md`；成图 `*-01.png` … `*-NN.png`

**禁止**

- 为了省时间把多章压成一张
- 用「内容太多所以先摘要」代替分页
- 多图画完只交付第一张

## 图前文案把关

生成 prompt 之前，必须先把 `structured-content.md` 转成 `copy.md`。`copy.md` 是最终图上可见文字的准入层，不能把分析语、编辑语或 AI 味句子直接送进图片生成。

文案把关只抽取 `gracker-writing` 的核心原则，不依赖 `gracker-writing` skill：

- 准确：所有标题、数字、术语和判断都要能回到 `source.md`、`analysis.md` 或引用材料；不补不存在的数据和结论。
- 有用：每个标题、模块名、列表项都要自带信息增量。只剩名词或口号仍能成立的文案不合格。
- 易读：短标题负责概括本页任务，正文标签负责交代证据、条件和边界；不要用长句当标题。
- 标题自己会说话：主标题要说明本页在解决什么问题，例如 `已确认的泄露范围`、`还没坐实的爆点`；避免 `发生了什么`、`为什么重要`、`别把推测当结论` 这类泛标题。
- 判断必须带边界：涉及传闻、媒体报道、样本核验、推断、风险时，必须在同屏写清口径。
- 默认写成内容陈述：图面用于说明原始材料里的事实、结构、机制、证据、边界和影响；除非用户明确要求写作建议、传播建议或发布建议，否则不要把任何一页写成“如何表达 / 不要怎么写 / 推荐表述”的建议清单。
- 去掉编辑过程感：不出现 `这一版`、`按要求`、`这里要讲`、`下面来看`、`先别急着`、`真正的`、`值得注意`、`核心在于` 等元叙述或填充词。
- 避免反差口号：不使用 `不是 X，而是 Y`、`并不是 X，而是 Y`、`不只是 X，还 Y` 作为标题或底部总结。
- 列表不是目录：每个列表项用 `对象 + 判断/口径/影响` 的结构，例如 `黑客声称 630GB：媒体只做样本核验`，不要只写 `泄露规模`。
- 图文优先：同一意思不要在系列名、主标题、副标题、模块标题里重复；标题层级负责分工，不负责反复喊同一句话。

`copy.md` 建议包含：

```text
系列名（可选，XHS 默认不显示）:
Card 01:
- 页码:
- 主标题:
- 副标题（可选，XHS 默认不显示）:
- 模块:
- 标签:
- 脚注:
Card 02:
- 页码:
- 主标题:
- 副标题（可选，XHS 默认不显示）:
- 模块:
- 标签:
- 脚注:
文案自检:
- 是否有重复标题:
- 是否有泛标题:
- 是否有无依据判断:
- 是否有 AI 味/编辑语:
```

## 渲染硬约束

如果用户要求“画图 / 出图 / 渲染 / 生成 PNG / Mermaid 转图”，最终成品必须调用 `image_generate`，使用当前 Hermes 图像配置的 GPT Image 2（`image_gen.provider: fal`, `image_gen.model: fal-ai/gpt-image-2`）。`prompts/infographic.md` 只是中间产物，不是最终交付图。

禁止用本地 HTML、SVG、Mermaid 截图、浏览器截图、ASCII 或低质本地生成代替最终图片。缺少 GPT Image 2 后端凭证时，明确报告缺失配置，不要降级糊弄。

## 风格路由

根据用户意图选择风格：

| 风格 | 触发词 | 适用场景 |
|------|--------|----------|
| **白板架构图**（默认） | 架构图、系统图、模块关系、Mermaid 转图、流程图、时序图、白板图、画图 | 系统拆解、组件关系、渲染管线、请求链路 |
| **马卡龙信息图** | 信息图、infographic、单页摘要、竖屏图、长图、知识总结图、框架图、Skill 概览图 | 知识体系总结、方法论概览、Skill 框架、文章摘要 |
| **Gracker 信息图** | gracker图、技术信息图、调研图、深度信息图、技术长图 | 技术调研摘要、深度内容可视化、高文字密度技术长图 |
| **Gracker 小红书风格** | 小红书风格、小红书图、xhs、社交图、双图、轮播图 | 把高密度 Gracker 长图拆成两张移动端可读的社交网络图片 |

判断不了的默认走白板架构图。

---

## 风格 A：白板架构图（默认）

先读：
- `references/style-guide.md`
- `references/prompt-template.md`
- `references/quality-checklist.md`

## 输出流程

### 1. 建立本次工作目录

手动创建：

```text
<root>/<slug>/
├── source.md
├── analysis.md
├── structured-content.md
├── copy.md
├── prompts/
│   ├── infographic-01.md   # 多章则 01..NN；用户只要一张图时可用 infographic.md
│   └── infographic-02.md
└── output/
    └── diagram-01.png  # 可选：只有实际渲染后才需要；多章编号
```

如果用户已经给了固定目录，直接用用户目录，不额外新建层级。

### 2. 保存原始内容

把原始输入按原样写到 `source.md`。

来源可以是：
- Mermaid
- Markdown 正文
- 文章段落
- 已有图片的结构描述
- 手工列出的模块/关系/步骤

规则：
- 不补新信息
- 不改事实
- 只做结构整理

### 3. 分析信息结构

在 `analysis.md` 里只回答 5 件事：
1. 图的目标（一句话）
2. 内容形状（顺序 / 中心-辐射 / 分层 / 拆解 / 对比）
3. 主元素 3-7 个
4. 次级标注有哪些
5. 哪些地方适合加 Perfetto-style tracks（如果有时间、阶段、等待、并行）

### 4. 生成结构化内容

把图整理成视觉可消费的模块，写到 `structured-content.md`。

格式尽量稳定：
- 标题
- 一句话摘要
- 主模块列表
- 连接关系
- 辅助标注
- 图例/说明
- 文案标签清单

### 5. 文案把关

根据 `structured-content.md` 生成 `copy.md`，只保留能进入图上的可见文字。所有标题、模块名、标签、脚注都要经过“准确 / 有用 / 易读 / 有边界”检查。

### 6. 选布局

根据内容形状选择：
- 顺序流程 → `linear-progression`
- 中心系统 + 周边依赖 → `hub-spoke`
- 系统组件拆解 → `structural-breakdown`
- 分层机制 → `hierarchical-layers`
- 高密度总览 → `dense-modules`

除非用户指定，否则优先 **可解释性**，不是视觉花活。

### 7. 生成 prompt

基于 `references/prompt-template.md` 生成 `prompts/infographic.md`。

风格硬约束：
- 白底或浅米色纸张底
- 粗黑描边
- 圆角模块
- 低饱和浅色边框分区
- 简化黑白图标
- 正交箭头
- 留白充足
- 手绘/白板精修感
- 如果有时间、阶段、并发，加入 Perfetto-style 横向 tracks 或 timeline bars

### 8. 交付或可选渲染

默认交付 `source.md`、`analysis.md`、`structured-content.md`、`copy.md` 和 `prompts/infographic.md`。如果用户要求成图，且当前运行环境提供图片生成、绘图、浏览器渲染或设计工具，可以使用可用工具渲染；不得在 Skill 中固定模型、供应商或工具名。

建议输出约束：
- `aspectRatio`: `16:9`（默认，横屏）
- `filename`: `<slug>.png`

### 9. 验收

用视觉工具检查结果是否满足：
- 一眼能看懂主路径
- 不是 corporate PPT 风
- 不是写实海报风
- 不是卡通卖萌风
- 线条粗、结构清、颜色轻
- 如果有时序/阶段，Perfetto-style tracks 真的出现了

不满足就改 prompt，再重试 1 次。不要无止境重抽。

## Mermaid 转图片的额外规则

如果原始输入是 Mermaid：
- **保留 Mermaid 源码**
- 如有可用渲染能力，同时生成一张展示版图片；否则交付展示版 prompt
- 如果需要精确版，再补一张 SVG 或 Mermaid 原生渲染版
- 文档里推荐顺序：展示版 → 精确版 → Mermaid 源码

---

## 风格 B：马卡龙信息图

先读：
- `references/macaron-style-guide.md`
- `references/macaron-prompt-template.md`

### 输出流程

与风格 A 共享步骤 1-5（建目录 → 保存原始内容 → 分析信息结构 → 生成结构化内容 → 文案把关），但后续步骤有差异：

#### 6. 选布局（马卡龙适配）

马卡龙信息图的布局选择逻辑：
- **默认按章节拆页**，一章一图；用户明确只要一张图时才做单页
- 竖屏优先（`1024x1536` 或 `768x1024`）
- 顺序流程 / 逐步展开 → 纵向箭头串联
- 对比 / 优缺点 → 左右分栏卡片
- 组成 / 要素 → 并列马卡龙卡片
- 层级 / 质检体系 → 嵌套或阶梯式
- 循环 / 迭代 → 环形
- 多模块总览 → 卡片矩阵 + 连接线

#### 7. 生成 prompt

基于 `references/macaron-prompt-template.md` 生成。

核心风格硬约束（已在模板中，不需重复）：
- 暖奶油纸底 #F5F0E8
- 马卡龙色圆角卡片，不完全填满轮廓
- 手绘波浪箭头
- 简笔画卡通 + 涂鸦装饰
- 粗体大号手绘字标题居中
- 底部总结可选；如果使用，必须是正向短句，禁用“不是 X，而是 Y”式反差句

#### 8. 交付或可选渲染

默认交付 prompt pack。若用户要求成图，且当前运行环境提供图片生成或设计工具，可以使用可用工具渲染；不得在 Skill 中固定模型、供应商或工具名。

建议输出约束：
- `size`: `1024x1536`
- `filename`: `<slug>-macaron.png`

#### 9. 验收

- 一眼能看懂信息结构
- 马卡龙色块出现且不完全填满轮廓
- 有手绘抖动感
- 有涂鸦装饰（星星、下划线、小箭头）
- 如有底部总结，必须是正向短句，且未使用“不是 X，而是 Y”式反差句
- 竖屏比例
- 不是白板架构图风格

不满足就改 prompt，重试 1 次。

---

## 风格 C：Gracker 信息图

先读：
- `references/gracker-style-guide.md`
- `references/gracker-prompt-template.md`

### 输出流程

与风格 A 共享步骤 1-5（建目录 → 保存原始内容 → 分析信息结构 → 生成结构化内容 → 文案把关），但后续步骤有差异：

#### 6. 选布局（Gracker 适配）

- 竖屏优先（`1024x1536`）
- **默认按章节拆页**，一章一图；只有用户明确只要一张图时才做单页长图
- 高密度纵向布局，模块间手绘线条连接递进
- 背景色自然区分，不要卡片框
- 单页内内容多时用编号区块组织，不要靠再压一章进来换密度

#### 7. 生成 prompt

基于 `references/gracker-prompt-template.md` 生成。

核心风格硬约束（已在模板中，不需重复）：
- 暖奶油纸底 #F5F0E8
- 不要卡片框，背景色自然过渡
- 文字密度优先，图标克制
- 手绘线条和波浪箭头连接
- 底部总结可选；如果使用，必须是正向短句，禁用“不是 X，而是 Y”式反差句

#### 8. 交付或可选渲染

默认交付 prompt pack。若用户要求成图，且当前运行环境提供图片生成或设计工具，可以使用可用工具渲染；不得在 Skill 中固定模型、供应商或工具名。

建议输出约束：
- `size`: `1024x1536`
- `filename`: `<slug>-gracker-01.png` … `<slug>-gracker-NN.png`；用户只要一张图时才用 `<slug>-gracker.png`

#### 9. 验收

- 一眼能看懂信息结构
- 没有卡片框、气泡框、虚线框
- 背景色自然过渡区分模块
- 文字密度高，技术细节保留完整
- 有手绘线条和波浪箭头连接
- 图标少，文字为主
- 如有底部总结，必须是正向短句，且未使用“不是 X，而是 Y”式反差句
- 竖屏比例

不满足就改 prompt，重试 1 次。

---

## 风格 D：Gracker 小红书风格

先读：
- `references/xiaohongshu-style-guide.md`
- `references/xiaohongshu-prompt-template.md`

### 输出流程

与风格 A 共享步骤 1-5（建目录 → 保存原始内容 → 分析信息结构 → 生成结构化内容 → 文案把关），但后续步骤有差异：

#### 6. 选布局（小红书适配）

- 用户说「双图」时拆成两张连续图片：`01/02` 和 `02/02`
- 用户没说双图时，按内容章节出卡：`01/NN` … `NN/NN`，不要先压成 2 张
- 单张优先社交网络竖图（建议 `1080x1440`；内容确实密时可在 `1080x1440` 到 `1200x1600` 之间轻微放宽），整体仍接近 3:4，禁止再做超长图
- 两张图标题必须有明确逻辑：编号、上下篇、好消息/市场担忧、结论/验证点等
- 标题体系固定为“统一页码角标 + 每张不同主标题”；默认只显示一个主标题，不显示小系列名和副标题
- 页码角标必须在两张图中使用同一位置、颜色、形状、字号和手绘风格，只允许页码文字从 `01/02` 变为 `02/02`
- 两张图主标题必须各自承担不同信息功能，避免重复喊同一句标题；主标题字号、字重和留白节奏必须一致
- 来源、口径或限制说明需要出现时，放到正文小标注、脚注或来源行里，不作为第二标题或副标题
- 信息不缩水：把同一主题的完整内容分配到两张图，而不是删掉细节
- 每张图都要独立可读：保留主题标题、页码、关键来源或限制说明
- 默认密度要接近 Gracker 长图：每张通常 6-8 个信息区，每个信息区 2-4 条短句或标签；优先压缩图标、装饰、标题留白和边距，不要用大留白换取“干净”
- 密度守恒：小红书适配只能改变排版、字号、分栏和文案压缩方式，不能把 `copy.md` 里的模块删成低密度摘要。每张图至少保留本页模块的 80% 可见信息，关键事实、原因链、边界、来源口径和行动点不能因为“手机可读”被删掉。
- 如果画面放不下，处理顺序是：缩短句子 → 增加分栏/编号/侧栏 → 减少图标和装饰 → 放宽到 `1200x1600` 或 `1024x1536`；禁止先减少到 3-4 个大块。
- 小红书风格的“可读”不是低密度，而是字号、行距、分组和层级更适合手机

#### 7. 生成 prompt

基于 `references/xiaohongshu-prompt-template.md` 生成。

必须在 `prompts/infographic.md` 中写完整双图 prompt pack；需要更细时可额外写：
- `prompts/xiaohongshu-01.md`
- `prompts/xiaohongshu-02.md`

核心风格硬约束（已在模板中，不需重复）：
- 继承 Gracker 信息图：暖奶油纸底、自然色块、无卡片框、少图标、文字优先
- 两张图是一组轮播，而不是把长图机械裁成两半
- 单张文字密度仍然高，但正文必须比长图更大、更易读；可读性靠分组、字号层级、短标签和分栏实现，不靠删掉信息实现
- 每张图承载完整结构的一半左右，保留口径、证据、判断和边界，避免用户在小红书上手动放大
- prompt 必须使用 `copy.md` 里的最终可见文案，不要把 `analysis.md` 中的分析句直接搬进图上

#### 8. 交付或可选渲染

默认交付 prompt pack。若用户要求成图，必须渲染两张最终图片；不要只交付第一张。

建议输出约束：
- `size`: `1080x1440`；信息密度较高时可放宽到接近 3:4 的 `1200x1600`
- `filenames`: `<slug>-xhs-01.png`, `<slug>-xhs-02.png`

#### 9. 验收

- 两张图同一视觉系统，标题逻辑清楚，页码清楚
- 页码只出现一次，作为角标或页眉标记；主标题里不得重复页码
- 页码角标同款同位；不能一张用红色椭圆、另一张用紫色色块
- 两张图主标题不重复，应该形成“事实 / 原因”“证据口径 / 风险边界”“利好 / 市场追问”等承接关系
- 两张图默认只显示一个主标题；不能出现“小系列名 + 主标题 + 副标题”的重标题堆叠
- 两张图主标题字号、字重、位置和顶部留白一致
- 单张图不是长图，移动端无需放大即可阅读主要文字，但不能为了显得清爽牺牲关键事实
- 信息密度足够：每张通常 6-8 个信息区，关键数字、来源口径、因果链、限制条件都在图上
- 信息密度守恒：每张至少保留本页模块的 80% 可见信息；不能只留下标题、图标和 3-4 条口号式摘要
- 文案通过 `copy.md` 自检：没有泛标题、重复标题、编辑语、无依据判断、反差口号和 AI 味填充句
- 两张合起来覆盖原始结构和关键细节，没有为了排版删掉核心内容
- 没有卡片框、气泡框、虚线框
- 背景色自然过渡区分模块
- 图标少，文字为主
- 如有底部总结，必须是正向短句，且未使用“不是 X，而是 Y”式反差句
- 需要重试时最多重试 1 次，并明确改动目标

以下情况不要硬套：
- 数据图表、折线图、柱状图，用 vega / data visualization 工具
- UML、ER 这类严格工程图，优先 mermaid / graphviz
- 只想要快速可维护，不关心视觉，直接 mermaid

## 输出总结格式

最终汇报只说：
- 图名
- 选用布局
- prompt pack 路径
- 成图路径（如已渲染）
- 是否保留 Mermaid/SVG
- 是否通过一轮视觉验收（如已渲染）