在文章里画流程图，告别 ASCII：HTML 截图配图的 5 步实操- 大数跨境

首页

在文章里画流程图，告别 ASCII：HTML 截图配图的 5 步实操

创见AI实验室

2026-07-05

导读：这篇文章就把怎么用 HTML 截图给文章配图这件事，从工具链到代码到踩坑全部讲清楚。

上一篇文章（阿里全员卸载 Claude）发出去后，我做了一件自己一直想做但没做的事：把文章里所有的 ASCII 字符流程图全部替换成 HTML 截图。

效果是肉眼可见的：原来的 6 个 text 代码块变成了 9 张 3200×1800 的高清流程图，公众号读者那边看起来差不多（推送还是纯文本），但我自己 Obsidian vault 里的版本一下子"专业"了一个档次。

这篇文章就把怎么用 HTML 截图给文章配图这件事，从工具链到代码到踩坑全部讲清楚。

一、为什么我放弃了 ASCII

先说为啥要从 ASCII 升级。ASCII 字符流程图有 3 个硬伤：

像素密度低：80×24 单色字符，再大屏也是模糊一片
对齐难：中文 2 字符宽度、英文 1 字符宽度，混排必崩
彩色编码缺失：ASCII 全是灰的，没法用颜色传递语义（比如"热"和"冷"节点）

HTML 流程图直接解决这 3 个问题：

维度	ASCII	HTML 截图
分辨率	80×24 字符	3200×1800 像素（10 倍）
字体	system monospace	自定义 sans-serif + 中文 fallback
颜色	单色	全彩 + 语义编码（红 = hot、绿 = action）
数据精度	字符拼凑	CSS Grid 精确对齐
二次编辑	改字符	改 CSS + 重新截图

但 HTML 截图不是万能的。我自己的分工原则是：

类型	适合	不适合
ASCII	兜底 / 简单流程 / 任何环境都显示	信息密度低、彩色编码缺失
手绘 PNG	封面 / 概念图 / 有 IP 感的故事	数据精度差、不适合矩阵图
HTML 截图	流程图 / 时间线 / 数据矩阵 / 卡片对比	需要故事感的画面

二、5 步工具链

我用的工具链是：

写 HTML：huashu-design skill（内联 CSS + system font，单文件）
启浏览器：Playwright headless Chromium
加载 + 等待：wait_until="networkidle" + wait_for_timeout(500)
截图：device_scale_factor=2（关键，输出 3200×1800）
分发：复制到附件目录 + Obsidian vault 嵌入

每个步骤细节：

HTML 文件位置：E:/softlv-knowledge/公众号配图/{date}_{topic}/html/*.html
PNG 输出位置：同目录根 *.png
附件位置：E:/softlv-knowledge/公众号文章/附件/
Obsidian 嵌入：![[filename.png]]（附件目录自动被 Obsidian 索引）

三、Playwright 代码（核心 30 行）

最关键的代码其实很短：

import asyncio, osfrom playwright.async_api import async_playwright HTML_DIR = r"E:\公众号配图\html"OUT_DIR = r"E:\公众号配图"PAGES = [("a.html", "a.png"), ("b.html", "b.png")] async def main():    async with async_playwright() as p:        browser = await p.chromium.launch(headless=True)        ctx = await browser.new_context(            viewport={"width": 1600, "height": 900},            device_scale_factor=2,  # 关键        )        for html, png in PAGES:            page = await ctx.new_page()            await page.goto("file:///" + html,                wait_until="networkidle")            await page.wait_for_timeout(500)            await page.screenshot(                path=png,                clip={"x": 0, "y": 0,                      "width": 1600, "height": 900})        await browser.close() asyncio.run(main())

几个关键参数：

参数	值	为什么
`viewport`	1600×900	16:9，公众号配图标准
`device_scale_factor`	2	retina 屏不糊
`wait_until`	networkidle	比 load 更稳，等所有资源
`wait_for_timeout`	500ms	多等半秒稳一下字体
`clip`	viewport 尺寸	精确裁剪到 viewport

四、双渠道同步：一张图走两条路

我自己的文章是双渠道发布的：

doc.softlv.top：微信公众号推送（运营人上传图片）
Obsidian vault：本地自留阅读

这两个渠道对图片的处理完全不同：

渠道	doc.softlv.top	Obsidian vault
用途	推文正文	本地阅读
格式	纯 Markdown 文本	完整 .md + YAML frontmatter
图片	无（运营人单独上传）	`![[file.png]]` 嵌入
受众	公众号读者	我自己

同步的关键逻辑：

PNG 只复制一份到 E:/公众号文章/附件/
doc.softlv.top 正文不放图（避免重复）
Obsidian 通过 ![[filename.png]] 语法引用
同一篇文章在两个渠道呈现不同 —— 推文简洁、阅读版完整

这是为什么我每篇文章都在两个地方各维护一份，但维护成本其实是 1.5 倍而不是 2 倍（图片只复制 1 次）。

五、6 个常见坑

踩过的坑一次性列出来：

坑	现象	修复
file:// 反斜杠	URL 无效，页面打不开	`"file:///" + path.replace("\\", "/")`
device_scale_factor 忘开	retina 屏糊	必须 `=2`
wait_until=load	字体没加载完就截	改 `networkidle` + `wait_for_timeout(500)`
viewport 太小	内容被截断	CSS body `height: 1600px` 锁定
中文字体没指定	系统没 PingFang，字体变形	`font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif`
HTML 改了忘重新截图	旧 PNG 还在	截图脚本加 mtime 检测