{"_id":"rehype-mermaid","_rev":"14-6aa51644dcefd1b20d836231744d0e52","name":"rehype-mermaid","dist-tags":{"latest":"3.0.0"},"versions":{"0.1.0":{"name":"rehype-mermaid","version":"0.1.0","keywords":["react","mermaid"],"author":{"name":"bitekong"},"license":"MIT","_id":"rehype-mermaid@0.1.0","maintainers":[{"name":"bitekong","email":"btk@qq.com"}],"homepage":"https://github.com/bitekong/rehype-mermaid#readme","bugs":{"url":"https://github.com/bitekong/rehype-mermaid/issues"},"dist":{"shasum":"02b16e7e560351f33de72092b9402c142a7c8213","tarball":"https://registry.npmjs.org/rehype-mermaid/-/rehype-mermaid-0.1.0.tgz","fileCount":11,"integrity":"sha512-Lb8Ae8RzHkF9uviq0r0FyYiUjogWNJuHM4oCgZ0yOZYO3olZsvaaM+Y5ON091I0bljhJmEMaj77XG1jsxahYuw==","signatures":[{"sig":"MEUCIQDSw6r9yq0e5am/h37WsUO/u9SDIfKMKzW1stE/CXiKTQIgQcWg2wmCAq+lgOAwvja1Tt5+EMVxYXbHkP8rV22EZic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJFHuCRA9TVsSAnZWagAAEJwP/1IG4Buwq1Rx1AMnsIxY\n3s9a76nz06OceTCikCOMHEQTuJ7n5diQ6/j/hZbAf0rfkDVuE7qfq6mY2Jtr\n5yl7j8Ccc+AyGED34sGUVLy7LvNzgzvce7481OfWVEvvSeBzV9+ZybsRyjPV\nQCr14TbS0bfe6K8c/Uf7k67jXb1s6MFmz2+33eJqnOunA92TZHG3BBn6IVDh\nE/YnNi7NB+ZfVYe5tdpVSnZr5ZUNwk1JEfBHwAhCIXe9WkhLhadgVeswBvm8\nzqw9h7FhDYLzJnuUR13aMLscpVyX/ouHi1Bv8LBcNltGuDjGCGrDp5e8i0rW\nAozIUa8BHaWiWGzsLqqQ02HifGHvovY9IT/Dl10c2gSrrzOUKn+kMBfwbrHr\n5eccGPIvEiFuKP6XYZ3+7ogbvStAsMUpvOxqjEhaSFb251HZeFY9QtUVgOyQ\ns+Eb0+SOnYnNKQKnBHb2H1R4UfjdSKmHsYsaHsEXbCmKVEMpew21PJQS8EpG\nnrcytKnReYUBe2YZkENn5G4bk1g1LsqL0K2fZ4Gs/OCUyeC5uAjV2HC8ZeYU\nlLO3ebO95iRKyC/0tVz2steneJG0jOFMSKM/oa6vaUy9jASEoFg/edBTTEuT\nOpGndDkhB01xjUmfFGG/c088hIUSedbqRbDDSw0S9cE79w4rtNUhB0TWhu+P\nJowh\r\n=Ziob\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"5b7887cd423e87732a8da5785fb7c8b7ff8040dc","private":false,"scripts":{"test":"react-scripts test","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","build2":"tsc"},"_npmUser":{"name":"bitekong","email":"btk@qq.com"},"repository":{"url":"git+https://github.com/bitekong/rehype-mermaid.git","type":"git"},"_npmVersion":"7.20.3","description":"The rehype parser which analyze mermaid to SVG.","directories":{},"_nodeVersion":"16.6.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"uuid":"^8.3.2","react":"^17.0.2","mermaid":"^8.11.5","react-dom":"^17.0.2","typescript":"^4.3.5","web-vitals":"^1.0.1","@types/jest":"^26.0.15","@types/node":"^12.0.0","@types/react":"^17.0.0","react-scripts":"4.0.3","react-markdown":"^7.0.0","@types/react-dom":"^17.0.0","unist-util-visit":"^4.0.0","@testing-library/react":"^11.1.0","hast-util-has-property":"^2.0.0","react-syntax-highlighter":"^15.4.4","@testing-library/jest-dom":"^5.11.4","@testing-library/user-event":"^12.1.10"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"_hasShrinkwrap":false,"devDependencies":{"@types/uuid":"^8.3.1","@types/mermaid":"^8.2.7"},"_npmOperationalInternal":{"tmp":"tmp/rehype-mermaid_0.1.0_1629770221901_0.5015246632593284","host":"s3://npm-registry-packages"}},"0.1.5":{"name":"rehype-mermaid","version":"0.1.5","keywords":["react","mermaid"],"author":{"name":"bitekong"},"license":"MIT","_id":"rehype-mermaid@0.1.5","maintainers":[{"name":"bitekong","email":"btk@qq.com"}],"homepage":"https://github.com/bitekong/rehype-mermaid#readme","bugs":{"url":"https://github.com/bitekong/rehype-mermaid/issues"},"dist":{"shasum":"bf959cb297423d582a89d202d1004b7b56c84a01","tarball":"https://registry.npmjs.org/rehype-mermaid/-/rehype-mermaid-0.1.5.tgz","fileCount":11,"integrity":"sha512-ILAcHKvdsAVACergevIr/NH/w4WVXO2En++sylMUuhpFNpEihKwB17rBNi2YSAsscve1F8nx/bi2wn8Eb7ZMbg==","signatures":[{"sig":"MEYCIQDw9MWSLVUpN2Mz7oZOz78fHnyZ5uY0XmmSerGF5rrybQIhAJILn9xrB80rgsx6hnCpUC44IV68OalYojs57fQR9ibk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJFVnCRA9TVsSAnZWagAAAncP/iWwJ/z8TAg45+DHJ0ra\niJHhoI5HJr/S1uZAcDqgoatJaDEUo8zIumb0/7HIoEBz5Kb05RwUeNHQ5h+B\ns8xpznXa1eDVg7T5nKB0SVuywE6QCkT7Y/cqw9fB6K68R2+b3oENu8303Nl5\nsGS2+cPMVm6D9NVWyq88FeZ1sKbtalPcS/UQDv5SVs0j9Rd1vktJEyPykSuA\n/1OM/C5G92+tj0IndDhR7UAKMi1R/x874Ga8peRyWcjbbXYEoex+AUHAXt+G\nBshx15ZOo0wMGw896NadUnqtl9zRiwuEigqEKIx8DBYLsH207EeEo/7u4DjD\n9DbDXyX7+Qx7DVIQE/NV/5FPBNQBLtfuo4Nz3xyJpLIXhPwnCbEN9BnOCMF8\nWmem6uJn2E3qBVusOt64xNpGI7JvDRKDankDT9PjtyDArw6bgwnVgo0B/52r\nvLIvKrb9d7mxT5BhkvL8tQ5c6NFn/UXIHnZzy0PUsyISjgiok79CibDAapg9\nkyh1Z5ly0ctIPc/2Z6cB17Jy5iGq3om0mD+4T9H7IBvpRs2mduljuEW4M0FN\nEEmjSk/FqdQoRhB3Xnj5b0U2gt8oC/3O8sScqXoom/jBAwd1JmGSVpHgPcaK\nj6r4blb29oDiu2ejn/JiAmIuvtIJa8mQKLEdNHdzvPKH47fDFfQ2Jlj1yMKa\nQb82\r\n=v3w2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"5b7887cd423e87732a8da5785fb7c8b7ff8040dc","private":false,"scripts":{"test":"react-scripts test","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","build2":"tsc"},"_npmUser":{"name":"bitekong","email":"btk@qq.com"},"repository":{"url":"git+https://github.com/bitekong/rehype-mermaid.git","type":"git"},"_npmVersion":"7.20.3","description":"The rehype parser which analyze mermaid to SVG.","directories":{},"_nodeVersion":"16.6.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"uuid":"^8.3.2","react":"^17.0.2","mermaid":"^8.11.5","react-dom":"^17.0.2","typescript":"^4.3.5","web-vitals":"^1.0.1","@types/jest":"^26.0.15","@types/node":"^12.0.0","@types/react":"^17.0.0","react-scripts":"4.0.3","react-markdown":"^7.0.0","@types/react-dom":"^17.0.0","unist-util-visit":"^4.0.0","@testing-library/react":"^11.1.0","hast-util-has-property":"^2.0.0","react-syntax-highlighter":"^15.4.4","@testing-library/jest-dom":"^5.11.4","@testing-library/user-event":"^12.1.10"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"_hasShrinkwrap":false,"devDependencies":{"@types/uuid":"^8.3.1","@types/mermaid":"^8.2.7"},"_npmOperationalInternal":{"tmp":"tmp/rehype-mermaid_0.1.5_1629771111081_0.07601456634032178","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"rehype-mermaid","version":"2.0.1","keywords":["documentation","mdx","mermaid","plugin","rehype","rehype-plugin","remark","unified"],"author":{"name":"Remco Haszing","email":"remcohaszing@gmail.com"},"license":"MIT","_id":"rehype-mermaid@2.0.1","maintainers":[{"name":"remcohaszing","email":"remcohaszing@gmail.com"},{"name":"bitekong","email":"btk@qq.com"}],"homepage":"https://github.com/remcohaszing/rehype-mermaid#readme","bugs":{"url":"https://github.com/remcohaszing/rehype-mermaid/issues"},"dist":{"shasum":"a605e11287569b8f0bbda0a6ee71dd36d612024c","tarball":"https://registry.npmjs.org/rehype-mermaid/-/rehype-mermaid-2.0.1.tgz","fileCount":5,"integrity":"sha512-VSicCihg994Al3QMuIrHzFt2+BxQq6VP4riGGP0XUxtYM8Fhv8ZMdlBIPsX26iudeodBUWLGh84aOp1+xwoiJw==","signatures":[{"sig":"MEUCIF2R/6FdjT1k4RkuTKo/1t2Kx34ehkIMGK65sm8xuP+oAiEAp0apQCoxX2Pju+vKJoYli1W9/l7LZLFAfOkWQp3ZmQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/rehype-mermaid@2.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":19108},"type":"module","_from":"file:rehype-mermaid-2.0.1.tgz","types":"./index.d.ts","exports":"./index.js","funding":"https://github.com/sponsors/remcohaszing","scripts":{"test":"c8 ts-node-esm test/test.ts","prepack":"tsc --noEmit false"},"_npmUser":{"name":"remcohaszing","email":"remcohaszing@gmail.com"},"_resolved":"/home/runner/work/rehype-mermaid/rehype-mermaid/rehype-mermaid-2.0.1.tgz","_integrity":"sha512-VSicCihg994Al3QMuIrHzFt2+BxQq6VP4riGGP0XUxtYM8Fhv8ZMdlBIPsX26iudeodBUWLGh84aOp1+xwoiJw==","repository":{"url":"git+https://github.com/remcohaszing/rehype-mermaid.git","type":"git"},"_npmVersion":"10.1.0","description":"A rehype plugin to render mermaid diagrams","directories":{},"_nodeVersion":"20.8.1","dependencies":{"vfile":"^6.0.0","unified":"^11.0.0","@types/hast":"^3.0.0","hast-util-to-text":"^4.0.0","mini-svg-data-uri":"^1.0.0","mermaid-isomorphic":"^2.0.0","space-separated-tokens":"^2.0.0","unist-util-visit-parents":"^6.0.0","hast-util-from-html-isomorphic":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"c8":"^8.0.0","eslint":"^8.0.0","rehype":"^13.0.0","ts-node":"^10.0.0","prettier":"^3.0.0","remark-cli":"^11.0.0","typescript":"^5.0.0","@types/node":"^20.0.0","vfile-message":"^4.0.0","eslint-config-remcohaszing":"^10.0.0","remark-preset-remcohaszing":"^2.0.0","unist-util-remove-position":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rehype-mermaid_2.0.1_1697812510273_0.43781403478930336","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"rehype-mermaid","version":"2.1.0","keywords":["documentation","mdx","mermaid","plugin","rehype","rehype-plugin","remark","unified"],"author":{"name":"Remco Haszing","email":"remcohaszing@gmail.com"},"license":"MIT","_id":"rehype-mermaid@2.1.0","maintainers":[{"name":"remcohaszing","email":"remcohaszing@gmail.com"},{"name":"bitekong","email":"btk@qq.com"}],"homepage":"https://github.com/remcohaszing/rehype-mermaid#readme","bugs":{"url":"https://github.com/remcohaszing/rehype-mermaid/issues"},"dist":{"shasum":"7f1a50da33b457eb4717ac3175b5ef18799f80ba","tarball":"https://registry.npmjs.org/rehype-mermaid/-/rehype-mermaid-2.1.0.tgz","fileCount":8,"integrity":"sha512-YgzHXaUTzp+loffUvAoX+vtNNl36WL12GWYv4farPeW9GRFfYdgNg15O/3nADAW/Yh5/997Vv+0WaWOJ24/YSg==","signatures":[{"sig":"MEUCIQD54sBxn17WM+2xWxawvbM6VnkWWVYbv8/KApQXxT9bAgIgDKYZgl+S0VsNHNZRoG1HuU+tyRGXgJZmJfiMk3d80Hw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/rehype-mermaid@2.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":45193},"main":"./dist/rehype-mermaid.js","type":"module","_from":"file:rehype-mermaid-2.1.0.tgz","types":"./dist/rehype-mermaid.d.ts","exports":"./dist/rehype-mermaid.js","funding":"https://github.com/sponsors/remcohaszing","scripts":{"test":"c8 node --enable-source-maps dist/test.js","prepack":"tsc --build","pretest":"tsc --build"},"_npmUser":{"name":"remcohaszing","email":"remcohaszing@gmail.com"},"_resolved":"/home/runner/work/rehype-mermaid/rehype-mermaid/rehype-mermaid-2.1.0.tgz","_integrity":"sha512-YgzHXaUTzp+loffUvAoX+vtNNl36WL12GWYv4farPeW9GRFfYdgNg15O/3nADAW/Yh5/997Vv+0WaWOJ24/YSg==","repository":{"url":"git+https://github.com/remcohaszing/rehype-mermaid.git","type":"git"},"_npmVersion":"10.2.3","description":"A rehype plugin to render mermaid diagrams","directories":{},"_nodeVersion":"20.10.0","dependencies":{"vfile":"^6.0.0","unified":"^11.0.0","@types/hast":"^3.0.0","hast-util-to-text":"^4.0.0","mini-svg-data-uri":"^1.0.0","mermaid-isomorphic":"^2.0.0","space-separated-tokens":"^2.0.0","unist-util-visit-parents":"^6.0.0","hast-util-from-html-isomorphic":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"c8":"^9.0.0","eslint":"^8.0.0","rehype":"^13.0.0","prettier":"^3.0.0","remark-cli":"^11.0.0","typescript":"^5.0.0","@types/node":"^20.0.0","vfile-message":"^4.0.0","eslint-config-remcohaszing":"^10.0.0","remark-preset-remcohaszing":"^2.0.0","unist-util-remove-position":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rehype-mermaid_2.1.0_1705425148017_0.41425508454907956","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"rehype-mermaid","version":"3.0.0","keywords":["documentation","mdx","mermaid","plugin","rehype","rehype-plugin","remark","unified"],"author":{"name":"Remco Haszing","email":"remcohaszing@gmail.com"},"license":"MIT","_id":"rehype-mermaid@3.0.0","maintainers":[{"name":"remcohaszing","email":"remcohaszing@gmail.com"},{"name":"bitekong","email":"btk@qq.com"}],"homepage":"https://github.com/remcohaszing/rehype-mermaid#readme","bugs":{"url":"https://github.com/remcohaszing/rehype-mermaid/issues"},"dist":{"shasum":"e7e39dcfc2700dcd0c4f0bcf30840ff2180115aa","tarball":"https://registry.npmjs.org/rehype-mermaid/-/rehype-mermaid-3.0.0.tgz","fileCount":8,"integrity":"sha512-fxrD5E4Fa1WXUjmjNDvLOMT4XB1WaxcfycFIWiYU0yEMQhcTDElc9aDFnbDFRLxG1Cfo1I3mfD5kg4sjlWaB+Q==","signatures":[{"sig":"MEUCIQCT6Bw9tuSmWia6bLwfoodaXkrkYF8BYIRuJcTLDCq1fwIgeFVZsV4o2mgvxduT3h00R5I7ShgM0EKo7dYZxkbkdx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/rehype-mermaid@3.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":45086},"main":"./dist/rehype-mermaid.js","type":"module","_from":"file:rehype-mermaid-3.0.0.tgz","types":"./dist/rehype-mermaid.d.ts","exports":"./dist/rehype-mermaid.js","funding":"https://github.com/sponsors/remcohaszing","scripts":{"test":"c8 node --enable-source-maps --test","prepack":"tsc --build","pretest":"tsc --build"},"_npmUser":{"name":"remcohaszing","email":"remcohaszing@gmail.com"},"_resolved":"/home/runner/work/rehype-mermaid/rehype-mermaid/rehype-mermaid-3.0.0.tgz","_integrity":"sha512-fxrD5E4Fa1WXUjmjNDvLOMT4XB1WaxcfycFIWiYU0yEMQhcTDElc9aDFnbDFRLxG1Cfo1I3mfD5kg4sjlWaB+Q==","repository":{"url":"git+https://github.com/remcohaszing/rehype-mermaid.git","type":"git"},"_npmVersion":"10.8.3","description":"A rehype plugin to render mermaid diagrams","directories":{},"_nodeVersion":"22.9.0","dependencies":{"vfile":"^6.0.0","unified":"^11.0.0","@types/hast":"^3.0.0","hast-util-to-text":"^4.0.0","mini-svg-data-uri":"^1.0.0","mermaid-isomorphic":"^3.0.0","space-separated-tokens":"^2.0.0","unist-util-visit-parents":"^6.0.0","hast-util-from-html-isomorphic":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"c8":"^10.0.0","eslint":"^8.0.0","rehype":"^13.0.0","prettier":"^3.0.0","playwright":"^1.0.0","remark-cli":"^12.0.0","typescript":"^5.0.0","@types/node":"^22.0.0","vfile-message":"^4.0.0","snapshot-fixtures":"^1.0.0","eslint-config-remcohaszing":"^10.0.0","remark-preset-remcohaszing":"^3.0.0","unist-util-remove-position":"^5.0.0"},"peerDependencies":{"playwright":"1"},"peerDependenciesMeta":{"playwright":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/rehype-mermaid_3.0.0_1728413696069_0.9068466227624596","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-08-24T01:57:01.900Z","modified":"2026-01-28T21:35:33.626Z","0.1.2":"2021-08-20T05:46:03.224Z","0.1.0":"2021-08-24T01:57:02.066Z","0.1.5":"2021-08-24T02:11:51.461Z","2.0.1":"2023-10-20T14:35:10.475Z","2.1.0":"2024-01-16T17:12:28.223Z","3.0.0":"2024-10-08T18:54:56.311Z"},"bugs":{"url":"https://github.com/remcohaszing/rehype-mermaid/issues"},"author":{"name":"Remco Haszing","email":"remcohaszing@gmail.com"},"license":"MIT","homepage":"https://github.com/remcohaszing/rehype-mermaid#readme","keywords":["documentation","mdx","mermaid","plugin","rehype","rehype-plugin","remark","unified"],"repository":{"url":"git+https://github.com/remcohaszing/rehype-mermaid.git","type":"git"},"description":"A rehype plugin to render mermaid diagrams","maintainers":[{"email":"remcohaszing@gmail.com","name":"remcohaszing"}],"readme":"# rehype-mermaid\n\n[![github actions](https://github.com/remcohaszing/rehype-mermaid/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/rehype-mermaid/actions/workflows/ci.yaml)\n[![codecov](https://codecov.io/gh/remcohaszing/rehype-mermaid/branch/main/graph/badge.svg)](https://codecov.io/gh/remcohaszing/rehype-mermaid)\n[![npm version](https://img.shields.io/npm/v/rehype-mermaid)](https://www.npmjs.com/package/rehype-mermaid)\n[![npm downloads](https://img.shields.io/npm/dm/rehype-mermaid)](https://www.npmjs.com/package/rehype-mermaid)\n\nA [rehype](https://rehype.js.org) plugin to render [mermaid](https://mermaid-js.github.io) diagrams.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [`'img-png'`](#img-png)\n  - [`'img-svg'`](#img-svg)\n  - [`'inline-svg'`](#inline-svg)\n  - [`'pre-mermaid'`](#pre-mermaid)\n- [API](#api)\n  - [`unified().use(rehypeMermaid, options?)`](#unifieduserehypemermaid-options)\n- [Examples](#examples)\n  - [remark](#remark)\n  - [MDX](#mdx)\n- [Compatibility](#compatibility)\n- [Related Projects](#related-projects)\n- [Contributing](#contributing)\n- [Acknowledgements](#acknowledgements)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install rehype-mermaid\n```\n\nOutside of browsers `rehype-mermaid` uses [Playwright](https://playwright.dev). If you use this\noutside of a browser, you need to install Playwright and a Playwright browser.\n\n```sh\nnpm install playwright\nnpx playwright install --with-deps chromium\n```\n\nSee the Playwright [Browsers](https://playwright.dev/docs/browsers) documentation for more\ninformation.\n\n## Usage\n\nThis plugin takes all `<pre class=\"mermaid\">` and `<code class=\"language-mermaid\">` elements, and\nreplaces them with a rendered version of the diagram. If the `<code>` element is wrapped in a\n`<pre>` element, the `<pre>` element is replaced as well. This is compatible with what Mermaid would\nrender client side, as well as the output of `mermaid` code blocks processed by\n[`remark-rehype`](https://github.com/remarkjs/remark-rehype).\n\nThe plugin has several rendering strategies described below.\n\nGiven a file named `index.html`:\n\n```html\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n  </head>\n  <body>\n    <pre><code class=\"language-mermaid\">\n      graph TD;\n          A-->B;\n          A-->C;\n          B-->D;\n          C-->D;\n    </code></pre>\n    <pre class=\"mermaid\">\n      graph TD;\n          A-->B;\n          A-->C;\n          B-->D;\n          C-->D;\n    </pre>\n  </body>\n</html>\n```\n\nThe following script:\n\n```js\nimport { readFile } from 'node:fs/promises'\n\nimport { rehype } from 'rehype'\nimport rehypeMermaid from 'rehype-mermaid'\n\nconst { value } = await rehype()\n  .use(rehypeMermaid, {\n    // The default strategy is 'inline-svg'\n    // strategy: 'img-png'\n    // strategy: 'img-svg'\n    // strategy: 'inline-svg'\n    // strategy: 'pre-mermaid'\n  })\n  .process(await readFile('index.html'))\n\nconsole.log(value)\n```\n\nYields the following results, depending on the stragey used.\n\n### `'img-png'`\n\nThis strategy renders a diagram as an `<img>` element with an inline base64 PNG image. Given the\nexample, this yields:\n\n```html\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n  </head>\n  <body>\n    <img alt=\"\" height=\"215\" id=\"mermaid-0\" src=\"data:image/png;base64,iVBORw0KGgoA…\" width=\"118\" />\n    <img alt=\"\" height=\"215\" id=\"mermaid-1\" src=\"data:image/png;base64,iVBORw0KGgoA…\" width=\"118\" />\n  </body>\n</html>\n```\n\nThis strategy is asynchronous.\n\nThis strategy supports the [`dark`](#dark) option.\n\n### `'img-svg'`\n\nThis strategy renders a diagram as an `<img>` element with an inline SVG image. Given the example,\nthis yields:\n\n```html\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n  </head>\n  <body>\n    <img alt=\"\" height=\"215\" id=\"mermaid-0\" src=\"data:image/xml+svg,%3csvg…\" width=\"118\" />\n    <img alt=\"\" height=\"215\" id=\"mermaid-1\" src=\"data:image/xml+svg,%3csvg…\" width=\"118\" />\n  </body>\n</html>\n```\n\nThis strategy is asynchronous.\n\nThis strategy supports the [`dark`](#dark) option.\n\n### `'inline-svg'`\n\nThis strategy renders a diagram as an inline `<svg>` element. Given the example, this yields:\n\n```html\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n  </head>\n  <body>\n    <svg id=\"mermaid-0\" …>…</svg>\n    <svg id=\"mermaid-1\" …>…</svg>\n  </body>\n</html>\n```\n\nThis strategy is asynchronous.\n\nThis strategy does not support the [`dark`](#dark) option.\n\n### `'pre-mermaid'`\n\nThis strategy replaces the element with a `<pre class=\"mermaid\">` element with only the diagram as\nits child. Given the example, this yields:\n\n```html\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n  </head>\n  <body>\n    <pre class=\"mermaid\">\n      graph TD;\n          A-->B;\n          A-->C;\n          B-->D;\n          C-->D;\n    </pre>\n    <pre class=\"mermaid\">\n      graph TD;\n          A-->B;\n          A-->C;\n          B-->D;\n          C-->D;\n    </pre>\n  </body>\n</html>\n```\n\nThis allows Mermaid to render the diagram on the client side, for example using:\n\n```js\nimport mermaid from 'mermaid'\n\nmermaid.initialize({ startOnLoad: true })\n```\n\nThis strategy is synchronous.\n\nThis strategy does not support the [`dark`](#dark) option.\n\n## API\n\nThis package has a default export `rehypeMermaid`.\n\n### `unified().use(rehypeMermaid, options?)`\n\n#### `options`\n\n##### `browser`\n\nThe Playwright browser to use. (`object`, default: chromium)\n\n##### `colorScheme`\n\nThe default color scheme.\n\nIf not specified, `rehype-mermaid` will determine the color scheme based on the `color-scheme` meta\ntag. If this doesn’t exist, the default color scheme is `light`. (`string`)\n\n##### `css`\n\nA URL that points to a custom CSS file to load. Use this to load custom fonts. This option is\nignored in the browser. You need to include the CSS in your build manually. (`string` | `URL`)\n\n##### `dark`\n\nIf specified, add responsive dark mode using a `<picture>` element.\n\nThis option is only supported by the [`img-png`](#img-png) and [`img-svg`](#img-svg) strategies.\n\n##### `errorFallback`\n\nCreate a fallback node if processing of a mermaid diagram fails. If nothing is returned, the code\nblock is removed. The function receives the following arguments:\n\n- `element` The hast element that could not be rendered.\n- `diagram` The Mermaid diagram that could not be rendered as a string.\n- `error`: The error that was thrown.\n- `file`: The file on which the error occurred.\n\n##### `launchOptions`\n\nThe options used to launch the browser. (`object`)\n\n##### `mermaidConfig`\n\nA custom Mermaid configuration. By default `fontFamily` is set to `arial,sans-serif`. This option is\nignored in the browser. You need to call `mermaid.initialize()` manually. (`object`)\n\n##### `prefix`\n\nA custom prefix to use for Mermaid IDs. (`string`, default: `mermaid`)\n\n##### `strategy`\n\nThe render strategy to use. One of [`'img-png'`](#img-png), [`'img-svg'`](#img-svg),\n[`'inline-svg'`](#inline-svg), or [`'pre-mermaid'`](#pre-mermaid). (default:\n[`'inline-svg'`](#inline-svg))\n\n## Examples\n\n### remark\n\nThis package works with Mermaid codeblocks in markdown using\n[`remark-parse`](https://github.com/remarkjs/remark/tree/main/packages/remark-parse),\n[`remark-rehype`](https://github.com/remarkjs/remark-rehype), and\n[`rehype-stringify`](https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify).\n\n```js\nimport rehypeMermaid from 'rehype-mermaid'\nimport rehypeStringify from 'rehype-stringify'\nimport remarkParse from 'remark'\nimport remarkRehype from 'remark-rehype'\nimport { unified } from 'unified'\n\nconst processor = unified()\n  .use(remarkParse)\n  .use(remarkRehype)\n  .use(rehypeMermaid)\n  .use(rehypeStringify)\n\nconst markdown = `\n# Mermaid Diagram\n\n\\`\\`\\`mermaid\ngraph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n\\`\\`\\`\n`\n\nconst { value } = await processor.process(markdown)\n\nconsole.log(value)\n```\n\n### MDX\n\nThis package works with Mermaid codeblocks in MDX.\n\n```js\nimport { compile } from '@mdx-js/mdx'\nimport rehypeMermaid from 'rehype-mermaid'\n\nconst mdx = `\n# Mermaid Diagram\n\n\\`\\`\\`mermaid\ngraph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;\n\\`\\`\\`\n`\n\nconst { value } = await compile(mdx, {\n  rehypePlugins: [rehypeMermaid]\n})\n\nconsole.log(value)\n```\n\n## Compatibility\n\nThis project is compatible with Node.js 18 or greater. It’s compatible with `mermaid` code blocks\nprocessed by [`remark-rehype`](https://github.com/remarkjs/remark-rehype). This means it’s also\ncompatible with [MDX](https://mdxjs.com).\n\n## Related Projects\n\n- [`mermaid`](https://mermaid.js.org) is the library that’s used to render the diagrams.\n- [`mermaid-isomorphic`](https://github.com/remcohaszing/mermaid-isomorphic) allows this package to\n  render Mermaid diagrams in both Node.js and the browser.\n- [`rehype`](https://github.com/rehypejs/rehype) provides HTML processing using a\n  [unified](https://unifiedjs.com) pipeline.\n\n## Contributing\n\nTest fixtures are generated and verified using Linux. Rendering on other platforms may yield\nslightly different results. Don’t worry about adding new fixtures, but don’t update existing ones\nthat cause CI to fail. Furthermore see my global\n[contributing guidelines](https://github.com/remcohaszing/.github/blob/main/CONTRIBUTING.md).\n\n## Acknowledgements\n\nThanks to [@bitekong](https://github.com/bitekong) for giving me the npm package name.\n\n## License\n\n[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)\n","readmeFilename":"README.md"}