{"_id":"tiptap-extension-mermaid","name":"tiptap-extension-mermaid","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"tiptap-extension-mermaid","author":{"name":"Mayank Kumar Chaudhari","url":"https:/mayank-chaudhari.vercel.app"},"private":false,"version":"0.0.0","description":"A Tiptap extension that enables live Mermaid diagram rendering inside code blocks — built on top of prosemirror-mermaid with debounced updates, syntax highlighting, and SVG cropping.","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/tiptap-extension-mermaid.git"},"bugs":{"url":"https://github.com/md2docx/tiptap-extension-mermaid/issues"},"homepage":"https://github.com/md2docx/tiptap-extension-mermaid/#readme","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/index.css"},"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"},"devDependencies":{"@repo/typescript-config":"workspace:*","@types/node":"^24.6.2","@types/react":"^19.2.0","@vitest/coverage-v8":"^3.2.4","esbuild-plugin-rdi":"^0.0.0","jsdom":"^27.0.0","lowlight":"^3.3.0","mermaid":"^11.12.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":["tiptap","tiptap-extension","mermaid","mermaid-diagrams","prosemirror","prosemirror-plugin","diagram","markdown-diagram","codeblock","code-block","syntax-highlighting","svg","svg-rendering","lowlight","mindmap","flowchart","graphviz","editor-extension","wysiwyg","markdown-editor","tiptap-plugin","visualization","Customizable","Cutting-edge","Compatibility","Frontend development","UI components","Progressive","Web development","Modern","Seamless integration","mayank1513"],"dependencies":{"@tiptap/extension-code-block-lowlight":"^3.6.5","prosemirror-mermaid":"^0.0.0"},"_id":"tiptap-extension-mermaid@0.0.0","gitHead":"3fa6bcd5aadb018e858cb205ca50531597747be1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-vDOt+bPtxKjxPgwigSyJ5xKbsg+IBQIMUOm6kH117pWKrE3HLEJyXyiiTQf207lyldRDF1PmnliVhh47hWl81Q==","shasum":"97699b654c10d392b01e2ddaead25dc376521eef","tarball":"https://registry.npmjs.org/tiptap-extension-mermaid/-/tiptap-extension-mermaid-0.0.0.tgz","fileCount":13,"unpackedSize":631942,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/tiptap-extension-mermaid@0.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIACqYCnjanyQaqZQwEX07P3jZWpRmCPktSPUYacKPFVGAiArHezZADHBmmCwLZ1Zg6WUKvLGsDS5WrlMILxeFJ5WJQ=="}]},"_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/tiptap-extension-mermaid_0.0.0_1759725343121_0.37601463308733063"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-06T04:35:42.925Z","0.0.0":"2025-10-06T04:35:43.371Z","modified":"2025-10-06T04:35:43.963Z"},"maintainers":[{"name":"mayank1513","email":"mayank.srmu@gmail.com"}],"description":"A Tiptap extension that enables live Mermaid diagram rendering inside code blocks — built on top of prosemirror-mermaid with debounced updates, syntax highlighting, and SVG cropping.","homepage":"https://github.com/md2docx/tiptap-extension-mermaid/#readme","keywords":["tiptap","tiptap-extension","mermaid","mermaid-diagrams","prosemirror","prosemirror-plugin","diagram","markdown-diagram","codeblock","code-block","syntax-highlighting","svg","svg-rendering","lowlight","mindmap","flowchart","graphviz","editor-extension","wysiwyg","markdown-editor","tiptap-plugin","visualization","Customizable","Cutting-edge","Compatibility","Frontend development","UI components","Progressive","Web development","Modern","Seamless integration","mayank1513"],"repository":{"type":"git","url":"git+https://github.com/md2docx/tiptap-extension-mermaid.git"},"author":{"name":"Mayank Kumar Chaudhari","url":"https:/mayank-chaudhari.vercel.app"},"bugs":{"url":"https://github.com/md2docx/tiptap-extension-mermaid/issues"},"license":"MPL-2.0","readme":"# Tiptap Extension Mermaid <img src=\"https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png\" style=\"height: 40px\"/>\n\n[![test](https://github.com/md2docx/tiptap-extension-mermaid/actions/workflows/test.yml/badge.svg)](https://github.com/md2docx/tiptap-extension-mermaid/actions/workflows/test.yml)\n[![Maintainability](https://qlty.sh/gh/md2docx/projects/tiptap-extension-mermaid/maintainability.svg)](https://qlty.sh/gh/md2docx/projects/tiptap-extension-mermaid)\n[![codecov](https://codecov.io/gh/md2docx/tiptap-extension-mermaid/graph/badge.svg)](https://codecov.io/gh/md2docx/tiptap-extension-mermaid)\n[![Version](https://img.shields.io/npm/v/tiptap-extension-mermaid.svg?colorB=green)](https://www.npmjs.com/package/tiptap-extension-mermaid)\n[![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/tiptap-extension-mermaid.svg)](https://www.npmjs.com/package/tiptap-extension-mermaid)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/tiptap-extension-mermaid)\n[![NPM License](https://img.shields.io/npm/l/tiptap-extension-mermaid)](../LICENSE)\n\n> 🪄 A drop-in [Tiptap](https://tiptap.dev/) extension that adds **live Mermaid diagram rendering** to `CodeBlockLowlight` — powered by [`prosemirror-mermaid`](https://github.com/mayank1513/prosemirror-mermaid).\n\n---\n\n## ✨ Features\n\n- **Live Mermaid diagrams** — render instantly as you type\n- **Debounced updates** — smooth editing experience (default: 300 ms)\n- **Syntax highlighting** — integrates with [`lowlight`](https://github.com/wooorm/lowlight) and `lowlight-mermaid`\n- **Tight SVG output** — powered by [`@svg-fns/layout`](https://github.com/mayank1513/svg-fns)\n- **Automatic stable IDs** — each diagram gets a persistent ID via `data-id`\n- **Drop-in for CodeBlockLowlight** — no extra node definitions required\n\n---\n\n## 🚀 Installation\n\n```bash\npnpm add tiptap-extension-mermaid\n```\n\n**_or_**\n\n```bash\nnpm install tiptap-extension-mermaid\n```\n\n**_or_**\n\n```bash\nyarn add tiptap-extension-mermaid\n```\n\n---\n\n## 🧩 Quick Start\n\n```ts\nimport { CodeblockLowlightMermaid } from \"tiptap-extension-mermaid\";\nimport { createLowlight } from \"lowlight\";\nimport { Editor } from \"@tiptap/core\";\nimport mermaid from \"mermaid\";\n\n// Important: initialize Mermaid manually\nmermaid.initialize({ startOnLoad: false });\n\nconst lowlight = createLowlight();\n\nconst editor = new Editor({\n  extensions: [\n    CodeblockLowlightMermaid.configure({\n      lowlight,\n      classList: \"mermaid-container\",\n      debounce: 400,\n      mermaidConfig: {\n        theme: \"neutral\",\n      },\n    }),\n  ],\n  content: `\n  \\`\\`\\`mermaid\n  graph TD\n    A[Start] --> B{Is it working?}\n    B -- Yes --> C[Ship it!]\n    B -- No --> D[Fix and retry]\n  \\`\\`\\`\n  `,\n});\n```\n\n---\n\n## ⚙️ Options\n\n| Option              | Type                                | Default            | Description                                      |\n| ------------------- | ----------------------------------- | ------------------ | ------------------------------------------------ |\n| **`lowlight`**      | `ReturnType<typeof createLowlight>` | `{}`               | Lowlight instance for syntax highlighting.       |\n| **`debounce`**      | `number`                            | `300`              | Delay (ms) before re-render after typing stops.  |\n| **`mermaidConfig`** | `MermaidConfig`                     | `{}`               | Passed directly to `mermaid.initialize()`.       |\n| **`classList`**     | `string[] \\| string`                | `\"\"`               | CSS class(es) applied to each diagram container. |\n| **`id` (auto)**     | `string`                            | Random `mxxxxxxxx` | Auto-generated, persisted via `data-id`.         |\n\n---\n\n## 🧠 How It Works\n\n- Extends [`@tiptap/extension-code-block-lowlight`](https://tiptap.dev/api/extensions/code-block-lowlight)\n- Adds an `id` attribute per node for stable Mermaid rendering\n- Injects the [`prosemirror-mermaid`](https://github.com/mayank1513/prosemirror-mermaid) plugin to manage rendering, caching, and SVG lifecycle\n- Registers Mermaid grammars (`mermaid`, `mmd`, `mindmap`) in `lowlight` if available\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  border-radius: 0.5rem;\n  background: var(--code-bg, #f8f9fa);\n}\n```\n\n---\n\n## 🧩 Advanced Example (React + Tiptap)\n\n```tsx\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport { CodeblockLowlightMermaid } from \"tiptap-extension-mermaid\";\nimport { createLowlight } from \"lowlight\";\nimport mermaid from \"mermaid\";\n\nconst lowlight = createLowlight();\nmermaid.initialize({ startOnLoad: false });\n\nexport const MermaidEditor = () => {\n  const editor = useEditor({\n    extensions: [\n      CodeblockLowlightMermaid.configure({\n        lowlight,\n        classList: [\"mermaid-container\", \"diagram\"],\n      }),\n    ],\n  });\n\n  return <EditorContent editor={editor} />;\n};\n```\n\n---\n\n## 🪄 Integration Notes\n\n- Works seamlessly with **Tiptap v2+**\n- You must **manually initialize Mermaid** before using\n- Diagrams render only for code blocks with `language` = `mermaid`, `mmd`, or `mindmap`\n- Errors during rendering are displayed inline (non-blocking)\n\n---\n\n## 🙏 Credits\n\n- [Mermaid](https://mermaid.js.org/) for diagrams\n- [Tiptap](https://tiptap.dev/) for the editor framework\n- [@svg-fns](https://github.com/mayank1513/svg-fns) for SVG manipulation utilities\n- [prosemirror-mermaid](https://github.com/mayank1513/prosemirror-mermaid) — the rendering engine underneath\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-9a2b168e2fe4a2b0f354900dfa3c7f30"}