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

5 分钟上手 Mermaid-cli Node.js APIrenderMermaid 动态生成图表完整实战【免费下载链接】Automatic_ticket_purchase大麦网抢票脚本项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase大麦抢票脚本的监控面板要一张随代码实时更新的流程图手截图根本跟不上。Mermaid-cli Node.js API 让 Node 进程直接调 renderMermaid 程序化渲染图表拿回 PNG 原始字节回包、落盘、进缓存全由你说了算。先跑起来环境准备与最小可运行示例三步走装依赖npm i mermaid-js/mermaid-cli puppeteer。puppeteer 是 peer dependency必须自己装Node 需 18.19 及以上。写脚本这个包是纯 ESM代码里一律用 import。运行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 参数全解前三个位置参数固定browserPuppeteer 浏览器实例或浏览器上下文、definitionMermaid 定义字符串、outputFormatsvg | png | pdf。第四个是可选对象一张表说清参数管什么怎么写viewport页面视口deviceScaleFactor 即 PNG 缩放倍率等价于 CLI 的 --scale{ width: 800, height: 600, deviceScaleFactor: 2 }backgroundColor背景色transparent 时 PNG/PDF 透明底white、transparentmermaidConfigMermaid 配置合并后传入 initialize{ theme: dark }myCSS自定义 CSS 文本作为 style 子节点注入 SVG.node rect { fill: red; }pdfFitPDF 是否按图表大小裁切页面truesvgId输出 svg 元素的 id 属性my-svgiconPacksIconify 图标 npm 包供图标语法使用[iconify-json/logos]一句话想要 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 一次退出前统一 closerenderMermaid每次只开新 page用完在 finally 自动关闭放心复用。一句话三个坑的根因都指向浏览器这个共享资源——谁开谁关、错误不自动兜底、冷启动最贵。API 还是 CLIMermaid-cli 选型一句话判断判断标准只有一条产物是磁盘上的文件、任务一次性、在终端里跑用 CLI产物是要被程序继续处理的字节——写流、回包、进缓存或想统一管并发、主题与实例复用用 Mermaid-cli Node.js API。延伸阅读项目运行说明见 README.md工具函数见 tools.py。【免费下载链接】Automatic_ticket_purchase大麦网抢票脚本项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考