md2wechat 3.0重磅发布，10种图片场景一次讲透

md2wechat 3.0.0 大版本

普通人也能完成多图与 SVG 排版

从安装到预览保姆级排版教程

md2wechat

大家好，我是极客杰尼。

今天，md2wechat 正式发布 3.0.0 大版本，这次最重要的变化，是普通创作者也能让 Agent 帮自己完成多图和 SVG 排版。

今天就从安装开始，手把手带你把一篇有很多图片的 Markdown 初稿，变成适合手机阅读的公众号文章。

3.0.0 更新了什么

6 月份开始做这版时，我记录过一个很真实的问题：之前在移动端的体验并不好，有很多兼容性问题。

3.0.0 重新整理了整套高级排版，重点补齐 10 个图片场景：多图横排、连续故事、手机截图、图文说明、重点标注、前后对比、步骤教程、正式图注，以及两种 SVG 互动效果。

我的建议

你只要说清楚“我有哪几张图，想让读者怎么看”，剩下的排版可以交给 Agent。

md2wechat

md2wechat 是什么

如果你第一次看到这个名字，可以先把它理解成一套给 Agent 使用的公众号创作工具。

你可以继续用 Markdown 写文章，写完以后，让 Codex、Claude Code或 WorkBuddy 帮你理解文章结构、选择主题、生成封面和配图、检查微信显示效果，最后送进公众号草稿箱。

md2wechat 正在成为 Agent 的公众号创作底座，让写作、排版、配图、预览和发布连成一条完整流程，目前在 Github 上获得 3.2k star。

md2wechat GitHub 主页

第一步，安装或升级

打开 Codex、Claude Code 或 WorkBuddy，把下面这段完整发给 Agent：

帮我安装或升级 md2wechat：  npm install -g @geekjourneyx/md2wechat@latest  如果是首次使用，请执行： md2wechat config init  安装完成后，请执行： md2wechat version --json md2wechat capabilities --json  告诉我现在可以使用哪些公众号创作能力。 

把安装或升级要求发给 Agent

确认安装完成并查看版本

Agent 跑完以后，确认版本是 3.0.0，并且能读出主题、图片和高级排版能力即可。

第二步，先完成普通排版

把 Markdown 初稿和文章用到的图片放在同一个文件夹，再告诉 Agent：

请读取这篇 Markdown 初稿和同一文件夹里的图片。 先执行 md2wechat themes list --json。 使用 API 模式的 elegant-gold 主题完成普通排版，生成预览文件。 先不要创建公众号草稿，等我确认预览。 

把初稿和主题要求交给 Agent

查看 elegant-gold 普通排版预览

这一步先看正文、标题、段落和普通图片是否正常。预览没问题，再进入高级排版，排查问题会轻松很多。

第三步，让 Agent 加入高级排版

普通版确认后，再发一段话：

请执行 md2wechat layout list --json。 根据文章内容选择高级排版。 开头使用 hero，中段选择 infographic 和 quote，结尾使用 cta。 不要添加目录。完成后重新生成预览给我确认。 

告诉 Agent 需要哪些高级排版

查看加入高级模块后的预览

做到这里，你已经跑通了初稿、普通排版、高级排版、预览确认的完整流程。

保姆级流程

从Markdown 初稿到公众号预览

1安装或升级

2选择主题

3加入高级排版

4预览确认

每一步都先看结果，再进入下一步

8 种常用图片排版

接下来才进入这次 3.0.0 的重点。你不用记内部名称，只要按自己的图片场景告诉 Agent。

1. 多张同级图片：适合作品集、产品功能、活动照片，让两张或三张图整齐横排。

收拢素材

判断关系

预览确认

2. 有顺序的故事图片：适合旅行记录、案例过程、产品演进，让图片按先后顺序往下讲。

第一步：收拢素材

把文章和文件夹里的图片先集中起来。

第二步：判断关系

区分同级、顺序和对比三种阅读方式。

第三步：预览确认

Agent 完成排版，再由你检查手机效果。

3. 手机界面截图：适合 App、小程序、H5 和手机操作演示，多张竖图放在一起更容易比较。

排版前：图片一路向下堆叠

排版后：图片按关系清晰分组

4. 图文放在一起：适合产品介绍和案例拆解，让一张图和对应解释出现在同一个阅读区。

选择方法

先看图片关系，再决定怎么排

同级图片适合横排，有先后顺序就按故事展示，需要突出变化就做前后对比。

一张图和一段解释会被放在同一个阅读区

5. 在图片上指出重点：适合后台页面、数据图和海报拆解，直接标出按钮、数字或关键区域。

三个判断

直接告诉读者，这张图应该看哪里

01同级横排

多张图片地位相同，整齐并排更节省篇幅

02顺序故事

图片有前后关系，就沿着阅读路径展示

03前后对比

两张图表达变化时，让差异直接相遇

标记可以落在图片中的具体区域

6. 前后效果对比：适合改版前后、两套设计方案、优化结果，让差异一眼可见。

前后对比

从一路堆叠，到按关系清晰分组

排版前

排版后

同尺寸图片放在一起，变化会比大段解释更直观

7. 一步一张截图：适合软件教程和操作手册，每一步都有标题、说明和对应画面。

01 收拢素材

把文章和图片放进同一个文件夹。

02 判断关系

告诉 Agent 哪些同级、哪些有顺序、哪些要对比。

03 预览确认

先在手机预览里确认，再送进公众号草稿箱。

8. 给单张图加正式说明：适合数据图、研究截图和引用图片，可以补图注和来源。

图 1：图片排版的三个常见关系：同级横排、顺序故事、前后对比

来源：md2wechat 3.0.0 多图排版教程示例

如果文件夹里已经有很多图片，可以直接告诉 Agent：

请检查文章和文件夹里的所有图片。 根据图片之间的关系选择合适的多图排版。  同级图片整齐展示，有先后顺序的图片按故事展示，操作截图按步骤展示。 完成后生成预览让我确认。

没有配图，也可以先生成

Codex 或 WorkBuddy 已经提供图片生成能力时，可以先说：

请根据文章段落调用 Image Gen 生成多张配图。 先执行： md2wechat generate_infographic --article article.md --plan --json 再根据图片计划生成图片，并放回文章文件夹。 

把文章和配图需求交给 Agent

根据计划生成文章配图

这里的计划只负责整理该画什么、放在哪里。图片是由 Agent 自带的 Image Gen 生成。

最后两个，是 SVG 互动排版

第一个是点击揭晓。它适合问题答案、猜测结果、课程小测和悬念卡。读者先看到问题，点击后再看到答案。

先判断图片之间的关系，再选择横排、故事、对比或步骤展示。一篇文章有很多图片，第一步应该做什么？点击揭晓

第二个是点击切图。它适合产品前后效果、活动海报和两张重点图片。读者点击图片，就能在两张图之间切换。

点击图片切换下一张点击查看排版前再次点击查看排版后

SVG 互动和高级排版都需要使用 md2wechat API，可后台私信回复：API体验。发布前一定先看真实预览，确认手机里的点击和图片显示都正常。

最后的思考

这次 3.0.0 做下来，我更确定一个方向：普通创作者不用学习排版模块，也不用自己调整每张图片的宽度和位置。

你负责写文章、准备图片、说清楚想要的阅读效果。Agent 负责从可用能力里挑选合适的排版，再把结果交给你确认。

多图排版自由，应该从会描述需求开始。

这个系列刚刚开始

这一期先讲多图与 SVG。后面我会继续把首屏、信息卡、金句、数据、案例、行动引导等高级排版逐个拆开，每篇都给真实场景、操作过程和最终效果。

文章来自于"极客杰尼"，作者 "极客杰尼"。