exporting-to-png

用途

Exporting to PNG 用于把代码片段、Markdown 内容、终端输出、图表或已渲染的 UI 组件转换成 PNG 图片文件。它适合需要将文本或矢量内容固化为图片的场景，例如生成代码截图、导出图表、保存终端会话画面等。

主要能力

该技能覆盖多种内容类型到 PNG 的转换路径：

1. HTML → PNG（无头浏览器）：最灵活的方式，将任意内容渲染为 HTML 后截图。可使用 Playwright 命令 npx playwright screenshot --full-page "file:///path/to/content.html" output.png，或使用 Puppeteer 的 Node 单行脚本启动浏览器、设置页面内容并截图。步骤为：生成带样式（语法高亮、内边距、字体）的 HTML 文件，用无头浏览器渲染并捕获，必要时用图像工具裁剪。

2. 代码 → PNG（Carbon 或 Silicon）：用于生成带样式的代码截图。Silicon 是 Rust 编写的快速 CLI，示例命令包括 silicon --language python --output code.png source.py 和 silicon --from-clipboard --output code.png；也可生成 Carbon URL 供浏览器捕获，如 https://carbon.now.sh/?l=python&code=<url-encoded-code>。

3. Mermaid 图表 → PNG：使用 mermaid-cli，命令为 npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent；也可用 Docker 运行 docker run --rm -v "$(pwd)":/data minlag/mermaid-cli mmdc -i /data/diagram.mmd -o /data/diagram.png。

4. SVG → PNG：可使用 sharp（Node.js）脚本 sharp('input.svg').png().toFile('output.png')，或 Inkscape CLI inkscape input.svg --export-type=png --export-filename=output.png，或 ImageMagick convert input.svg output.png。

5. 终端输出 → PNG：可使用 termshot（若已安装），命令为 termshot -- ls -la；也可手动捕获输出，包裹在等宽字体的 HTML 中再截图。

使用方式

技能建议的工作流程为：

1. 判断内容类型（代码、图表、HTML、终端、SVG）。
2. 检查环境中可用的工具（如 which silicon、npx --help 等）。
3. 选择最佳方法并生成 PNG。
4. 验证输出文件存在且非空：file output.png && ls -la output.png。
5. 报告文件路径与尺寸。

适用场景

适用于需要将代码、图表、终端输出或 UI 组件导出为图片的场合，例如制作教程配图、生成代码分享图、导出 Mermaid 流程图、转换 SVG 素材、保存终端操作记录等。

限制与提示

• 若环境中未安装专用工具，可回退到 HTML + 无头浏览器方法，该方法适用于所有内容类型。
• 代码截图建议使用深色主题并留出充足内边距（32px 以上）以获得精致外观。
• 在 Playwright/Puppeteer 中设置 deviceScaleFactor: 2 可获得视网膜级输出质量。
• 需要透明背景时，使用 --background transparent 或 omitBackground: true。
• 关于各工具的具体安装方式、版本要求、收费情况，资料中暂未提供。