Render Markdown. Export pixels. Zero build pipeline.
在线使用 · CLI · Claude Code Skill · 更新日志
Md2Pic 是一个运行在浏览器端的 Markdown 可视化导出工具。输入 Markdown，实时预览渲染结果，支持一键导出为 PNG / PDF / HTML。
内置 KaTeX 数学公式、Mermaid 图表、ECharts 数据可视化和 Callout 卡片渲染能力。提供自由导出和小红书 3:4 分页两种模式，分页时保证元素完整性，不做跨页截断。
全部逻辑在客户端完成，无服务端依赖。所有第三方库通过 CDN 按需加载，项目本身不依赖任何构建工具链。
https://lgolgo.github.io/md2pic
git clone https://github.com/LgoLgo/md2pic.git
cd md2pic
npm start
# → http://localhost:8080npm start 启动静态文件服务器，不涉及编译或打包流程。
将以下文件部署至任意静态托管服务（Nginx / Vercel / Cloudflare Pages 等）：
index.html script.js style.css favicon.svg manifest.json
无需构建步骤。
基于 Puppeteer 的命令行导出工具，启动无头 Chrome → 注入 Markdown → 截图导出，全程离线。
npm install -g md2pic# 自由模式 → 单张 PNG
md2pic input.md output.png
md2pic input.md # 自动生成文件名
# 小红书模式 → 3:4 多页 PNG
md2pic input.md ./out --xhs
md2pic input.md --xhs # 输出至当前目录
# 指定水印署名
md2pic input.md ./out --xhs --watermark "LanLance"
# 查看帮助
md2pic --help| 参数 | 说明 | 默认值 |
|---|---|---|
input.md |
输入 Markdown 文件 | 必填 |
output |
自由模式输出路径 | md2pic-{timestamp}.png |
outDir |
小红书模式输出目录 | 当前目录 |
--xhs |
小红书 3:4 分页模式 | 关闭 |
--watermark <text> |
左上角水印署名 | LanLance |
配合 Claude Code 使用，在任意目录输入 /md2xhs 即可导出小红书图片，无需记忆命令参数。
安装：
# 1. 安装 CLI（前置条件）
npm install -g md2pic
# 2. 安装 Skill
git clone --depth=1 https://github.com/LgoLgo/md2pic /tmp/md2pic
cp -r /tmp/md2pic/skills/md2xhs ~/.claude/skills/md2xhs使用：
/md2xhs note.md # 输出到 note.md 同目录
/md2xhs note.md ./images # 指定输出目录
/md2xhs note.md --watermark "署名" # 带水印
行内公式 $...$，块级公式 $$...$$，渲染引擎为 KaTeX，语法兼容 LaTeX：
欧拉恒等式：$e^{i\pi} + 1 = 0$
$$
\int_a^b f(x)\,dx = F(b) - F(a)
$$化学方程式通过 mhchem 扩展支持，首次使用时自动加载：
$\ce{2H2 + O2 -> 2H2O}$```mermaid
graph TD
A[开始] --> B{判断}
B -->|是| C[执行]
B -->|否| D[结束]
```支持流程图、序列图、甘特图、饼图等，完整语法参见 mermaid.js.org。
```echarts
{
"xAxis": { "type": "category", "data": ["Q1", "Q2", "Q3"] },
"yAxis": { "type": "value" },
"series": [{ "type": "bar", "data": [120, 200, 150] }]
}
```接受任意合法的 ECharts option JSON 配置。
:::card info
提示信息
:::
:::card warning
警告内容
:::
:::card success
操作成功
:::
:::card error
发生错误
:::兼容 Obsidian Callout 语法：
> [!note] 标题
> 正文内容| 模式 | 说明 | 输出 |
|---|---|---|
| 自由 | 单张图片，高度自适应内容 | md2pic-{timestamp}.png |
| 小红书 | 3:4 比例分页，元素不跨页截断 | md2pic-xhs-1.png、md2pic-xhs-2.png... |
通过工具栏切换模式，布局面板可调整内容宽度、边距和字号。
Markdown
→ marked.js
HTML
→ KaTeX 数学公式
→ Mermaid 图表
→ ECharts 数据可视化
→ CardRenderer 卡片
DOM
→ html2canvas → PNG
→ jsPDF → PDF
核心设计：
- 渲染管线串行执行，确保各渲染器之间无竞态
- 导出时创建隔离 DOM 节点（
#md2pic-export-poster），不影响实时预览 - 多尺度降级策略（scale 2 → 1.5 → 1.25 → 1），兼容大尺寸内容
- 外部图片跨域加载失败时自动通过 weserv.nl 代理重试
| 核心 | 原生 HTML / CSS / JS |
| Markdown | marked.js |
| 公式 | KaTeX + mhchem |
| 图表 | Mermaid.js · ECharts |
| 语法高亮 | Prism.js |
| 导出 | html2canvas · jsPDF |
| CLI | Node.js · Puppeteer |
- Fork → 新分支 → 提交 → PR
- 保持原生实现，不引入构建工具和前端框架
- 提交前请在自由模式和小红书模式下分别测试导出功能
本项目 fork 自 xiaolinbaba/madopic