{"id":13837578,"url":"https://github.com/KevinGimbel/eleventy-plugin-mermaid","last_synced_at":"2025-07-10T18:33:47.000Z","repository":{"id":41219534,"uuid":"351424686","full_name":"KevinGimbel/eleventy-plugin-mermaid","owner":"KevinGimbel","description":"Integrate Mermaid with eleventy (11ty)","archived":false,"fork":false,"pushed_at":"2025-05-19T07:37:36.000Z","size":233,"stargazers_count":27,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-17T10:06:51.198Z","etag":null,"topics":["11ty-plugin","diagram","mermaidjs","ssg"],"latest_commit_sha":null,"homepage":"https://kevingimbel.github.io/eleventy-plugin-mermaid/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KevinGimbel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-03-25T12:15:54.000Z","updated_at":"2025-05-19T07:37:25.000Z","dependencies_parsed_at":"2024-01-13T17:10:53.915Z","dependency_job_id":"6b02184f-d193-4ee5-b1ce-4cd61cdce121","html_url":"https://github.com/KevinGimbel/eleventy-plugin-mermaid","commit_stats":{"total_commits":21,"total_committers":3,"mean_commits":7.0,"dds":0.09523809523809523,"last_synced_commit":"ad46f4fcd783cb140ac5f64ee7d6ae003518d4ff"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KevinGimbel/eleventy-plugin-mermaid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-mermaid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-mermaid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-mermaid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-mermaid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KevinGimbel","download_url":"https://codeload.github.com/KevinGimbel/eleventy-plugin-mermaid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-mermaid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262415561,"owners_count":23307500,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty-plugin","diagram","mermaidjs","ssg"],"created_at":"2024-08-04T15:01:15.215Z","updated_at":"2025-07-10T18:33:46.995Z","avatar_url":"https://github.com/KevinGimbel.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# eleventy-plugin-mermaid\n\u003e Integrate [Mermaid](https://mermaid-js.github.io/mermaid/#/) with [eleventy](https://11ty.dev/)\n\n\u003c!-- BEGIN mktoc --\u003e\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\u003c!-- END mktoc --\u003e\n\n## Usage\n\nInstall via `npm`:\n\n```bash\nnpm install @kevingimbel/eleventy-plugin-mermaid\n```\n\nInclude it in your `.eleventy.js` config file:\n\n```js\nimport pluginMermaid from \"@kevingimbel/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\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe `{% mermaid_js %}` code will render the following:\n\n```html\n\u003cscript type=\"module\"\u003eimport mermaid from \"${src}\";mermaid.initialize({startOnLoad:true});\u003c/script\u003e\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 \"@kevingimbel/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] --\u003e|HTTP request| B(Firewall)\n      B --\u003e C{Is port open}\n      C --\u003e|Yes| D[App]\n      C --\u003e|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] --\u003e|Search Plugin| B(Found plugin);\n      B --\u003e C{Use plugin?};\n      C --\u003e|Yes| D[NICE GRAPHS];\n      C --\u003e|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- chore: Replace older `htmlencode` with newer `he` library\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKevinGimbel%2Feleventy-plugin-mermaid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKevinGimbel%2Feleventy-plugin-mermaid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKevinGimbel%2Feleventy-plugin-mermaid/lists"}