{"_id":"@alexhalkin/eleventy-plugin-mermaid","_rev":"2-f351d02e6e341a7ba6d017fd5da26a88","name":"@alexhalkin/eleventy-plugin-mermaid","dist-tags":{"latest":"3.0.1"},"versions":{"3.0.0":{"name":"@alexhalkin/eleventy-plugin-mermaid","version":"3.0.0","keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin","mermaid","mermaid-js","mermaid-js-plugin"],"author":{"url":"https://kevingimbel.de","name":"KevinGimbel"},"license":"ISC","_id":"@alexhalkin/eleventy-plugin-mermaid@3.0.0","maintainers":[{"name":"alexhalkin","email":"a.v.halkin@gmail.com"}],"homepage":"https://github.com/KevinGimbel/eleventy-plugin-mermaid#readme","bugs":{"url":"https://github.com/KevinGimbel/eleventy-plugin-mermaid/issues"},"dist":{"shasum":"102a09a5c6da60965b157ff0d76d45e524aeb537","tarball":"https://registry.npmjs.org/@alexhalkin/eleventy-plugin-mermaid/-/eleventy-plugin-mermaid-3.0.0.tgz","fileCount":4,"integrity":"sha512-SlQNKMaEOlSDP1lJGdDQuszK/nC7/EVSf6PuCfYWnlh9nCmw4bzzh/oI2LnYTl16PwinosZpw933mt2g8jNnKg==","signatures":[{"sig":"MEQCIDFrnOg1ST7sKBGOBIbMQLL08gp7CXLhs1Pb0e2UaoovAiBgsSBeWJ3i8ABQpo0lHRuqfXq8maWfafOailrtTfU5cQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6918},"main":"mermaid-11ty.js","type":"module","gitHead":"1a7f22cf110044cc089fd17f63128225e171812b","scripts":{"dev":"npx @11ty/eleventy --input=dev --output=docs --serve --watch","bump":"npm --no-git-tag-version version","build":"npx @11ty/eleventy --input=dev --output=docs"},"_npmUser":{"name":"alexhalkin","email":"a.v.halkin@gmail.com"},"repository":{"url":"git+https://github.com/KevinGimbel/eleventy-plugin-mermaid.git","type":"git"},"_npmVersion":"10.2.4","description":"Display graphs using the Mermaid JavaScript library","directories":{},"_nodeVersion":"20.11.1","dependencies":{"he":"^1.2.0"},"_hasShrinkwrap":false,"devDependencies":{"@11ty/eleventy":"^3.1.0"},"_npmOperationalInternal":{"tmp":"tmp/eleventy-plugin-mermaid_3.0.0_1747327571005_0.4372488585686338","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@alexhalkin/eleventy-plugin-mermaid","version":"3.0.1","description":"Display graphs using the Mermaid JavaScript library","homepage":"https://github.com/alexgalkin/eleventy-plugin-mermaid#readme","main":"mermaid-11ty.js","type":"module","scripts":{"dev":"npx @11ty/eleventy --input=dev --output=docs --serve --watch","build":"npx @11ty/eleventy --input=dev --output=docs","bump":"npm --no-git-tag-version version"},"repository":{"type":"git","url":"git+https://github.com/alexgalkin/eleventy-plugin-mermaid.git"},"contributors":[{"name":"Alex Halkin"}],"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin","mermaid","mermaid-js","mermaid-js-plugin"],"author":{"name":"KevinGimbel","url":"https://kevingimbel.de"},"license":"ISC","bugs":{"url":"https://github.com/alexgalkin/eleventy-plugin-mermaid/issues"},"devDependencies":{"@11ty/eleventy":"^3.1.0"},"dependencies":{"he":"^1.2.0"},"_id":"@alexhalkin/eleventy-plugin-mermaid@3.0.1","gitHead":"6f636b99d40e136b958ad3983e7f9875a1c8fb1c","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-Ekq3ig1H3jy/jOCNu0TPYE9WeNP4NkAUM+3XGlF9I2vNI8PzOd7YqxUasXNQktB3945z5HBuORgBNrWY3MW9vA==","shasum":"6137478f5f974b237e6b6957631ba012ed915202","tarball":"https://registry.npmjs.org/@alexhalkin/eleventy-plugin-mermaid/-/eleventy-plugin-mermaid-3.0.1.tgz","fileCount":4,"unpackedSize":7168,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCDBrWN7DSZ5RXM6TbmZNrBiDPPwHw3Mx7FwwHYvbuNHAIgE7fuaQpJgOooq/2iHIwrjzyjNFvO+IxZpaAM/PfWTU0="}]},"_npmUser":{"name":"alexhalkin","email":"a.v.halkin@gmail.com"},"directories":{},"maintainers":[{"name":"alexhalkin","email":"a.v.halkin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/eleventy-plugin-mermaid_3.0.1_1747388082993_0.7052885154600965"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-15T16:46:10.919Z","modified":"2025-05-16T09:34:43.356Z","3.0.0":"2025-05-15T16:46:11.200Z","3.0.1":"2025-05-16T09:34:43.183Z"},"bugs":{"url":"https://github.com/alexgalkin/eleventy-plugin-mermaid/issues"},"author":{"name":"KevinGimbel","url":"https://kevingimbel.de"},"license":"ISC","homepage":"https://github.com/alexgalkin/eleventy-plugin-mermaid#readme","keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin","mermaid","mermaid-js","mermaid-js-plugin"],"repository":{"type":"git","url":"git+https://github.com/alexgalkin/eleventy-plugin-mermaid.git"},"description":"Display graphs using the Mermaid JavaScript library","maintainers":[{"name":"alexhalkin","email":"a.v.halkin@gmail.com"}],"readme":"# eleventy-plugin-mermaid\n> Integrate [Mermaid](https://mermaid-js.github.io/mermaid/#/) with [eleventy](https://11ty.dev/)\n\nNOTE: This is a fork of the original [`@kevingimbel/eleventy-plugin-mermaid`](https://www.npmjs.com/package/@kevingimbel/eleventy-plugin-mermaid) plugin with `import/export` syntax support.\n\n<!-- BEGIN mktoc -->\n\n- [eleventy-plugin-mermaid](#eleventy-plugin-mermaid)\n  - [Usage](#usage)\n  - [Config](#config)\n    - [Config Options](#config-options)\n    - [Config Examples](#config-examples)\n      - [Inline configuration](#inline-configuration)\n  - [Examples](#examples)\n  - [Thanks](#thanks)\n  - [Future ideas](#future-ideas)\n  - [Changelog](#changelog)\n    - [3.0.0](#300)\n    - [2.2.1](#221)\n    - [2.1.1](#211)\n    - [2.1.0](#210)\n    - [2.0.0](#200)\n<!-- END mktoc -->\n\n## Usage\n\nInstall via `npm`:\n\n```bash\nnpm install @alexhalkin/eleventy-plugin-mermaid\n```\n\nInclude it in your `.eleventy.js` config file:\n\n```js\nimport pluginMermaid from \"@alexhalkin/eleventy-plugin-mermaid\";\n\nexport default function(eleventyConfig) {\n  eleventyConfig.addPlugin(pluginMermaid);\n};\n```\n\nAdd the JavaScript code to your page (before the closing `body` tag!)\n\n```html\n{% mermaid_js %}\n</body>\n</html>\n```\n\nThe `{% mermaid_js %}` code will render the following:\n\n```html\n<script type=\"module\">import mermaid from \"${src}\";mermaid.initialize({startOnLoad:true});</script>\n```\n\n`${src}`contains the script source as configured (see below). You can also skip this step and provide Mermaid as part of your JS bundle.\n\n## Config\n### Config Options\n\nGlobal config options, set in `eleventy.js`.\n\n| Option      | Type | Default       | Description | \n| ----------- | ---- | ------------- | ----------- | \n| `mermaid_js_src` | String | `https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs` | source from where Mermaid will be loaded |\n| `html_tag` | String | `pre` | The wrapping HTML tag which the graph is rendered inside |\n| `extra_classes` | String | `\"\"` | Extra CSS classes assigned to the wrapping element |\n| `mermaid_config` | String | `{startOnLoad: true}` | Define custom settings to be passed to `mermaid.initialize` |\n\n### Config Examples\n\n```js\nimport pluginMermaid from \"@alexhalkin/eleventy-plugin-mermaid\";\n\nexport default function(eleventyConfig) {\n  eleventyConfig.addPlugin(pluginMermaid, {\n    // load mermaid from local assets directory\n    mermaid_js_src: '/assets/mermaid.min.mjs',\n    html_tag: 'div',\n    extra_classes: 'graph',\n    mermaid_config: {\n      'startOnLoad': true,\n      'theme': 'dark'\n    }\n  });\n};\n```\n\n#### Inline configuration\n\nIt's possible to configure each graph using mermaid's `Inline configuration`:\n\n\n```markdown\n    ```mermaid\n      %%{init: {'theme':'forest'}}%%\n      graph TD\n      A[Public web] -->|HTTP request| B(Firewall)\n      B --> C{Is port open}\n      C -->|Yes| D[App]\n      C -->|No| E[Return error]\n    ```\n\n```\n## Examples\n\nThe plugin extends the 11ty markdown highlighter so mermaid diagrams can be written inline via code blocks marked with `mermaid`:\n\n```markdown\n    ```mermaid\n      graph TD;\n      A[Want graphs in 11ty] -->|Search Plugin| B(Found plugin);\n      B --> C{Use plugin?};\n      C -->|Yes| D[NICE GRAPHS];\n      C -->|No| E[NO GRAPHS];\n    ```\n```\n\n## Thanks\n\nThe code is mainly taken from [https://cornishweb.com/index.php/2019/05/25/using-mermaid-js-with-eleventy-io/](https://cornishweb.com/index.php/2019/05/25/using-mermaid-js-with-eleventy-io/).\n\n## Future ideas\n\n- generate SVG server-side during build\n\n## Changelog\n\n### 3.0.0\n\n- chore: Changed module syntax to ESM\n\n### 2.2.1\n\n- feat: allow setting all configurations via mermaid_config when initializing the plugin\n- fix: use `options?.` instead of `options` in case `options` isn't defined\n\n### 2.1.1\n\n- Fix closing pre tag in fallback output #5 by [@BigBlueHat](https://github.com/BigBlueHat)\n\n### 2.1.0\n\n- Add `document.addEventListener('DOMContentLoaded')` around mermaidJS code\n- Add `async` tag to script\n- Pin mermaidJS version to `10` to avoid compatibility issues in the future. This can be overwritten by setting `mermaid_js_src` and only affects users who use `{% mermaid_js %}` shortcode.\n\n### 2.0.0\n\nMermaidJS [switched to ESM only in version 10](https://github.com/mermaid-js/mermaid/issues/3590), which broke the old JavaScript path we used to get the script by default.\n\nThis version now uses the ESM module.\n","readmeFilename":"README.md","contributors":[{"name":"Alex Halkin"}]}