{"_id":"@avol-io/react-mermaid","_rev":"5-18d71af402d1cebbad1bb180ac7e2188","name":"@avol-io/react-mermaid","dist-tags":{"latest":"0.3.1"},"versions":{"0.2.0":{"name":"@avol-io/react-mermaid","version":"0.2.0","keywords":["react","mermaid","diagram","diagrams","flowchart","uml","markdown","visualization","zoom","pan","fullscreen","vite","storybook"],"license":"GPL-3.0-or-later","_id":"@avol-io/react-mermaid@0.2.0","maintainers":[{"name":"avolio","email":"social@avol.io"}],"homepage":"https://www.avol.io/react-mermaid","bugs":{"url":"https://github.com/avol-io/react-mermaid/issues"},"dist":{"shasum":"aa3e9982a6fc5dfb35a126ddc8b820479cc8af0a","tarball":"https://registry.npmjs.org/@avol-io/react-mermaid/-/react-mermaid-0.2.0.tgz","fileCount":11,"integrity":"sha512-vZcug/21gXUwE/RZzQA/XRZUODxAmZ2OmoMMO4WqAlKmePx5TQtpOqHRx/BhWt0GtNdpOPkRgY6tgFgFEup8HA==","signatures":[{"sig":"MEYCIQD2ee7j/1mw4nqLCTIMxO5SxCDfbckeJf2qVZ3oyQ5TowIhALoRm9dZChGQdZwkKuqODrelD7L7e5a72SWPeYcoYTXw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24188},"main":"./dist/react-mermaid.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/react-mermaid.js","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-mermaid.js","require":"./dist/react-mermaid.umd.cjs"}},"gitHead":"e82ac29a859206138c9603b8289bdae883c1585c","scripts":{"build":"vite build","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"avolio","email":"social@avol.io"},"repository":{"url":"git+https://github.com/avol-io/react-mermaid.git","type":"git"},"_npmVersion":"10.9.7","description":"React component for rendering Mermaid diagrams with zoom, pan, and fullscreen support.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"remark-gfm":"^4.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","react":"^19.0.0","mermaid":"^11.0.0","react-dom":"^19.0.0","storybook":"^10.3.4","typescript":"^5.6.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.3.0","@storybook/react":"^10.3.4","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","react-zoom-pan-pinch":"^3.7.0","@storybook/addon-docs":"^10.3.4","@storybook/react-vite":"^10.3.4"},"peerDependencies":{"react":">=19","mermaid":">=11","react-dom":">=19","react-zoom-pan-pinch":">=3"},"_npmOperationalInternal":{"tmp":"tmp/react-mermaid_0.2.0_1775693980329_0.9109256337982481","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@avol-io/react-mermaid","version":"0.2.1","keywords":["react","mermaid","diagram","diagrams","flowchart","uml","markdown","visualization","zoom","pan","fullscreen","vite","storybook"],"license":"GPL-3.0-or-later","_id":"@avol-io/react-mermaid@0.2.1","maintainers":[{"name":"avolio","email":"social@avol.io"}],"homepage":"https://www.avol.io/react-mermaid","bugs":{"url":"https://github.com/avol-io/react-mermaid/issues"},"dist":{"shasum":"68228ca42f9d23890872c90303c7c619a35e4825","tarball":"https://registry.npmjs.org/@avol-io/react-mermaid/-/react-mermaid-0.2.1.tgz","fileCount":11,"integrity":"sha512-OPaKq3HTCkU+sf9lqTjCChn2q5XHKK76ZhZuk//uR/5hvndnyDGKDuKw4PSlzjvdIH7MhgfzmnIqX9fi5iatWw==","signatures":[{"sig":"MEYCIQDvX4DyisW3M75hOQMaQ2TX5NilhfQs0a15sMU+JZkTiAIhALTXgCHaUFHraSu8wk6C0NL95aD5YZbGsRStnF6NKtQZ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24188},"main":"./dist/react-mermaid.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/react-mermaid.js","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-mermaid.js","require":"./dist/react-mermaid.umd.cjs"}},"gitHead":"e394d9ef0293af320bf36fb193ab7151f1da855c","scripts":{"build":"vite build","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"avolio","email":"social@avol.io"},"repository":{"url":"git+https://github.com/avol-io/react-mermaid.git","type":"git"},"_npmVersion":"10.9.7","description":"React component for rendering Mermaid diagrams with zoom, pan, and fullscreen support.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"remark-gfm":"^4.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","react":"^19.0.0","mermaid":"^11.0.0","react-dom":"^19.0.0","storybook":"^10.3.4","typescript":"^5.6.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.3.0","@storybook/react":"^10.3.4","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","react-zoom-pan-pinch":"^3.7.0","@storybook/addon-docs":"^10.3.4","@storybook/react-vite":"^10.3.4"},"peerDependencies":{"react":">=19","mermaid":">=11","react-dom":">=19","react-zoom-pan-pinch":">=3"},"_npmOperationalInternal":{"tmp":"tmp/react-mermaid_0.2.1_1775696368696_0.3029493568391062","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@avol-io/react-mermaid","version":"0.2.2","keywords":["react","mermaid","diagram","diagrams","flowchart","uml","markdown","visualization","zoom","pan","fullscreen","vite","storybook"],"license":"MIT","_id":"@avol-io/react-mermaid@0.2.2","maintainers":[{"name":"avolio","email":"social@avol.io"}],"homepage":"https://www.avol.io/react-mermaid","bugs":{"url":"https://github.com/avol-io/react-mermaid/issues"},"dist":{"shasum":"cffb878938953f057ec7bd88aaf5004f94c089d9","tarball":"https://registry.npmjs.org/@avol-io/react-mermaid/-/react-mermaid-0.2.2.tgz","fileCount":11,"integrity":"sha512-w2+6XBykryfC5vzlrzUW7mhXe9dtR470ftllCVf3mX1UpbJ8ZqBf4DZpDguSGIu8MgfzjP7VxjySyyeKLaCcWw==","signatures":[{"sig":"MEUCIQCaWxk6MXgC5rfEVvah618wZN6CZfkApXT08tGYKqYDEwIgcNH1NjtX9gnki9Q0CMtGZyWak2H8sWVjQmtQyaF6e7c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24758},"main":"./dist/react-mermaid.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/react-mermaid.js","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-mermaid.js","require":"./dist/react-mermaid.umd.cjs"}},"gitHead":"a91a157f5196509aa2992a189a97c328dbe910a8","scripts":{"build":"vite build","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"avolio","email":"social@avol.io"},"repository":{"url":"git+https://github.com/avol-io/react-mermaid.git","type":"git"},"_npmVersion":"10.9.7","description":"React component for rendering Mermaid diagrams with zoom, pan, and fullscreen support.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"remark-gfm":"^4.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","react":"^19.0.0","mermaid":"^11.0.0","react-dom":"^19.0.0","storybook":"^10.3.4","typescript":"^5.6.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.3.0","@storybook/react":"^10.3.4","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","react-zoom-pan-pinch":"^3.7.0","@storybook/addon-docs":"^10.3.4","@storybook/react-vite":"^10.3.4"},"peerDependencies":{"react":">=19","mermaid":">=11","react-dom":">=19","react-zoom-pan-pinch":">=3"},"_npmOperationalInternal":{"tmp":"tmp/react-mermaid_0.2.2_1775929492051_0.9351708497411058","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@avol-io/react-mermaid","version":"0.3.0","keywords":["react","mermaid","diagram","diagrams","flowchart","uml","markdown","visualization","zoom","pan","fullscreen","vite","storybook"],"license":"MIT","_id":"@avol-io/react-mermaid@0.3.0","maintainers":[{"name":"avolio","email":"social@avol.io"}],"homepage":"https://www.avol.io/react-mermaid","bugs":{"url":"https://github.com/avol-io/react-mermaid/issues"},"dist":{"shasum":"69cfb6985732fdc5faaddde615a67f38bfd0a721","tarball":"https://registry.npmjs.org/@avol-io/react-mermaid/-/react-mermaid-0.3.0.tgz","fileCount":12,"integrity":"sha512-I8EBYnGw+rZK7HaJ+ekOfe/tN/X98Hqo1M2gDHm036rwH2AT5K+E5nDSvABpKbKlu6TDOoaBveT5evnpLBdHYw==","signatures":[{"sig":"MEYCIQDlssrQZw9oY2RrEUjh7ZyjhCdU0s5zso9hNggCxRgukgIhAMKjAcJRVqz+W4QNi3g33KJhZJe0Ge0SzLeIr3Jco+KK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48257},"main":"./dist/react-mermaid.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/react-mermaid.js","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-mermaid.js","require":"./dist/react-mermaid.umd.cjs"}},"gitHead":"cde4d2fddb0a90ff95ee9e09844711e989664faf","scripts":{"build":"vite build","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"avolio","email":"social@avol.io"},"repository":{"url":"git+https://github.com/avol-io/react-mermaid.git","type":"git"},"_npmVersion":"10.8.2","description":"React component for rendering Mermaid diagrams with zoom, pan, and fullscreen support.","directories":{},"_nodeVersion":"18.20.5","dependencies":{"remark-gfm":"^4.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","react":"^19.0.0","mermaid":"^11.0.0","react-dom":"^19.0.0","storybook":"^10.3.4","typescript":"^5.6.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.3.0","@storybook/react":"^10.3.4","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","react-zoom-pan-pinch":"^3.7.0","@storybook/addon-docs":"^10.3.4","@storybook/react-vite":"^10.3.4"},"peerDependencies":{"react":">=19","mermaid":">=11","react-dom":">=19","react-zoom-pan-pinch":">=3"},"_npmOperationalInternal":{"tmp":"tmp/react-mermaid_0.3.0_1776527135185_0.3013066016051773","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@avol-io/react-mermaid","version":"0.3.1","description":"React component for rendering Mermaid diagrams with zoom, pan, and fullscreen support.","license":"MIT","type":"module","homepage":"https://www.avol.io/react-mermaid","repository":{"type":"git","url":"git+https://github.com/avol-io/react-mermaid.git"},"bugs":{"url":"https://github.com/avol-io/react-mermaid/issues"},"keywords":["react","mermaid","diagram","diagrams","flowchart","uml","markdown","visualization","zoom","pan","fullscreen","vite","storybook"],"publishConfig":{"access":"public"},"engines":{"node":">=20"},"main":"./dist/react-mermaid.umd.cjs","module":"./dist/react-mermaid.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-mermaid.js","require":"./dist/react-mermaid.umd.cjs"}},"scripts":{"build":"vite build","storybook":"storybook dev -p 6006","build-storybook":"storybook build","preview":"vite preview"},"peerDependencies":{"mermaid":">=11","react":">=19","react-dom":">=19","react-zoom-pan-pinch":">=3"},"devDependencies":{"@storybook/addon-docs":"^10.3.4","@storybook/react":"^10.3.4","@storybook/react-vite":"^10.3.4","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.0","mermaid":"^11.0.0","react":"^19.0.0","react-dom":"^19.0.0","react-zoom-pan-pinch":"^3.7.0","storybook":"^10.3.4","typescript":"^5.6.0","vite":"^6.0.0","vite-plugin-dts":"^4.3.0"},"dependencies":{"remark-gfm":"^4.0.1"},"_id":"@avol-io/react-mermaid@0.3.1","gitHead":"b10e2ba141042db8be8853306521657b603d200e","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-GZsiX8FMNb4mmqO5oFCOX3CNxiOhKLdmr8t31e0E6Y9qUpgg1G5760EmrdDq4z1L4beXuHJFfhUyPwZXjWfBUg==","shasum":"621c30b8c775716e714fe7d2b035873150d98904","tarball":"https://registry.npmjs.org/@avol-io/react-mermaid/-/react-mermaid-0.3.1.tgz","fileCount":12,"unpackedSize":48450,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDwJMKaJulQ/8yX7DxW7cks4e2TkvXInIeHzBenPC+kTQIhAPK2NTcoQvtejI1etuHUQiZdeXtUTL+FazBLN8DFDLO+"}]},"_npmUser":{"name":"avolio","email":"social@avol.io"},"directories":{},"maintainers":[{"name":"avolio","email":"social@avol.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-mermaid_0.3.1_1776533470603_0.9454700350233671"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-09T00:19:40.266Z","modified":"2026-04-18T17:31:10.894Z","0.2.0":"2026-04-09T00:19:40.458Z","0.2.1":"2026-04-09T00:59:28.830Z","0.2.2":"2026-04-11T17:44:52.202Z","0.3.0":"2026-04-18T15:45:35.327Z","0.3.1":"2026-04-18T17:31:10.750Z"},"bugs":{"url":"https://github.com/avol-io/react-mermaid/issues"},"license":"MIT","homepage":"https://www.avol.io/react-mermaid","keywords":["react","mermaid","diagram","diagrams","flowchart","uml","markdown","visualization","zoom","pan","fullscreen","vite","storybook"],"repository":{"type":"git","url":"git+https://github.com/avol-io/react-mermaid.git"},"description":"React component for rendering Mermaid diagrams with zoom, pan, and fullscreen support.","maintainers":[{"name":"avolio","email":"social@avol.io"}],"readme":"# @avol-io/react-mermaid\n\n> React component that renders [Mermaid](https://mermaid.js.org/) diagrams with zoom, pan, directional controls, fullscreen, download, and draw.io integration.\n\n[![Storybook](https://img.shields.io/badge/Storybook-docs-ff4785?logo=storybook&logoColor=white)](https://www.avol.io/react-mermaid/)\n[![npm](https://img.shields.io/npm/v/@avol-io/react-mermaid?color=cb3837&logo=npm)](https://www.npmjs.com/package/@avol-io/react-mermaid)\n[![license](https://img.shields.io/npm/l/@avol-io/react-mermaid)](https://github.com/avol-io/2chatty/blob/main/LICENSE)\n\n---\n\n## Installation\n\n```bash\nnpm install @avol-io/react-mermaid\n```\n\n### Peer dependencies\n\n```bash\nnpm install react react-dom mermaid react-zoom-pan-pinch\n```\n\n| Package | Required version |\n|---|---|\n| `react` | `>=19` |\n| `react-dom` | `>=19` |\n| `mermaid` | `>=11` |\n| `react-zoom-pan-pinch` | `>=3` |\n\n---\n\n## Usage\n\n```tsx\nimport { MermaidDiagram } from '@avol-io/react-mermaid'\n\nexport function App() {\n  return (\n    <MermaidDiagram\n      chart={`\n        graph TD\n          A[Start] --> B{Decision}\n          B -- Yes --> C[Done]\n          B -- No  --> D[Skip]\n      `}\n      width=\"100%\"\n      height=\"400px\"\n    />\n  )\n}\n```\n\n---\n\n## API\n\n### MermaidDiagram\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `chart` | `string` | required | Mermaid source text |\n| `width` | `string` | `\"100%\"` | CSS width of the container |\n| `height` | `string` | `\"400px\"` | CSS height of the container |\n| `config` | `MermaidConfig` | — | Options forwarded to `mermaid.initialize()` |\n| `enableDownloadSvg` | `boolean` | `true` | Show \"SVG\" option in the download dropdown |\n| `enableDownloadMmd` | `boolean` | `true` | Show \".mmd\" option in the download dropdown |\n| `enableDrawio` | `boolean` | `true` | Show \"Open in draw.io\" button in the toolbar |\n\n> When both `enableDownloadSvg` and `enableDownloadMmd` are `false`, the download\n> dropdown button is not rendered at all.\n\n### Modal\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `title` | `string` | `\"Error\"` | Modal heading |\n| `onClose` | `() => void` | required | Called on Escape, overlay click, or close button |\n| `children` | `ReactNode` | required | Modal body content |\n\n---\n\n## Toolbar\n\n### Top-right\n- **Download** — dropdown with SVG and `.mmd` options (each independently toggleable via props)\n- **Open in draw.io** — opens [app.diagrams.net](https://app.diagrams.net) with the diagram preloaded via Mermaid import URL\n- **Fullscreen** — toggles a fixed fullscreen overlay\n\n### Bottom-right (3×3 grid)\n- **Arrow buttons** — pan the diagram in all four directions\n- **Center button** — resets the view to fit the content in the container\n- **Zoom in / Zoom out** — step zoom (wheel zoom also supported, follows the cursor)\n\n---\n\n## Styling\n\nNo CSS import required. On first render a `<style id=\"avol-react-mermaid-styles\">` tag is injected\ninto `<head>` once and reused by all instances.\n\nAll colors and sizes are exposed as **CSS custom properties**. Override them on `:root` for a\nglobal theme, or scope to a container class for per-instance theming:\n\n```css\n/* dark theme example */\n:root {\n  --mermaid-bg: #1f2937;\n  --mermaid-border-color: #374151;\n  --mermaid-toolbar-bg: rgba(17, 24, 39, 0.9);\n  --mermaid-toolbar-color: #f9fafb;\n  --mermaid-toolbar-hover-bg: #111827;\n  --mermaid-toolbar-border: #4b5563;\n  --mermaid-fullscreen-bg: #111827;\n  --mermaid-dropdown-bg: #1f2937;\n  --mermaid-dropdown-item-color: #f3f4f6;\n  --mermaid-dropdown-item-hover: #374151;\n}\n```\n\n### Available tokens\n\n| Token | Default | Controls |\n|---|---|---|\n| `--mermaid-bg` | `transparent` | container background |\n| `--mermaid-border-color` | `rgba(0,0,0,0.12)` | container border color |\n| `--mermaid-border-radius` | `8px` | container corner radius |\n| `--mermaid-toolbar-bg` | `rgba(255,255,255,0.9)` | button background |\n| `--mermaid-toolbar-border` | `rgba(0,0,0,0.12)` | button border |\n| `--mermaid-toolbar-color` | `#374151` | button icon/text color |\n| `--mermaid-toolbar-hover-bg` | `#ffffff` | button hover background |\n| `--mermaid-toolbar-hover-shadow` | `0 2px 8px rgba(0,0,0,0.1)` | button hover shadow |\n| `--mermaid-toolbar-focus-ring` | `#01696f` | focus outline color |\n| `--mermaid-toolbar-btn-size` | `30px` | button width & height |\n| `--mermaid-toolbar-btn-radius` | `6px` | button corner radius |\n| `--mermaid-dropdown-bg` | `#ffffff` | dropdown panel background |\n| `--mermaid-dropdown-border` | `rgba(0,0,0,0.1)` | dropdown border |\n| `--mermaid-dropdown-shadow` | `0 4px 12px rgba(0,0,0,0.12)` | dropdown shadow |\n| `--mermaid-dropdown-item-hover` | `#f3f4f6` | dropdown item hover background |\n| `--mermaid-dropdown-item-color` | `#374151` | dropdown item text color |\n| `--mermaid-error-bg` | `#fef2f2` | error banner background |\n| `--mermaid-error-border` | `#fecaca` | error banner border |\n| `--mermaid-error-color` | `#dc2626` | error banner text |\n| `--mermaid-fullscreen-bg` | `#ffffff` | fullscreen overlay background |\n| `--mermaid-fullscreen-zindex` | `9998` | fullscreen z-index |\n\n---\n\n## Live docs\n\nhttps://www.avol.io/react-mermaid/\n\n---\n\n## License\n\nMIT &copy; [avol.io](https://avol.io)","readmeFilename":"README.md"}