一个基于 Next.js 和 Puppeteer 的 Markdown 转图片服务，支持 Docker 部署和 API 集成

luler · 2025-08-09T15:41:09+00:00

一、简介基于 Next.js 和 Puppeteer（Chromium 浏览器引擎渲染）技术开发实现，可以快速将 Markdown 文本渲染生成好看的图片支持本地Docker部署，也可以在Railway、Render、Fly.io等平台一键快速部署提供API接口，可以通过接口调用的方式实现 Markd...

luler

一、简介

基于 Next.js 和 Puppeteer（Chromium 浏览器引擎渲染）技术开发实现，可以快速将 Markdown 文本渲染生成好看的图片
支持本地Docker部署，也可以在Railway、Render、Fly.io等平台一键快速部署
提供API接口，可以通过接口调用的方式实现 Markdown 转图片
开源地址参考：https://github.com/wxingheng/markdown-to-image-serve
该工具的工作原理可以参考下图：

二、安装

提前安装好Docker、docker-compose软件运行环境

新建docker-compose.yml配置文件，内容如下：

version: '3'
services:
  markdown-to-image-serve:
    image: wxingheng/markdown-to-image-serve:latest
    #image: ghcr.io/luxizai/markdown-to-image-serve:latest #官方镜像存在NEXT_PUBLIC_BASE_URL不生效问题时可以参考这个镜像

    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - NEXT_PUBLIC_BASE_URL=http://localhost:3000

    volumes:
      # 只挂载必要的目录，不挂载源代码（下面是生成的图片保存的目录）
      - ./public/uploads/posters:/tmp/uploads/posters

配置完，直接一键启动，命令如下：

docker-compose up -d

正常启动截图如下

三、使用

直接访问在线页面，直接查看渲染效果，访问：http://ip:3000/

调用接口实现markdown转图片

POST: http://localhost:3000/api/generatePosterImage
参数(json):
{
  "markdown": "string",       // 必需：Markdown 内容
  "header": "string",         // 可选：页眉文本
  "footer": "string",         // 可选：页脚文本
  "logo": "string",           // 可选：logo图片URL
  "theme": "string"           // 可选：主题名称,支持：SpringGradientWave（默认）,blue,pink,purple,green,yellow,gray,red,indigo
}
返回（json）:
{
    "url": "http://localhost:3000/api/images/poster-1754744661906.png"
}

使用postman请求示例截图如下：

访问生成的图片，效果如下：

四、总结

这是一个不错的markdown转图片的小工具，在很多需要快速批量生成图片的场景都有应用价值
安装使用方便，支持Docker一键部署，提供API接口，易于集成到第三方系统
代码开源，可以根据自己的需要进行二开，调整生成图片的样式、效果等