企业官网建设流程全解析

5 分钟上手 Mermaid-cli Node.js API：renderMermaid 动态生成图表完整实战

【免费下载链接】Automatic_ticket_purchase大麦网抢票脚本项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase

大麦抢票脚本的监控面板要一张随代码实时更新的流程图，手截图根本跟不上。Mermaid-cli Node.js API 让 Node 进程直接调 renderMermaid 程序化渲染图表，拿回 PNG 原始字节：回包、落盘、进缓存全由你说了算。

先跑起来：环境准备与最小可运行示例

三步走：

1. 装依赖：npm i @mermaid-js/mermaid-cli puppeteer。puppeteer 是 peer dependency，必须自己装；Node 需 18.19 及以上。
2. 写脚本：这个包是纯 ESM，代码里一律用 import。
3. 运行：node gen.js，当前目录多出一张 chart.png。

import fs from "fs/promises"; import puppeteer from "puppeteer"; import { renderMermaid } from "@mermaid-js/mermaid-cli"; const browser = await puppeteer.launch({ headless: "shell" }); try { const mmd = "graph TD; A[登录]-->B{cookies 有效?}-->|否|C[页面登录];"; const { data, desc } = await renderMermaid(browser, mmd, "png", { viewport: { width: 800, height: 600, deviceScaleFactor: 2 }, }); await fs.writeFile("chart.png", data); console.log(`${data.length} 字节, alt: ${desc}`); } finally { await browser.close(); }

返回值是个三元组{ title, desc, data }：data是图片原始字节，title、desc是图里 accTitle/accDescr 声明的无障碍元数据，做 Web 服务时正好拿desc当 alt。

一句话：浏览器只在启动时 launch 一次、退出前在 finally 里统一 close，中间的每次渲染都只是开一个页面用完即弃。

输出控制：renderMermaid 参数全解

前三个位置参数固定：browser（Puppeteer 浏览器实例或浏览器上下文）、definition（Mermaid 定义字符串）、outputFormat（'svg' | 'png' | 'pdf'）。第四个是可选对象，一张表说清：

一句话：想要 CLI --scale 的高清效果，把 deviceScaleFactor 塞进 viewport 即可，效果完全等价。

🎯 拿到字节后怎么落地：三种集成方式

renderMermaid 回的是刚冲出来的照片——只有照片没有相框，挂墙上（回包）、归档（落盘）还是塞保险柜（缓存），随你定。

HTTP 接口回图：这是"出数据"最大的价值点。handler 收下定义字符串，渲染完直接回 PNG 字节；设好 Content-Type，背景设 transparent 让它融进页面，desc顺手塞进响应头当 alt。像本仓库 signcode.js 这类签名逻辑经常变动的代码，对应的流程图就该实时取新图。

app.post("/chart", async (req, res) => { const { data, desc } = await renderMermaid(browser, req.body.mmd, "png", { backgroundColor: "transparent", }); res.set("Content-Type", "image/png"); res.set("Image-Alt", desc); res.send(Buffer.from(data)); });

批量导出图片资产：在 CI 里扫一遍图源目录逐个渲染，关键只有一个——复用同一个 browser；并发高时再配 p-limit 限流。本仓库 README.md 标注 item_id 的这张截图就是人工标注的典型，这类素材今后都可以交给渲染服务统一产出。

const files = await fs.readdir("diagrams"); for (const f of files.filter((x) => x.endsWith(".mmd"))) { const src = await fs.readFile(`diagrams/${f}`, "utf-8"); const { data } = await renderMermaid(browser, src, "png", { mermaidConfig: { theme: "forest" }, }); await fs.writeFile(`diagrams/${f.replace(/\.mmd$/, ".png")}`, data); }

Markdown 文档自动化：md 里已经写了 mermaid 代码块的话，循环都省得自己写，直接用同包导出的run()：它自动找出代码块、逐张渲染，并把输出 md 里的代码块替换成图片引用。注意它只关闭自己启动的浏览器，你传进去的实例它不动，跨多个文档文件复用完全放心。

import { run } from "@mermaid-js/mermaid-cli"; await run("docs/flow.md", "docs/out/flow.md", { browser, outputFormat: "png", artefacts: "docs/out/img", quiet: true, });

一句话：回图、归档、嵌文档，字节是同一份，变的只是交付去向。

排错指南：程序化渲染图表最高频的三个问题

进程退不出、内存居高不下。现象：服务跑一阵后内存只涨不跌，进程迟迟退不掉。原因：浏览器实例没关闭。解法：把browser.close()放进 finally；通过run()传入的 browser 同样不会被自动关——谁开的谁负责关。

一张错图拖垮整批任务。现象：一个 .mmd 语法写错，整批导出直接崩掉。原因：mermaid.render 遇到非法定义直接抛异常，renderMermaid不吞错、原样抛出。解法：给每次调用套 try/catch，记下失败的是哪张图，其余继续跑。

每张图都慢。现象：渲染一张图要等几十秒。原因：每次调用都重新 launch 浏览器，而起 Chromium 是整条链路里最贵的一步。解法：把 browser 理解成一台提前预热好的冲印机——进程启动时 launch 一次，退出前统一 close；renderMermaid每次只开新 page，用完在 finally 自动关闭，放心复用。

一句话：三个坑的根因都指向浏览器这个共享资源——谁开谁关、错误不自动兜底、冷启动最贵。

API 还是 CLI：Mermaid-cli 选型一句话判断

判断标准只有一条：产物是磁盘上的文件、任务一次性、在终端里跑，用 CLI；产物是要被程序继续处理的字节——写流、回包、进缓存，或想统一管并发、主题与实例复用，用 Mermaid-cli Node.js API。

延伸阅读：项目运行说明见 README.md，工具函数见 tools.py。

【免费下载链接】Automatic_ticket_purchase大麦网抢票脚本项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase