{"_id":"@1-/mdmermaid","_rev":"6-c4a27ca6bb1145bb61e131aaec883de7","name":"@1-/mdmermaid","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.0":{"name":"@1-/mdmermaid","version":"0.1.0","keywords":["markdown","mermaid","render","svg"],"author":{"name":"x-at-01@googlegroups.com"},"license":"MulanPSL-2.0","_id":"@1-/mdmermaid@0.1.0","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/webc-site/npm/tree/main/mdmermaid","bugs":{"url":"https://github.com/webc-site/npm/issues"},"dist":{"shasum":"ea7cf999ab07f37a079b770d5181ea0ade4b7d49","tarball":"https://registry.npmjs.org/@1-/mdmermaid/-/mdmermaid-0.1.0.tgz","fileCount":4,"integrity":"sha512-vJWFvg6n50XoeYylspOPfMu3MiLUnE4LcgYTF6rwgZ1SEzIPioCa5dtn3R6yySajas9Z1Gzh4RYazWKc1duGIw==","signatures":[{"sig":"MEYCIQD86h21Cel7Yt5mSxNDYTY265RQqYjq+2gC6vhg/Svb2QIhAJZsDfAllPKLb3vKMbAkmULBnBIwGoHuY4XQOiede3ZF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26670},"type":"module","exports":{".":"./_.js","./*":"./*"},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/webc-site/npm.git","type":"git"},"_npmVersion":"11.13.0","description":"Render Mermaid code blocks to SVG in Markdown / 将 Markdown 中的 Mermaid 代码块渲染为 SVG","directories":{},"_nodeVersion":"26.2.0","dependencies":{"@1-/md":"../md","beautiful-mermaid":"^1.1.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mdmermaid_0.1.0_1780975705058_0.15052889135313952","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@1-/mdmermaid","version":"0.1.1","keywords":["markdown","mermaid","render","svg"],"author":{"name":"x-at-01@googlegroups.com"},"license":"MulanPSL-2.0","_id":"@1-/mdmermaid@0.1.1","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/webc-site/npm/tree/main/mdmermaid","bugs":{"url":"https://github.com/webc-site/npm/issues"},"dist":{"shasum":"6dde19d4ef38e7e92e0e7014322baff184f8b2ee","tarball":"https://registry.npmjs.org/@1-/mdmermaid/-/mdmermaid-0.1.1.tgz","fileCount":5,"integrity":"sha512-j81LupVZLAS0hrWGZO69KyHg4YtP8Le2NpZVWPVI6Y6sf+IITYDATcsEr6owIMgH3ev9FdsyMzKD5H70woJ74w==","signatures":[{"sig":"MEQCIGjcn3CqH0VDq2JcAxlJC1M2VerHUSOKVX+PtYBAhAAyAiAgtlWA8eTrbxYQVoDnQNNV7tL20Av72hJVsWQ6+c/LJQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7545},"type":"module","exports":{".":"./_.js","./*":"./*"},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/webc-site/npm.git","type":"git"},"_npmVersion":"11.13.0","description":"Render Mermaid code blocks to SVG in Markdown / 将 Markdown 中的 Mermaid 代码块渲染为 SVG","directories":{},"_nodeVersion":"26.2.0","dependencies":{"svgo":"^3.3.2","@1-/md":"file:../md","beautiful-mermaid":"^1.1.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mdmermaid_0.1.1_1780977887631_0.3328433393531267","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@1-/mdmermaid","version":"0.1.2","keywords":["markdown","mermaid","render","svg"],"author":{"name":"x-at-01@googlegroups.com"},"license":"MulanPSL-2.0","_id":"@1-/mdmermaid@0.1.2","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/webc-site/npm/tree/main/mdmermaid","bugs":{"url":"https://github.com/webc-site/npm/issues"},"dist":{"shasum":"5af81e60c439e4d4ce8111bb7eb9ec646d03065a","tarball":"https://registry.npmjs.org/@1-/mdmermaid/-/mdmermaid-0.1.2.tgz","fileCount":5,"integrity":"sha512-dgvecYENdxdKZ/UHnQEWngHI0SM1v+LDlZ1PAb3G5WTM3beask4OkoGFz3bpN91TMBmbMC5le9A8ZDUGCIH3Xg==","signatures":[{"sig":"MEUCIGx3UZ2s7Z63DOHvrf+QSxlgD/PjKAsUOB/8+P/RqMrIAiEAy11xso2uBjFY/HkZUJyvFHFc6Y7aOVHXK1rRkd3Lhio=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7287},"type":"module","exports":{".":"./_.js","./*":"./*"},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/webc-site/npm.git","type":"git"},"_npmVersion":"11.13.0","description":"Render Mermaid code blocks to SVG in Markdown / 将 Markdown 中的 Mermaid 代码块渲染为 SVG","directories":{},"_nodeVersion":"26.2.0","dependencies":{"svgo":"^3.3.2","@1-/md":"file:../md","beautiful-mermaid":"^1.1.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mdmermaid_0.1.2_1780979316960_0.5795925788692706","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@1-/mdmermaid","version":"0.1.3","keywords":["markdown","mermaid","render","svg"],"author":{"name":"x-at-01@googlegroups.com"},"license":"MulanPSL-2.0","_id":"@1-/mdmermaid@0.1.3","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/webc-site/npm/tree/main/mdmermaid","bugs":{"url":"https://github.com/webc-site/npm/issues"},"dist":{"shasum":"f608e440975e99a447120fdaa9cb37a4b108cc0b","tarball":"https://registry.npmjs.org/@1-/mdmermaid/-/mdmermaid-0.1.3.tgz","fileCount":5,"integrity":"sha512-UEHP2gLGlrrHWi4A4Us5D+9pwP6jL1tj5Fb4g+SnyV70R+mXSUEFg6HLgc5a7dCoOq8e8M0u3qDKVo2mx6WVSg==","signatures":[{"sig":"MEQCIAT1JTvqzQitdcqE5Iy27lfHSySsaYLqICgX2150S4KhAiAhap0kd/WqDzH3o2kSwmADef3mN5ZWj/3g62T4pbbFYg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9098},"type":"module","exports":{".":"./_.js","./*":"./*"},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/webc-site/npm.git","type":"git"},"_npmVersion":"11.13.0","description":"Render Mermaid code blocks to SVG in Markdown / 将 Markdown 中的 Mermaid 代码块渲染为 SVG","directories":{},"_nodeVersion":"26.2.0","dependencies":{"svgo":"^3.3.2","@1-/md":"file:../md","beautiful-mermaid":"^1.1.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mdmermaid_0.1.3_1780979881163_0.5047439330560344","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@1-/mdmermaid","version":"0.1.4","keywords":["markdown","mermaid","render","svg"],"author":{"name":"x-at-01@googlegroups.com"},"license":"MulanPSL-2.0","_id":"@1-/mdmermaid@0.1.4","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/webc-site/npm/tree/main/mdmermaid","bugs":{"url":"https://github.com/webc-site/npm/issues"},"dist":{"shasum":"2cd514dd8899442ca5984b07b95040328abcb3af","tarball":"https://registry.npmjs.org/@1-/mdmermaid/-/mdmermaid-0.1.4.tgz","fileCount":5,"integrity":"sha512-On7bRPJNyNi2aMKzKdMic/PCQDSaQ9fKD6zjKzW/FSpmADi2iSVzsNRDOx/fSUQptWKWNu3qmxAzGXl1T/jnJw==","signatures":[{"sig":"MEUCIHmcb7q26gmWRq5mhNTlbaFGeiiDUGevZWiGhFrPDZATAiEA2xU60h0t5IKtUDGssISzY1RE91bAd8Wno3wmgFM+7Tg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8798},"type":"module","exports":{".":"./_.js","./*":"./*"},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/webc-site/npm.git","type":"git"},"_npmVersion":"11.13.0","description":"Render Mermaid code blocks to SVG in Markdown / 将 Markdown 中的 Mermaid 代码块渲染为 SVG","directories":{},"_nodeVersion":"26.2.0","dependencies":{"svgo":"^3.3.2","@1-/md":"file:../md","beautiful-mermaid":"^1.1.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mdmermaid_0.1.4_1780980112250_0.3312657599471529","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@1-/mdmermaid","version":"0.1.5","description":"Render Mermaid code blocks to SVG in Markdown / 将 Markdown 中的 Mermaid 代码块渲染为 SVG","keywords":["markdown","mermaid","render","svg"],"homepage":"https://github.com/webc-site/npm/tree/main/mdmermaid","license":"MulanPSL-2.0","author":{"name":"x-at-01@googlegroups.com"},"repository":{"type":"git","url":"git+https://github.com/webc-site/npm.git"},"type":"module","exports":{".":"./_.js","./*":"./*"},"peerDependencies":{"@1-/md":"^0.1.2","beautiful-mermaid":"^1.1.3","svgo":"^4.0.1"},"_id":"@1-/mdmermaid@0.1.5","bugs":{"url":"https://github.com/webc-site/npm/issues"},"_nodeVersion":"26.2.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-EdAtpBDy0UvklpffNZMifRE2kzON+4fiK7DtnVXP+8kdgzAdSGtZzZN37lIi/lMG1+z1CfCm4jn+0jW0dC+4Tw==","shasum":"999d6cd246535945be727884b568b19f4f0e3133","tarball":"https://registry.npmjs.org/@1-/mdmermaid/-/mdmermaid-0.1.5.tgz","fileCount":5,"unpackedSize":8113,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICb8TbX3WYXOayCe7UfSfvyw8TgPofwXWqqtQ86drOPwAiEA9qWU5syN0z51zERO37ea7YKtoJL7hiiOjv0jDsU8MQg="}]},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"directories":{},"maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mdmermaid_0.1.5_1781020202367_0.8911476339793996"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-09T03:28:24.938Z","modified":"2026-06-09T15:50:02.687Z","0.1.0":"2026-06-09T03:28:25.176Z","0.1.1":"2026-06-09T04:04:47.812Z","0.1.2":"2026-06-09T04:28:37.101Z","0.1.3":"2026-06-09T04:38:01.300Z","0.1.4":"2026-06-09T04:41:52.391Z","0.1.5":"2026-06-09T15:50:02.562Z"},"bugs":{"url":"https://github.com/webc-site/npm/issues"},"author":{"name":"x-at-01@googlegroups.com"},"license":"MulanPSL-2.0","homepage":"https://github.com/webc-site/npm/tree/main/mdmermaid","keywords":["markdown","mermaid","render","svg"],"repository":{"type":"git","url":"git+https://github.com/webc-site/npm.git"},"description":"Render Mermaid code blocks to SVG in Markdown / 将 Markdown 中的 Mermaid 代码块渲染为 SVG","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"readme":"[English](#en) | [中文](#zh)\n\n---\n\n\n# @1-/mdmermaid : Render Mermaid code blocks to SVG in Markdown\n\n## 1. Features\n\nParse Markdown text, extract Mermaid code blocks, and convert to SVG.\n\nSupport inline and upload modes. Inline mode embeds SVG source code. Upload mode cleans, compresses, uploads SVG, and replaces with image links.\n\nLocate syntax errors during compilation, returning line numbers and error-related code.\n\n## 2. Usage\n\n```javascript\nimport renderMd from \"@1-/mdmermaid\";\n\nconst md = `\n# Flowchart Example\n\n\\`\\`\\`mermaid\ngraph TD\n A --> B\n\\`\\`\\`\n`;\n\n// Mode 1: Inline SVG source code\ntry {\n const inlineResult = await renderMd(md);\n console.log(inlineResult);\n} catch ([line, text, error]) {\n console.error(`Syntax error at line ${line}: ${text}`, error);\n}\n\n// Mode 2: Clean, compress, upload, and replace with image link\nconst uploadCallback = async (buffer, filename) => {\n return \"https://example.com/assets/diagram.svg\";\n};\n\nconst uploadResult = await renderMd(md, uploadCallback);\nconsole.log(uploadResult);\n```\n\n## 3. Design\n\nSplit Markdown text into lines and extract start and end line numbers of Mermaid code blocks.\n\nLoop blocks in reverse order to prevent line number shifts after replacement.\n\nOn syntax error, compare error messages with code lines to calculate and throw absolute line number, error line text, and original error.\n\nIf upload callback is provided, remove internal `@import` styles, optimize SVG via SVGO, upload, and replace with image link.\n\nIf no callback is provided, replace with SVG source code.\n\n\n\n## 4. Tech Stack\n\n- **Bun**: JavaScript runtime and testing framework.\n- **beautiful-mermaid**: Mermaid-to-SVG compiler.\n- **svgo**: SVG optimizer and compressor.\n- **@1-/md**: Markdown text parsing dependency.\n\n## 5. Code Structure\n\n```\nsrc/\n├── _.js # Main entry, coordinates parsing, compilation, replacement, and error mapping\n├── optSvg.js # Removes import styles and compresses SVG with SVGO\n└── render.js # Wraps beautiful-mermaid rendering logic\n```\n\n## 6. History Story\n\nIn 2014, Knut Sveidqvist created Mermaid.js after losing a Microsoft Visio file. Inspired by 'code as documentation', he simplified diagramming.\n\nEarly Markdown engines relied on browser-side dynamic scripts to parse Mermaid, causing layout shifts and failing in offline environments or PDF exports.\n\nThis tool implements static build-time rendering, compiling Mermaid into static SVG or uploading compressed SVG. This eliminates client-side overhead and ensures consistent rendering across viewers.\n\n## About\n\nThis library is developed by [WebC.site](https://webc.site).\n\n[WebC.site](https://webc.site): A new paradigm of web development for AI\n\n---\n\n\n# @1-/mdmermaid : 将 Markdown 中的 Mermaid 代码块渲染为 SVG\n\n## 1. 功能介绍\n\n解析 Markdown 文本，提取 Mermaid 代码块并转换为 SVG 格式。\n\n支持内联与上传模式。内联模式嵌入 SVG 源码。上传模式清理并压缩 SVG，通过上传接口替换为图片链接。\n\n编译失败时定位语法错误，返回源文件行号与出错代码。\n\n## 2. 使用演示\n\n```javascript\nimport renderMd from \"@1-/mdmermaid\";\n\nconst md = `\n# 流程图示例\n\n\\`\\`\\`mermaid\ngraph TD\n A --> B\n\\`\\`\\`\n`;\n\n// 模式 1：内联 SVG 源码\ntry {\n const inlineResult = await renderMd(md);\n console.log(inlineResult);\n} catch ([line, text, error]) {\n console.error(`行 ${line} 语法错误: ${text}`, error);\n}\n\n// 模式 2：清理压缩并上传，替换为图片链接\nconst uploadCallback = async (buffer, filename) => {\n return \"https://example.com/assets/diagram.svg\";\n};\n\nconst uploadResult = await renderMd(md, uploadCallback);\nconsole.log(uploadResult);\n```\n\n## 3. 设计思路\n\n按行解析 Markdown 文本，定位 Mermaid 代码块起止行号。\n\n采用逆序循环替换，防止替换操作改变后续代码块的行号偏移。\n\n解析失败时，比对错误信息与代码行，计算并抛出 Markdown 源文件绝对行号、错误文本及原始异常。\n\n传入上传回调时，正则清除 SVG 内部 `@import` 样式以消除外部样式依赖。调用 SVGO 压缩，执行回调并替换为图片链接。\n\n未传入回调时，嵌入 SVG 源码替换原代码块。\n\n\n\n## 4. 技术栈\n\n- **Bun**：JavaScript 运行时与测试框架。\n- **beautiful-mermaid**：Mermaid 转 SVG 编译器。\n- **svgo**：SVG 压缩工具。\n- **@1-/md**：Markdown 文本解析依赖库。\n\n## 5. 代码结构\n\n```\nsrc/\n├── _.js # 主入口，解析、编译替换与错误映射\n├── optSvg.js # 清除导入样式，调用 SVGO 压缩\n└── render.js # 封装 beautiful-mermaid 渲染\n```\n\n## 6. 历史故事\n\n2014 年，Knut Sveidqvist 丢失 Microsoft Visio 源文件，受“代码即文档”启发创建 Mermaid.js，实现图表代码化绘制。\n\n早期 Markdown 引擎依赖浏览器端脚本动态解析 Mermaid，导致页面布局抖动，且离线或导出 PDF 时失效。\n\n本工具提供构建时静态渲染，将 Mermaid 代码块预编译为静态 SVG 或压缩上传，消除客户端脚本负担，保证多终端渲染一致。\n\n## 关于\n\n本库由 [WebC.site](https://webc.site) 开发。\n\n[WebC.site](https://webc.site) : 面向人工智能的网站开发新范式\n","readmeFilename":"README.md"}