# Make Infographic

> 把信息、数据、规划、流程、知识等内容转化为家长/客户能看懂的可视化图像（信息图、流程图、脑图/思维导图、关系图、知识图谱、海报），以自包含 HTML 文件呈现，所有公式用 LaTeX 编写并实时渲染，支持一键导出高清 PNG。当用户说"做成信息图/可视化/图片/海报""画个流程图/脑图/思维导图/关系图""把这份内容做成图给家长/客户看"，或任何把内容可视化成图的意图时，必须使用本技能，即使用户没明说"信息图"二字。

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

---


# 生成可视化信息图（HTML + LaTeX + 高清 PNG 导出）

把用户的内容做成一张**家长/客户能直接看懂**的可视化图：信息图、流程图、脑图、关系图、海报等。产出**单个自包含 HTML 文件**，浏览器打开即看，所有公式 LaTeX 实时渲染，一键导出高清 PNG。

## 硬性限制（违反即不合格）

1. **所有公式必须用 LaTeX 代码编写**：任何数学/物理/化学公式、变量、上下标，一律用 `$...$`（行内）或 `$$...$$`（独占行）的 LaTeX 语法写进 HTML，**禁止用 Unicode 字符凑公式**（如禁止 `½kx²`、`E=mc2`、`H₂O` 用下标字符）。由 MathJax 实时渲染成规范公式。
2. **MathJax 必须用 `tex-svg.js`**（不是 `tex-mml-chtml.js`）：保证公式是矢量、导出 PNG 不丢字体。
3. **必须支持高清 PNG 导出**：页面含「导出高清 PNG」按钮，用 html-to-image，`pixelRatio≥3`。
4. **单文件自包含**：CSS/JS 内联或走 CDN，双击即可打开。

## 工作流程

1. **理解内容与受众**：图给谁看（家长/学生/客户）、核心信息、信息层级。家长向 = 少术语、多图标、结论先行。
2. **选择结构**：
   - 信息图/海报 → 分板块卡片式（标题区 + 若干 section + 页脚）。
   - 流程图 → 箭头串联的步骤卡（`.flow`）。
   - 脑图/思维导图 → 中心主题 + 分支树。
   - 关系图 → 节点 + 连线。
3. **以模板为起点**：Read `${CLAUDE_SKILL_DIR}/assets/template.html`，复制其骨架（配色变量、MathJax SVG、导出按钮、导出脚本），替换为用户内容。复杂图表（流程图/脑图）的具体结构见 `${CLAUDE_SKILL_DIR}/references/design-guide.md`。
4. **公式用 LaTeX**：把所有公式写成 `$F=ma$`、`$E_p=\dfrac12kx^2$` 等。写法速查见 design-guide.md 第 4 节。
5. **写入产出目录**：HTML 输出到 `AI_output/<名称>.html`（正斜杠相对路径），文件名用中文主题。
6. **交付与导出说明**：告诉用户打开网页、点按钮导出 PNG；提示需联网（CDN）、首次渲染约 1 秒。

## 导出 PNG 的关键（已踩过的坑，务必照抄）

导出选项**必须**包含以下三项，否则会出现"左侧大片空白 / 内容偏右 / 公式丢失"：
```js
htmlToImage.toPng(poster,{
  pixelRatio:3,
  backgroundColor:'#F4F7FA',
  width:poster.offsetWidth, height:poster.offsetHeight,
  style:{ margin:'0', transform:'none', boxShadow:'none' }  // 清零居中边距，防左空白
})
```
- 导出前先 `await MathJax.startup.promise` 确保公式渲染完。
- 导出时给按钮加 `.hidden` 类隐藏，避免按钮进图。

## 参考资料（按需 Read）

- `${CLAUDE_SKILL_DIR}/assets/template.html` —— 通用信息图模板（配色 + MathJax SVG + 导出按钮 + 含 LaTeX 示例的板块），**首选起点**。
- `${CLAUDE_SKILL_DIR}/assets/reference_example.html` —— 完整真实案例（学生暑期补课规划信息图），质量标准参照。
- `${CLAUDE_SKILL_DIR}/references/design-guide.md` —— 配色/布局/各类图（流程图/脑图/关系图）的详细实现、LaTeX 速查、导出排坑清单。