{"_id":"@bodonkey/mermaid-extension","_rev":"6-62eb8ce3d326514994b37869a4c332b6","name":"@bodonkey/mermaid-extension","dist-tags":{"latest":"3.1.0"},"versions":{"1.0.0":{"name":"@bodonkey/mermaid-extension","version":"1.0.0","author":{"name":"BoDonkey","email":"robert@robertmeans.net"},"license":"MIT","_id":"@bodonkey/mermaid-extension@1.0.0","maintainers":[{"name":"bodonkey","email":"robert@robertmeans.net"}],"homepage":"https://github.com/BoDonkey/mermaid-extension#readme","bugs":{"url":"https://github.com/BoDonkey/mermaid-extension/issues"},"dist":{"shasum":"0a8ab76883553f1d478fef044ff27df449787f84","tarball":"https://registry.npmjs.org/@bodonkey/mermaid-extension/-/mermaid-extension-1.0.0.tgz","fileCount":14,"integrity":"sha512-b59Wo90t6j3RjBgAKKpNLh/mwBcF81DU1BrHLdvunBvb2KY8KLHcbs/uEYVEANYhEI7FTj8UHpiYTjABptuNPA==","signatures":[{"sig":"MEQCIGZQtkdLYuPJ8PYddasZ4d/nb9QyyZNUC7W4ri5IpsKTAiBYp8vb6F5lcM3qtAUXtpSzMS9+PxME0mRbgmRw+hmkjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95755},"main":"index.js","gitHead":"f43d0483ef830c8cc3f24109bacdeee7a2583ef7","scripts":{"lint":"npm run eslint","test":"npm run lint && mocha","eslint":"eslint --ext .js,.vue ."},"_npmUser":{"name":"bodonkey","email":"robert@robertmeans.net"},"repository":{"url":"git+https://github.com/BoDonkey/mermaid-extension.git","type":"git"},"_npmVersion":"9.8.1","description":"An extension to add the Mermaid diagram package to ApostropheCMS","directories":{},"_nodeVersion":"18.18.0","dependencies":{"mermaid":"^10.6.1","ace-builds":"^1.32.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mermaid-extension_1.0.0_1705076320167_0.975259951181928","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@bodonkey/mermaid-extension","version":"1.0.1","author":{"name":"BoDonkey","email":"robert@robertmeans.net"},"license":"MIT","_id":"@bodonkey/mermaid-extension@1.0.1","maintainers":[{"name":"bodonkey","email":"robert@robertmeans.net"}],"homepage":"https://github.com/BoDonkey/mermaid-extension#readme","bugs":{"url":"https://github.com/BoDonkey/mermaid-extension/issues"},"dist":{"shasum":"e118361b38eb9e2a2a8a716a98225b7003e047cc","tarball":"https://registry.npmjs.org/@bodonkey/mermaid-extension/-/mermaid-extension-1.0.1.tgz","fileCount":14,"integrity":"sha512-Lsvog0mAw41l7SOrSclEOY4P5DI2ILq/GHkH1s+mTgXMX4IgdWaOTSQF+dUCa24wqDgMhUEFBCF7tyHRjCB4Jw==","signatures":[{"sig":"MEUCIQC+G4gyEn+016pjs0phM8cyPh68g/rZGE0pY7bFxRHqqQIgHcjvQ3Z7LeDmlG6qS2sv986fDVvMAvgB+yGS5v3IoMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95767},"main":"index.js","gitHead":"12048cffcb76444a03dcd8a262e0811bf1720784","scripts":{"lint":"npm run eslint","test":"npm run lint && mocha","eslint":"eslint --ext .js,.vue ."},"_npmUser":{"name":"bodonkey","email":"robert@robertmeans.net"},"repository":{"url":"git+https://github.com/BoDonkey/mermaid-extension.git","type":"git"},"_npmVersion":"9.8.1","description":"An extension to add the Mermaid diagram package to ApostropheCMS","directories":{},"_nodeVersion":"18.18.0","dependencies":{"mermaid":"^10.6.1","ace-builds":"^1.32.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/mermaid-extension_1.0.1_1711030160381_0.13596652944858478","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@bodonkey/mermaid-extension","version":"2.1.0","keywords":["apostrophecms","apostrophe","astro","mermaid","diagrams","flowchart","widget","cms","frontend"],"author":{"url":"https://github.com/BoDonkey","name":"BoDonkey","email":"robert.means1969@gmail.com"},"license":"MIT","_id":"@bodonkey/mermaid-extension@2.1.0","maintainers":[{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"}],"homepage":"https://github.com/BoDonkey/mermaid-extension#readme","bugs":{"url":"https://github.com/BoDonkey/mermaid-extension/issues"},"dist":{"shasum":"6e021c0f81a48b308ddce9b2745e40a2a49d3412","tarball":"https://registry.npmjs.org/@bodonkey/mermaid-extension/-/mermaid-extension-2.1.0.tgz","fileCount":12,"integrity":"sha512-YRA76WUJuOdyDZ549MlT80TXtlLLgu5QQPpzYBinC/5fu4ss0FsMEJcWyGrATwMjJwBViUqgm5l22c+2F3WC2Q==","signatures":[{"sig":"MEUCIQDWakX5Z2VioEMm9ckp6YWjKgX8QdQg5/LM0c7bpyQlXwIgH3VSTMQawPuVnttpF5Bj7Y6yx17N0G2YvziPCu/IrKc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":255746},"main":"index.js","engines":{"npm":">=8.0.0","node":">=18.0.0"},"exports":{".":"./index.js","./astro":"./astro/index.js","./astro/MermaidWidget.astro":"./astro/MermaidWidget.astro"},"gitHead":"247e2701d13a698d8fec89b1f8db07cdd4b29cc6","scripts":{"lint":"npm run eslint","test":"npm run lint && mocha","build":"echo 'No build step required'","eslint":"eslint --ext .js,.vue .","prepublishOnly":"npm run lint"},"_npmUser":{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"},"repository":{"url":"git+https://github.com/BoDonkey/mermaid-extension.git","type":"git"},"_npmVersion":"10.9.2","description":"Beautiful Mermaid diagrams for ApostropheCMS with full Astro frontend support","directories":{},"_nodeVersion":"22.14.0","browserslist":["defaults","not IE 11"],"dependencies":{"mermaid":"^11.9.0","ace-builds":"^1.32.3"},"_hasShrinkwrap":false,"devDependencies":{"mocha":"^11.7.0","eslint":"^7.32.0","eslint-plugin-vue":"^9.33.0","eslint-config-apostrophe":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/mermaid-extension_2.1.0_1782929710115_0.3910400643442491","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@bodonkey/mermaid-extension","version":"3.0.0","keywords":["apostrophecms","apostrophe","astro","mermaid","diagrams","flowchart","widget","cms","frontend"],"author":{"url":"https://github.com/BoDonkey","name":"BoDonkey","email":"robert.means1969@gmail.com"},"license":"MIT","_id":"@bodonkey/mermaid-extension@3.0.0","maintainers":[{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"}],"homepage":"https://github.com/BoDonkey/mermaid-extension#readme","bugs":{"url":"https://github.com/BoDonkey/mermaid-extension/issues"},"dist":{"shasum":"6f2f965533c705ad70e7b4998a29cfaf46cc1cec","tarball":"https://registry.npmjs.org/@bodonkey/mermaid-extension/-/mermaid-extension-3.0.0.tgz","fileCount":14,"integrity":"sha512-nVqxqE1EvXYSULRZ6SjOPxbOYU4coP6AmrGnvzwe5GRmeaj+y6bfJXHZa0caJ2JTr0U4AQoCt9OqteqfRbc4GQ==","signatures":[{"sig":"MEUCIQDLDpwi+TC2zQwlL4Z8wMC73nO919UiCZD2gxhZGIRe8AIgc5yUmpi4ZZW2gpsNNnKVOnn5t1fPZWsYfTHpiPyV35A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":261199},"main":"index.js","engines":{"npm":">=8.0.0","node":">=18.0.0"},"exports":{".":"./index.js","./astro":"./astro/index.js","./astro/integration":"./astro/integration.js","./astro/MermaidWidget.astro":"./astro/MermaidWidget.astro","./astro/mermaid-init.client.js":"./astro/mermaid-init.client.js"},"gitHead":"0832586d94a428f85435ac10b745ce50ff1ddfe9","scripts":{"lint":"npm run eslint","test":"npm run lint && mocha","build":"echo 'No build step required'","eslint":"eslint --ext .js,.vue .","prepublishOnly":"npm run lint"},"_npmUser":{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"},"repository":{"url":"git+https://github.com/BoDonkey/mermaid-extension.git","type":"git"},"_npmVersion":"10.9.2","description":"Beautiful Mermaid diagrams for ApostropheCMS with full Astro frontend support","directories":{},"_nodeVersion":"22.14.0","browserslist":["defaults","not IE 11"],"dependencies":{"mermaid":"^11.9.0","ace-builds":"^1.32.3"},"_hasShrinkwrap":false,"devDependencies":{"mocha":"^11.7.0","eslint":"^7.32.0","eslint-plugin-vue":"^9.33.0","eslint-config-apostrophe":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/mermaid-extension_3.0.0_1783012880509_0.5277283284814109","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@bodonkey/mermaid-extension","version":"3.0.1","keywords":["apostrophecms","apostrophe","astro","mermaid","diagrams","flowchart","widget","cms","frontend"],"author":{"url":"https://github.com/BoDonkey","name":"BoDonkey","email":"robert.means1969@gmail.com"},"license":"MIT","_id":"@bodonkey/mermaid-extension@3.0.1","maintainers":[{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"}],"homepage":"https://github.com/BoDonkey/mermaid-extension#readme","bugs":{"url":"https://github.com/BoDonkey/mermaid-extension/issues"},"dist":{"shasum":"d921e10a687e82c1a82ec0da78db03f085d56198","tarball":"https://registry.npmjs.org/@bodonkey/mermaid-extension/-/mermaid-extension-3.0.1.tgz","fileCount":14,"integrity":"sha512-79qVhzgxU7bmX1WTeL8ZZUprZu8Or+XBTzV8HjjBM35iFdrxm7sN2tM13z+O6jSD7eOdQlGtBdF4RwyPbmNv0g==","signatures":[{"sig":"MEUCIHdJwLyR0loCnp7FYDOqJufk0x8qvaWWlopW+gYLD+O0AiEAlCQoTHiDqATAV9DNLT+NjOD5WmjxWHCPAHpVHungI0A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":261199},"main":"index.js","engines":{"npm":">=8.0.0","node":">=18.0.0"},"exports":{".":"./index.js","./astro":"./astro/index.js","./astro/integration":"./astro/integration.js","./astro/MermaidWidget.astro":"./astro/MermaidWidget.astro","./astro/mermaid-init.client.js":"./astro/mermaid-init.client.js"},"gitHead":"d50a700e6c4658e22418bc915cc1129283f7ff22","scripts":{"lint":"npm run eslint","test":"npm run lint && mocha","build":"echo 'No build step required'","eslint":"eslint --ext .js,.vue .","prepublishOnly":"npm run lint"},"_npmUser":{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"},"repository":{"url":"git+https://github.com/BoDonkey/mermaid-extension.git","type":"git"},"_npmVersion":"10.9.2","description":"Beautiful Mermaid diagrams for ApostropheCMS with full Astro frontend support","directories":{},"_nodeVersion":"22.14.0","browserslist":["defaults","not IE 11"],"dependencies":{"mermaid":"^11.9.0","ace-builds":"^1.32.3"},"_hasShrinkwrap":false,"devDependencies":{"mocha":"^11.7.0","eslint":"^7.32.0","eslint-plugin-vue":"^9.33.0","eslint-config-apostrophe":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/mermaid-extension_3.0.1_1783364262087_0.6580558747759513","host":"s3://npm-registry-packages-npm-production"}},"3.1.0":{"name":"@bodonkey/mermaid-extension","version":"3.1.0","description":"Beautiful Mermaid diagrams for ApostropheCMS with full Astro frontend support","main":"index.js","exports":{".":"./index.js","./astro":"./astro/index.js","./astro/MermaidWidget.astro":"./astro/MermaidWidget.astro","./astro/integration":"./astro/integration.js","./astro/mermaid-init.client.js":"./astro/mermaid-init.client.js"},"scripts":{"eslint":"eslint --ext .js,.vue .","lint":"npm run eslint","test":"npm run lint && mocha","build":"echo 'No build step required'","prepublishOnly":"npm run lint"},"repository":{"type":"git","url":"git+https://github.com/BoDonkey/mermaid-extension.git"},"homepage":"https://github.com/BoDonkey/mermaid-extension#readme","bugs":{"url":"https://github.com/BoDonkey/mermaid-extension/issues"},"author":{"name":"BoDonkey","email":"robert.means1969@gmail.com","url":"https://github.com/BoDonkey"},"license":"MIT","keywords":["apostrophecms","apostrophe","astro","mermaid","diagrams","flowchart","widget","cms","frontend"],"dependencies":{"ace-builds":"^1.32.3","mermaid":"^11.9.0"},"devDependencies":{"eslint":"^7.32.0","eslint-config-apostrophe":"^3.4.0","eslint-plugin-vue":"^9.33.0","mocha":"^11.7.0"},"engines":{"node":">=18.0.0","npm":">=8.0.0"},"browserslist":["defaults","not IE 11"],"_id":"@bodonkey/mermaid-extension@3.1.0","gitHead":"8d84354977d0b8a750702ef978094a166e42e4ca","_nodeVersion":"22.23.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-fyvhIBeD6fgiqlBhJ5EqzhJ3AV32Cr0GxmP732sNVFY0ifgbMowPhI3T7ipz0SftxChNnc3YFP6I40hT6Xa8CA==","shasum":"4eb2fdfae50497840f6983197e3290b044d5eb19","tarball":"https://registry.npmjs.org/@bodonkey/mermaid-extension/-/mermaid-extension-3.1.0.tgz","fileCount":15,"unpackedSize":269074,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCwgK8Ki8AMEFUsEgipJmljCslA3wNxreGEhAUqrh4kxAIgR9oSvb0/oYuOu4gs8vR6cmygfggAy4emoVEMEsbdq6I="}]},"_npmUser":{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"},"directories":{},"maintainers":[{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mermaid-extension_3.1.0_1783774856177_0.1662026667378218"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-12T16:18:40.050Z","modified":"2026-07-11T13:00:56.500Z","1.0.0":"2024-01-12T16:18:40.334Z","1.0.1":"2024-03-21T14:09:20.556Z","2.1.0":"2026-07-01T18:15:10.479Z","3.0.0":"2026-07-02T17:21:20.695Z","3.0.1":"2026-07-06T18:57:42.268Z","3.1.0":"2026-07-11T13:00:56.302Z"},"bugs":{"url":"https://github.com/BoDonkey/mermaid-extension/issues"},"author":{"name":"BoDonkey","email":"robert.means1969@gmail.com","url":"https://github.com/BoDonkey"},"license":"MIT","homepage":"https://github.com/BoDonkey/mermaid-extension#readme","keywords":["apostrophecms","apostrophe","astro","mermaid","diagrams","flowchart","widget","cms","frontend"],"repository":{"type":"git","url":"git+https://github.com/BoDonkey/mermaid-extension.git"},"description":"Beautiful Mermaid diagrams for ApostropheCMS with full Astro frontend support","maintainers":[{"name":"bodonkey","email":"robert.means1969+apostrophecms@gmail.com"}],"readme":"# 🧜‍♀️ Mermaid Diagrams for ApostropheCMS + Astro\n\n\n>> Note: New projects should use `@bodonkey/mermaid-widget`, the one-module package. This package remains available for existing bundle-based installs.\n\n\n<div align=\"center\">\n  <img src=\"https://img.shields.io/badge/MADE%20FOR%20ApostropheCMS-000000.svg?style=for-the-badge&logo=Apostrophe&labelColor=6516dd\" alt=\"Made for ApostropheCMS\">\n  <img src=\"https://img.shields.io/badge/ASTRO%20READY-FF5D01.svg?style=for-the-badge&logo=Astro&labelColor=000000\" alt=\"Astro Ready\">\n  <img src=\"https://img.shields.io/static/v1?style=for-the-badge&labelColor=000000&label=License&message=MIT&color=3DA639\" alt=\"MIT License\">\n</div>\n\n> Transform your content with beautiful, interactive diagrams! From flowcharts to mind maps, this module brings the power of [Mermaid](https://mermaid.js.org) to your ApostropheCMS projects with seamless Astro frontend support.\n\n## ✨ What You Get\n\n🎨 **Visual Storytelling** - Turn complex ideas into clear, beautiful diagrams  \n⚡ **Real-time Preview** - See your diagrams render as you type  \n🎯 **Full Editor Experience** - Syntax highlighting with Ace Editor  \n🌊 **Astro Integration** - Works perfectly with modern Astro frontends  \n🎨 **Themeable** - Customize colors, styles, and themes  \n📱 **Responsive** - Diagrams look great on any device  \n\n## 🚀 Quick Start\n\n### For Traditional ApostropheCMS Projects\n\n```bash\nnpm install @bodonkey/mermaid-extension\n```\n\n```javascript\n// app.js\nimport apostrophe from 'apostrophe';\n\napostrophe ({\n  root: import.meta,\n  shortName: 'my-project',\n  bundles: [ '@bodonkey/mermaid-extension' ],\n  modules: {\n    'mermaid-widget': {\n      options: {\n        initBlock: '%%{init: { \"theme\": \"base\" }}%%'\n      }\n    }\n  }\n});\n```\n\n### For Astro + ApostropheCMS Projects\nFollow all the steps to install in the `backend` folder like a traditional project. Then in the `frontend`\n\n**Frontend (Astro):**\n```bash\nnpm install @bodonkey/mermaid-extension\n```\n\n```javascript\n// src/widgets/index.js\nimport MermaidWidget from '@bodonkey/mermaid-extension/astro/MermaidWidget.astro';\n\nconst widgetComponents = {\n  'mermaid': MermaidWidget,\n  // ... your other widgets\n};\n\nexport default widgetComponents;\n```\n\n**Required: register the integration.** Diagram rendering runs from a script that must load once, on every page — add the integration in `astro.config.mjs`:\n\n```javascript\n// astro.config.mjs\nimport { defineConfig } from 'astro/config';\nimport mermaidWidget from '@bodonkey/mermaid-extension/astro/integration';\n\nexport default defineConfig({\n  integrations: [ mermaidWidget() ]\n  // ...your other config\n});\n```\n\n> **Why this is required:** ApostropheCMS's in-context editor inserts and refreshes widget markup by setting `element.innerHTML`. Browsers never execute `<script>` tags inserted that way, so a mermaid diagram added or edited in the editor would render only after a hard page reload. The integration injects the render script as part of Astro's normal page bundle instead of inline widget markup, so it's already loaded — and already listening for Apostrophe's `refreshed` event — before the editor ever touches the DOM. Without this integration, diagrams inserted via the in-context editor will not render until a full page reload.\n\nFor Astro frontends, pass the same shared init block through a small wrapper component:\n\n```astro\n---\nimport MermaidWidget from '@bodonkey/mermaid-extension/astro/MermaidWidget.astro';\n\nconst initBlock = '%%{init: { \"theme\": \"base\" }}%%';\nconst semanticClassDefs = {\n  accent: 'fill:#f5f3ff,stroke:#7c3aed,color:#5b21b6',\n  info: 'fill:#eff6ff,stroke:#2563eb,color:#1d4ed8',\n  muted: 'fill:#fafafa,stroke:#d4d4d4,color:#737373,stroke-dasharray:5 5'\n};\n---\n\n<MermaidWidget\n  {...Astro.props}\n  initBlock={initBlock}\n  semanticClassDefs={semanticClassDefs}\n/>\n```\n\nThen map your wrapper component in `src/widgets/index.js`.\n## 🛠️ Usage\n\nAdd the widget to any area in your page or piece types:\n\n```javascript\nfields: {\n  add: {\n    main: {\n      type: 'area',\n      options: {\n        widgets: {\n          '@apostrophecms/rich-text': {},\n          '@apostrophecms/image': {},\n          'mermaid': {}  // 🎉 Your new diagram widget!\n        }\n      }\n    }\n  }\n}\n```\n\n### 📊 Creating Diagrams\n![The Mermaid editor with pie chart rendered](./images/pie-chart.png)\nSelecting the mermaid widget in an area will bring up a modal containing a code editor for you to input the code for your diagram. You can also add an optional caption, which renders as a `<figcaption>`. After adding code you can test the results by clicking the 'Render Diagram' button. Note that the width of the modal prevents the display of the legend in the preview.\n\nRendered diagrams use semantic figure markup:\n\n```html\n<figure class=\"mermaid-widget\">\n  <div class=\"mermaid-widget__canvas\">\n    <!-- rendered SVG -->\n  </div>\n  <figcaption class=\"mermaid-widget__caption\">Optional caption</figcaption>\n</figure>\n```\n\n#### Upgrade note\n\nIf you styled earlier versions with selectors like `[data-mermaid-widget] > .mermaid`, update those selectors to use `.mermaid-widget`, `.mermaid-widget__canvas`, or `.mermaid-widget__caption`.\n\n**Astro projects:** as of this release, `MermaidWidget.astro` no longer contains its own inline render script. You must add the `mermaidWidget()` integration to `astro.config.mjs` (see the Astro setup above) or diagrams will stop rendering entirely. This is a required step, not an optional one.\n\n### 🎨 What Can You Create?\n\n#### Flowcharts\n```mermaid\nflowchart TD\n    A[Start Your Project] --> B{Choose Your Path}\n    B -->|Traditional| C[ApostropheCMS Only]\n    B -->|Modern| D[ApostropheCMS + Astro]\n    C --> E[Add Mermaid Widget]\n    D --> E\n    E --> F[Create Amazing Diagrams! 🎉]\n```\n\n#### Sequence Diagrams\n```mermaid\nsequenceDiagram\n    participant User\n    participant Astro\n    participant ApostropheCMS\n    \n    User->>Astro: Visit page\n    Astro->>ApostropheCMS: Fetch content\n    ApostropheCMS-->>Astro: Return data + widgets\n    Astro-->>User: Render beautiful page\n```\n\n#### Mind Maps\n```mermaid\nmindmap\n  root)ApostropheCMS(\n    (Traditional)\n      Nunjucks\n      Server-side\n    (Modern)\n      Astro\n      React\n      Vue\n      Svelte\n    (Features)\n      Mermaid Diagrams\n      Rich Content\n      Easy Editing\n```\n\n#### And So Much More!\n- 📊 **Pie Charts** - Perfect for data visualization\n- 🗺️ **User Journey Maps** - Map out user experiences  \n- 📈 **Gantt Charts** - Project timelines made easy\n- 🏗️ **Architecture Diagrams** - System design visualization\n- 🌳 **Git Graphs** - Show branching strategies\n\nYou can read more about diagram types in the [Mermaid documentation](https://mermaid.js.org).\n\n## 🎨 Customization Magic\n\nMake your diagrams uniquely yours with custom themes:\n\n```mermaid\n---\ntitle: My Beautiful Flowchart\nconfig:\n  theme: base\n  themeVariables:\n    primaryColor: \"#ff6b6b\"\n    primaryTextColor: \"#ffffff\"\n    primaryBorderColor: \"#ff5252\"\n    lineColor: \"#ffa726\"\n---\nflowchart LR\n    A[Idea] --> B[Design]\n    B --> C[Build]\n    C --> D[Ship! 🚀]\n```\nYou can read more about configuration options in the [Mermaid documentation](https://mermaid.js.org).\n\n### Shared Mermaid Init\n\nSet `initBlock` on the `mermaid-widget` module to apply the same Mermaid directive to every diagram. The directive is prepended only while rendering, so editors do not have to repeat it in every widget.\n\n```javascript\n'mermaid-widget': {\n  options: {\n    initBlock: `%%{init: {\n      \"theme\": \"base\",\n      \"themeVariables\": {\n        \"primaryColor\": \"#6516dd\",\n        \"primaryTextColor\": \"#ffffff\"\n      }\n    }}%%`\n  }\n}\n```\n\nIf a diagram starts with its own Mermaid directive (`%%{...}%%`) or YAML frontmatter (`---`), that diagram keeps its own configuration.\n\n### Semantic Class Definitions\n\nSet `semanticClassDefs` on the `mermaid-widget` module to inject shared Mermaid `classDef` presets when a diagram references semantic classes. This lets authors write concise diagrams with `:::accent`, `:::info`, and similar class names without repeating the style block in every widget.\n\n```javascript\n'mermaid-widget': {\n  options: {\n    semanticClassDefs: {\n      info: 'fill:#eff6ff,stroke:#2563eb,color:#1d4ed8',\n      success: 'fill:#ecfdf5,stroke:#059669,color:#065f46',\n      warning: 'fill:#fefce8,stroke:#d97706,color:#713f12',\n      accent: 'fill:#f5f3ff,stroke:#7c3aed,color:#5b21b6',\n      muted: 'fill:#fafafa,stroke:#d4d4d4,color:#737373,stroke-dasharray:5 5'\n    }\n  }\n}\n```\n\nWith those options, authors can write:\n\n```mermaid\nflowchart TB\n  platform[\"Your platform\"]:::accent\n  note[\"Shared maintenance\"]:::info\n  footer[\"Isolation guarantee\"]:::muted\n```\n\nThe extension appends only the missing `classDef` lines for referenced semantic classes. It skips duplicate definitions and only injects class definitions for Mermaid types where class styling applies cleanly, such as flowcharts, `graph`, and state diagrams.\n\n## 🌟 Pro Tips\n\n1. **Preview First** - Use the \"Render Diagram\" button to test your syntax\n2. **Start Simple** - Begin with basic flowcharts, then explore advanced features\n3. **Theme Consistently** - Use the same color scheme across your diagrams\n4. **Mobile-Friendly** - Test how your diagrams look on different screen sizes\n5. **Documentation** - Keep the [Mermaid docs](https://mermaid.js.org) handy for reference (or you can open it from the link in the editor).\n\n## 🤝 Contributing\n\nFound a bug? Have an idea for improvement? We'd love to hear from you!\n\n1. **Issues** - Report bugs or request features\n2. **Pull Requests** - Contribute code improvements\n3. **Documentation** - Help improve these docs\n4. **Examples** - Share cool diagram examples\n\n## 📚 Learn More\n\n- [Mermaid Documentation](https://mermaid.js.org) - Complete diagram syntax reference\n- [ApostropheCMS Docs](https://docs.apostrophecms.org) - Learn more about the CMS\n- [Astro Docs](https://docs.astro.build) - Modern frontend framework\n\n## 📄 License\n\nMIT License - Use it anywhere, build amazing things!\n\n---\n\n<div align=\"center\">\n  <strong>Ready to make your content more visual and engaging?</strong><br>\n  <code>npm install @bodonkey/mermaid-extension</code><br>\n  🐴 Made with hoofy tip-taps by BoDonkey.<br>\n  If you find this module helpful, please consider giving it a ⭐ on <a href=\"https://github.com/BoDonkey/mermaid-extension\">GitHub!</a>\n</div>\n","readmeFilename":"README.md"}