{"_id":"prosemirror-mermaid","name":"prosemirror-mermaid","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"prosemirror-mermaid","author":{"name":"Mayank Kumar Chaudhari","url":"https:/mayank-chaudhari.vercel.app"},"private":false,"version":"0.0.0","description":"ProseMirror plugin for rendering Mermaid diagrams in code blocks. Extensible and wrappable as a Tiptap extension.","license":"MPL-2.0","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/md2docx/prosemirror-mermaid.git"},"bugs":{"url":"https://github.com/md2docx/prosemirror-mermaid/issues"},"homepage":"https://github.com/md2docx/prosemirror-mermaid/#readme","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.mjs","require":"./dist/*.js"}},"scripts":{"build":"tsup && tsc -p tsconfig-build.json && gzip -c dist/index.js | wc -c","clean":"rm -rf dist","dev":"tsup --watch && tsc -p tsconfig-build.json -w","typecheck":"tsc --noEmit","test":"vitest run --coverage"},"dependencies":{"@svg-fns/io":"^1.0.1","@svg-fns/layout":"^0.1.0","lowlight-mermaid":"^0.0.0","mermaid":"^11.12.0"},"devDependencies":{"@repo/typescript-config":"workspace:*","@types/node":"^24.6.2","@vitest/coverage-v8":"^3.2.4","esbuild-plugin-rdi":"^0.0.0","jsdom":"^27.0.0","lowlight":"^3.3.0","prosemirror-model":"^1.18.3","prosemirror-state":"^1.4.3","prosemirror-view":"^1.28.2","tsup":"^8.5.0","typescript":"^5.9.3","vite-tsconfig-paths":"^5.1.4","vitest":"^3.2.4"},"peerDependencies":{"lowlight":"^3.3.0","prosemirror-model":"^1.18.3","prosemirror-state":"^1.4.3","prosemirror-view":"^1.28.2"},"funding":[{"type":"github","url":"https://github.com/sponsors/md2docx"},{"type":"github","url":"https:/github.com/sponsors/mayank1513"}],"keywords":["prosemirror","tiptap","mermaid","markdown","code-block","lowlight","plugin","diagram","svg","editor","visualization","frontend","ui","web","integration","modern","md2docx","mayank1513"],"_id":"prosemirror-mermaid@0.0.0","gitHead":"97edf28c5e8fb75c21ed6cc0acac3542aaa01f05","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-JKnrnPG6cyDqFotIH9bVGSRSI+WYktBWxGhvj2llx2JhvhC490KjufoNGKOtLUFnFXBk41yhHS4rgFyFo3JVvQ==","shasum":"0c804e9de3c18dabd732475007c929ff4e341b32","tarball":"https://registry.npmjs.org/prosemirror-mermaid/-/prosemirror-mermaid-0.0.0.tgz","fileCount":13,"unpackedSize":640553,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/prosemirror-mermaid@0.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAnL9oTPU3p8ehuX2jWKtlyo/uS6i2R/nt2TwHmaE3u9AiEAq3uCxDI20thSFSqMb1/5fhxFuo8pTn+jiyG/1ZBu45M="}]},"_npmUser":{"name":"mayank1513","email":"mayank.srmu@gmail.com"},"directories":{},"maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/prosemirror-mermaid_0.0.0_1759655305454_0.10129946808750745"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-05T09:08:25.351Z","0.0.0":"2025-10-05T09:08:25.675Z","modified":"2025-10-05T09:08:26.158Z"},"maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"description":"ProseMirror plugin for rendering Mermaid diagrams in code blocks. Extensible and wrappable as a Tiptap extension.","homepage":"https://github.com/md2docx/prosemirror-mermaid/#readme","keywords":["prosemirror","tiptap","mermaid","markdown","code-block","lowlight","plugin","diagram","svg","editor","visualization","frontend","ui","web","integration","modern","md2docx","mayank1513"],"repository":{"type":"git","url":"git+https://github.com/md2docx/prosemirror-mermaid.git"},"author":{"name":"Mayank Kumar Chaudhari","url":"https:/mayank-chaudhari.vercel.app"},"bugs":{"url":"https://github.com/md2docx/prosemirror-mermaid/issues"},"license":"MPL-2.0","readme":"# Prosemirror Mermaid <img src=\"https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png\" style=\"height: 40px\"/>\n\n[![test](https://github.com/md2docx/prosemirror-mermaid/actions/workflows/test.yml/badge.svg)](https://github.com/md2docx/prosemirror-mermaid/actions/workflows/test.yml)\n[![Maintainability](https://qlty.sh/gh/md2docx/projects/prosemirror-mermaid/maintainability.svg)](https://qlty.sh/gh/md2docx/projects/prosemirror-mermaid)\n[![codecov](https://codecov.io/gh/md2docx/prosemirror-mermaid/graph/badge.svg)](https://codecov.io/gh/md2docx/prosemirror-mermaid)\n[![Version](https://img.shields.io/npm/v/prosemirror-mermaid.svg?colorB=green)](https://www.npmjs.com/package/prosemirror-mermaid)\n[![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/prosemirror-mermaid.svg)](https://www.npmjs.com/package/prosemirror-mermaid)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/prosemirror-mermaid)\n[![NPM License](https://img.shields.io/npm/l/prosemirror-mermaid)](../LICENSE)\n\n> 🧩 A lightweight **ProseMirror plugin** that renders [Mermaid](https://mermaid.js.org/) diagrams directly inside the editor — with live updates, caching, and tight SVG cropping.\n\n---\n\n## ✨ Features\n\n- **Live rendering** — Mermaid diagrams update automatically as you type.\n- **Debounced updates** — Smooth, performant re-rendering (default: 300 ms).\n- **Smart caching** — Re-renders only when the diagram source changes.\n- **Syntax highlighting** — Works seamlessly with [`lowlight`](https://github.com/wooorm/lowlight) and `lowlight-mermaid`.\n- **Tight SVG cropping** — Uses [`@svg-fns/layout`](https://github.com/mayank1513/svg-fns) for clean, whitespace-free output.\n- **Robust architecture** — Follows ProseMirror best practices via widget decorations and plugin-managed lifecycle.\n\n---\n\n## 🚀 Installation\n\n```bash\npnpm add prosemirror-mermaid\n```\n\n**_or_**\n\n```bash\nnpm install prosemirror-mermaid\n```\n\n**_or_**\n\n```bash\nyarn add prosemirror-mermaid\n```\n\n---\n\n## 🧩 Usage\n\n```ts\nimport { EditorState } from \"prosemirror-state\";\nimport { EditorView } from \"prosemirror-view\";\nimport { mermaidPlugin } from \"prosemirror-mermaid\";\nimport mermaid from \"mermaid\";\n\n// Important: initialize Mermaid yourself\nmermaid.initialize({ startOnLoad: false });\n\nconst state = EditorState.create({\n  schema,\n  plugins: [\n    // ... other plugins\n    mermaidPlugin({ name: \"codeBlock\" }),\n  ],\n});\n\nconst view = new EditorView(document.querySelector(\"#editor\"), { state });\n```\n\n---\n\n## ⚙️ Options\n\n| Option              | Type                                | Default       | Description                                                                                    |\n| ------------------- | ----------------------------------- | ------------- | ---------------------------------------------------------------------------------------------- |\n| **`name`**          | `string`                            | `'codeBlock'` | Node type treated as Mermaid block.                                                            |\n| **`lowlight`**      | `ReturnType<typeof createLowlight>` | —             | Enables syntax highlighting. Registers `mermaid`, `mmd`, and `mindmap` grammars automatically. |\n| **`debounce`**      | `number`                            | `300`         | Delay (ms) before re-rendering after edits.                                                    |\n| **`mermaidConfig`** | `MermaidConfig`                     | —             | Pass directly to `mermaid.initialize()`.                                                       |\n| **`classList`**     | `string[] \\| string`                | —             | CSS classes applied to each diagram container.                                                 |\n\n---\n\n## 🧠 Node Requirements\n\nYour ProseMirror schema’s Mermaid node (usually `codeBlock`) must include:\n\n- `language`: must be `\"mermaid\"`, `\"mmd\"`, or `\"mindmap\"`.\n- `id`: unique identifier (e.g., `m1234abcd`).\n\nThis is typically managed by your editor or nodeView logic.\nIf you’re using [tiptap](https://tiptap.dev/), you can generate stable IDs via an `addAttributes()` extension override.\n\n---\n\n## 🧩 Example Integration (Tiptap)\n\n```ts\nimport { CodeBlockLowlight } from \"@tiptap/extension-code-block-lowlight\";\nimport { createLowlight } from \"lowlight\";\nimport { mermaidPlugin } from \"prosemirror-mermaid\";\nimport mermaid from \"mermaid\";\n\nconst lowlight = createLowlight();\nmermaid.initialize({ startOnLoad: false });\n\nconst editor = useEditor({\n  extensions: [\n    CodeBlockLowlight.configure({ lowlight }).extend({\n      addAttributes() {\n        const parentAttrs = this.parent?.() ?? {};\n\n        return {\n          ...parentAttrs,\n          id: {\n            default: () => `m${crypto.randomUUID().slice(0, 8)}`,\n            parseHTML: element =>\n              element.getAttribute(\"data-id\") || `m${crypto.randomUUID().slice(0, 8)}`,\n            renderHTML: attributes => {\n              if (!attributes.id) return {};\n              return { \"data-id\": attributes.id };\n            },\n          },\n        };\n      },\n      addProseMirrorPlugins() {\n        return [\n          ...(this.parent?.() || []),\n          mermaidPlugin({\n            name: this.name,\n            lowlight: this.options.lowlight,\n            classList: \"mermaid\",\n          }),\n        ];\n      },\n    }),\n  ],\n});\n```\n\n---\n\n## 🧰 Internals\n\n- Uses **`Decoration.widget`** to inject rendered SVGs after code blocks.\n- Maintains per-node **render cache**, **debounce timers**, and **code cache**.\n- Relies on [`@svg-fns/io`](https://github.com/mayank1513/svg-fns) for safe SVG parsing and [`tightlyCropSvg`](https://github.com/mayank1513/svg-fns) for layout cleanup.\n- Handles render errors gracefully with inline messages.\n\n---\n\n## 🪄 Example Styling\n\n```css\n.mermaid-container {\n  display: flex;\n  justify-content: center;\n  padding: 0.5rem;\n  overflow-x: auto;\n  background: var(--code-bg, #fafafa);\n  border-radius: 0.5rem;\n}\n```\n\n---\n\n## 🙏 Credits\n\n- [Mermaid](https://mermaid.js.org/) for the visualization engine\n- [ProseMirror](https://prosemirror.net/) for the editing framework\n- [@svg-fns](https://github.com/mayank1513/svg-fns) for SVG utilities\n- [lowlight-mermaid](https://github.com/wooorm/lowlight) for syntax support\n\n---\n\n## License\n\nThis library is licensed under the MPL-2.0 open-source license.\n\n> <img src=\"https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png\" style=\"height: 20px\"/> Please enroll in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsor](https://github.com/sponsors/mayank1513) our work.\n\n<hr />\n\n<p align=\"center\" style=\"text-align:center\">with 💖 by <a href=\"https://mayank-chaudhari.vercel.app\" target=\"_blank\">Mayank Kumar Chaudhari</a></p>\n","readmeFilename":"README.md","_rev":"1-e4729408ff7fde361ff278cc94ab5f64"}