@docmd/plugin-mermaid 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 docmd (docmd.io)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @docmd/plugin-mermaid
+
+Adds [Mermaid.js](https://mermaid.js.org/) diagram support to **docmd**.
+
+## Usage
+Use the `mermaid` code fence in your Markdown:
+
+````
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+````

package/assets/init-mermaid.js

@@ -0,0 +1,52 @@
+// packages/plugins/mermaid/assets/init-mermaid.js
+
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+
+(async function () {
+  'use strict';
+
+  // 1. Initialize
+  const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default';
+  
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: theme,
+    securityLevel: 'loose',
+    fontFamily: 'inherit'
+  });
+
+  // 2. Render Function
+  async function render() {
+    try {
+      // Mermaid 10/11 API: run() handles finding .mermaid classes
+      await mermaid.run({
+        querySelector: '.mermaid'
+      });
+    } catch (e) {
+      console.error('Mermaid rendering failed:', e);
+    }
+  }
+
+  // 3. Theme Observer
+  const observer = new MutationObserver(async (mutations) => {
+    for (const m of mutations) {
+      if (m.attributeName === 'data-theme') {
+        // Reload to force re-render with new theme variables
+        // (Mermaid doesn't support dynamic theme swapping easily without re-parsing)
+        location.reload(); 
+      }
+    }
+  });
+  
+  observer.observe(document.documentElement, { 
+    attributes: true, 
+    attributeFilter: ['data-theme'] 
+  });
+
+  // 4. Boot
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', render);
+  } else {
+    render();
+  }
+})();

package/index.js

@@ -0,0 +1,30 @@
+// packages/plugins/mermaid/index.js
+const path = require('path');
+
+function markdownSetup(md) {
+  const defaultFence = md.renderer.rules.fence;
+  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+    const token = tokens[idx];
+    const info = token.info.trim();
+    if (info === 'mermaid') {
+      return `<div class="mermaid">${token.content}</div>`;
+    }
+    return defaultFence(tokens, idx, options, env, self);
+  };
+}
+
+function getAssets() {
+  return [
+    // REMOVED: The direct CDN link to mermaid.min.js
+    // We now rely on init-mermaid.js to import it as a module
+    {
+      src: path.join(__dirname, 'assets/init-mermaid.js'),
+      dest: 'assets/js/init-mermaid.js',
+      type: 'js',
+      location: 'body',
+      attributes: { type: 'module' } 
+    }
+  ];
+}
+
+module.exports = { markdownSetup, getAssets };

package/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@docmd/plugin-mermaid",
+  "version": "0.4.0",
+  "description": "Mermaid diagram support plugin for docmd",
+  "main": "index.js",
+  "license": "MIT"
+}