[
  {
    "path": ".github/workflows/greetings.yml",
    "content": "name: Greetings\n\non: [pull_request, issues]\n\njobs:\n  greeting:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions/first-interaction@v1\n      with:\n        repo-token: ${{ secrets.GITHUB_TOKEN }}\n        issue-message: 'Thank you for your contribution! This is very appreciated.'\n        pr-message: 'Message that will be displayed on users'' first pr'\n"
  },
  {
    "path": ".gitignore",
    "content": "# Byte-compiled / optimized / DLL files\n__pycache__/\n*.py[cod]\n*$py.class\n\n# C extensions\n*.so\n\n# Distribution / packaging\n.Python\nbuild/\ndevelop-eggs/\ndist/\ndownloads/\neggs/\n.eggs/\nlib/\nlib64/\nparts/\nsdist/\nvar/\nwheels/\n*.egg-info/\n.installed.cfg\n*.egg\nMANIFEST\n\n# PyInstaller\n#  Usually these files are written by a python script from a template\n#  before PyInstaller builds the exe, so as to inject date/other infos into it.\n*.manifest\n*.spec\n\n# Installer logs\npip-log.txt\npip-delete-this-directory.txt\n\n# Unit test / coverage reports\nhtmlcov/\n.tox/\n.coverage\n.coverage.*\n.cache\nnosetests.xml\ncoverage.xml\n*.cover\n.hypothesis/\n.pytest_cache/\n\n# Translations\n*.mo\n*.pot\n\n# Django stuff:\n*.log\nlocal_settings.py\ndb.sqlite3\n\n# Flask stuff:\ninstance/\n.webassets-cache\n\n# Scrapy stuff:\n.scrapy\n\n# Sphinx documentation\ndocs/_build/\n\n# PyBuilder\ntarget/\n\n# Jupyter Notebook\n.ipynb_checkpoints\n\n# pyenv\n.python-version\n\n# celery beat schedule file\ncelerybeat-schedule\n\n# SageMath parsed files\n*.sage.py\n\n# Environments\n.env\n.venv\nenv/\nvenv/\nENV/\nenv.bak/\nvenv.bak/\n\n# Spyder project settings\n.spyderproject\n.spyproject\n\n# Rope project settings\n.ropeproject\n\n# mkdocs documentation\nsite/\n__test__/\n\n# mypy\n.mypy_cache/\n"
  },
  {
    "path": ".readthedocs.yml",
    "content": "# .readthedocs.yml\n# Read the Docs configuration file\n# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details\n\n# Required\nversion: 2\n\n# Build documentation in the docs/ directory with Sphinx\n# sphinx:\n#   configuration: docs/conf.py\n\nbuild:\n  os: ubuntu-22.04\n  tools:\n    python: \"3.11\"\n    # You can also specify other tool versions:\n    # nodejs: \"20\"\n    # rust: \"1.70\"\n    # golang: \"1.20\"\n\n# Python environment\npython:\n  install:\n    # these are needed, because they are not part of standard setup\n    - requirements: webdoc/extra_requirements.txt\n\n# Build documentation with MkDocs\nmkdocs:\n  configuration: webdoc/mkdocs.yml\n  fail_on_warning: false\n\n# Optionally build your docs in additional formats such as PDF and ePub\nformats: all"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog: Mkdocs-Mermaid2\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n## 1.2.3, 2025-10-15\n\n* Added: documented the use of variables and macros with MkDocs-Macros\n    in Tips and Tricks (#123); dividing the the page into 3 sections.\n\n## 1.2.2, 2025-08-27\n\n* Fixed: deprecation warning by BeautifulSoup (#119, #120) \n\n## 1.2.1, 2024-11-02\n\n* Added: a test framework with MkDocs-Test and pytest\n* Changed: migrated from `setup.py` to `pyproject.toml`\n\n## 1.1.2, 2024-09-05\n\n* Changed: If the `javascript` parameter starts with http(s) and no Internet\naccess is available, a WARNING is now issued\n(mkdocs no longer fails with an exception).\n\n## 1.1.1, 2023-09-26\n\n* Fixed: Bug with local javascript library \n\n## 1.1.0, 2023-09-01\n\n* Added: Parameter `javascript` in config file for optionally specifying the\n    URL or path of the Mermaid javascript library.\n\n* Changed: Parameter `extra_javascript` in config file is DEPRECATED,\n    for optionally specifying the URL or path of the Mermaid javascript library\n\n* Changed: Updated documentation.\n\n## 1.0.8, 2023-08-09\n\n* Fixed: Arguments of config file not taken into consideration,\n    for mermaid.js version > 10 (#82)\n\n## 1.0.5, 2023-07-29\n\n* Added: A new [doc website is available on Read The Docs](https://mkdocs-mermaid2.readthedocs.io/en/latest/).\n\n## 1.0.1, 2023-07\n\n* Added: Now the plugin works with versions of the library > 10 and lower (#75)\n* Added: Added: A new [doc website is available on Read The Docs](https://mkdocs-mermaid2.readthedocs.io/en/latest/).\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2018 PuGong -- 2020, others\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "MANIFEST.in",
    "content": "include README.md\ninclude LICENSE.md"
  },
  {
    "path": "README.md",
    "content": "<div align=\"center\">\n\n# Mkdocs-Mermaid2\n\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) \n[![PyPI](https://img.shields.io/pypi/v/mkdocs-mermaid2-plugin)](https://pypi.org/project/mkdocs-mermaid2-plugin/)\n![Github](https://img.shields.io/github/v/tag/fralau/mkdocs-mermaid2-plugin?label=github%20tag)\n![Downloads(PyPI)](https://img.shields.io/pypi/dm/mkdocs-mermaid2-plugin)\n\n\nAn [MkDocs](https://www.mkdocs.org/) plugin that renders [Mermaid](https://mermaid-js.github.io/mermaid) text descriptions into diagrams (flow charts, sequence diagrams, pie charts, etc.).\n\n</div>\n\n---\n\n* **See the [mkdocs-mermaid2 documentation on Read The Docs](https://mkdocs-mermaid2.readthedocs.io).**\n* See the [package on Pypi](https://pypi.org/project/mkdocs-mermaid2-plugin/).\n* View the [general Mkdocs documentation](https://www.mkdocs.org/)\n\n\n> As of version 1.0.0, this plugin works with versions of the Mermaid library > 10,\n> **and** with lower versions.\n\n\n<!-- To update the toc, run the following command:\nmarkdown-toc -i README.md \n-->\n\n<!-- toc -->\n\n- [Mkdocs-Mermaid2](#mkdocs-mermaid2)\n  - [Introduction](#introduction)\n  - [Installation](#installation)\n    - [Automatic](#automatic)\n    - [Manual](#manual)\n    - [Test](#test)\n  - [Configuration](#configuration)\n    - [Basic configuration](#basic-configuration)\n    - [Specifying the version of the Mermaid library](#specifying-the-version-of-the-mermaid-library)\n    - [Additional settings for the Material theme](#additional-settings-for-the-material-theme)\n  - [For more information](#for-more-information)\n\n<!-- tocstop -->\n\n## Introduction\n\nMermaid2 allows you to insert mermaid markup in the markdown \nof your mkdocs pages.\n\nFor example, a markdown page containing the following diagram:\n\n    ```mermaid\n    graph LR\n        hello --> world\n        world --> again\n        again --> hello\n    ```\n\nwill then be displayed in the final HTML page as:\n\n```mermaid\ngraph LR\n    hello --> world\n    world --> again\n    again --> hello\n```\n\nThe diagram will be rendered on the fly by the web browser,\nwith the use of the mermaid javascript library. \nmkdocs-mermaid2 takes care of inserting the javascript library into\nthe html page.\n\n> You can use all the diagrams types supported by the version of the Mermaid \n> javascript library that you are using (flowchart, class, state, timeline, \n> etc.).\n\n\n## Installation\n\n### Automatic\n\n\n```bash\npip install mkdocs-mermaid2-plugin\n```\n\n### Manual\nClone this repository in a local directory and install the package:\n\n```bash\npython setup.py install\n```\n\n### Test\nFor running the examples the `test` directory, \nyou will also need the mkdocs-material theme. You may \n[install it directly](https://squidfunk.github.io/mkdocs-material/getting-started/),\nor use the following command to install the whole package:\n\n```bash\npip install mkdocs-mermaid2-plugin[test]\n```\n\n\n\n\n\n## Configuration\n\n### Basic configuration\nTo enable this plugin, you need to declare it in your [mkdocs config file](https://www.mkdocs.org/user-guide/configuration/)\n(`mkdocs.yml`).\n\nIn order to work, the plugin also requires the\n[mermaid](https://www.npmjs.com/package/mermaid) javascript\nlibrary (in the example below, it fetched from the last version\nfrom the [unpkg](https://unpkg.com/) repository; change the version\nno as needed).\n\n```yaml\nplugins:\n    - search\n    - mermaid2\n```\n> **Note:**  If you declare plugins, you need to declare _all_ of them, \n> including `search` (which would otherwise have been installed by default.)\n\n\n### Specifying the version of the Mermaid library\n\n\nBy default, the plugin selects a version of the Mermaid javascript library\nthat is known to work (some versions work better than others).\n\nYou may specify a different version of the Mermaid library, like so:\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      version: 10.0.2\n```\n\nThe plugin will insert the correct call to the javascript library\ninside the final HTML page.\n\n### Additional settings for the Material theme\n\n\n> The [Material theme](https://squidfunk.github.io/mkdocs-material/), \n> developed by [squidfunk](https://github.com/squidfunk)\n> is not mandatory, but recommended.\n\n**Mermaid diagrams will automatically adapt their colors to the theme\nand palette.**\n\nHere are the _additional_ recommended settings in the configuration file:\n\n```yaml\nmarkdown_extensions:\n  - pymdownx.superfences:\n        # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n\n```\n\n> Do not use these additional settings for other themes, \n> as diagrams will probably **not** be displayed correctly. \n\n\n## For more information\nSee the [documentation on ReadTheDocs](https://mkdocs-mermaid2.readthedocs.io)."
  },
  {
    "path": "README_old.md",
    "content": "# mkdocs-mermaid2-plugin\n\n\n**THIS IS AN OLD VERSION, KEPT HERE FOR REFERENCE**\n\n[Use the documentation on ReadTheDocs](https://mkdocs-mermaid2.readthedocs.io).\n\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) \n[![PyPI](https://img.shields.io/pypi/v/mkdocs-mermaid2-plugin)](https://pypi.org/project/mkdocs-mermaid2-plugin/)\n![Github](https://img.shields.io/github/v/tag/fralau/mkdocs-mermaid2-plugin?label=github%20tag)\n![Downloads(PyPI)](https://img.shields.io/pypi/dm/mkdocs-mermaid2-plugin)\n\n\nAn [MkDocs](https://www.mkdocs.org/) plugin that renders textual graph\ndescriptions into [Mermaid](https://mermaid-js.github.io/mermaid) graphs\n(flow charts, sequence diagrams, pie charts, etc.).\n\n\n\n> As of version 1.0.0, this plugin works with versions of the Mermaid library > 10,\n> **and** with lower versions.\n\n\n<!-- To update the toc, run the following command:\nmarkdown-toc -i README.md \n-->\n\n<!-- toc -->\n\n- [Introduction](#introduction)\n- [Installation](#installation)\n  * [Automatic](#automatic)\n  * [Manual](#manual)\n  * [Test](#test)\n- [How it works](#how-it-works)\n- [Configuration](#configuration)\n  * [Basic configuration](#basic-configuration)\n  * [Specifying the version of the Mermaid library](#specifying-the-version-of-the-mermaid-library)\n  * [Explicit declaration of the Mermaid library](#explicit-declaration-of-the-mermaid-library)\n- [Usage](#usage)\n  * [General Principle](#general-principle)\n  * [How to write Mermaid diagrams](#how-to-write-mermaid-diagrams)\n  * [Adding arguments to the Mermaid engine](#adding-arguments-to-the-mermaid-engine)\n  * [Testing](#testing)\n  * [Adding a Javascript callback function](#adding-a-javascript-callback-function)\n    + [Use Case](#use-case)\n    + [Method](#method)\n- [Tips and Tricks](#tips-and-tricks)\n  * [Setting the security level to \"loose\"](#setting-the-security-level-to-loose)\n  * [Formatting text in diagrams](#formatting-text-in-diagrams)\n  * [Adding Hyperlinks to a Diagram (versions of Mermaid javascript >~ 8.5.0)](#adding-hyperlinks-to-a-diagram-versions-of-mermaid-javascript--850)\n  * [Adding Hyperlinks to a Diagram (versions of Mermaid javascript <~ 8.5.0)](#adding-hyperlinks-to-a-diagram-versions-of-mermaid-javascript--850)\n  * [Auto-configure dark mode based on Host OS](#auto-configure-dark-mode-based-on-host-os)\n  * [Material Theme: Switching the Mermaid diagram on the fly between light and dark mode](#material-theme-switching-the-mermaid-diagram-on-the-fly-between-light-and-dark-mode)\n- [Compatibility](#compatibility)\n  * [List](#list)\n  * [Using Mermaid and code highlighting at the same time](#using-mermaid-and-code-highlighting-at-the-same-time)\n    + [Usage](#usage-1)\n    + [Use of markdown extensions](#use-of-markdown-extensions)\n    + [Declaring the superfences extension](#declaring-the-superfences-extension)\n- [Troubleshooting](#troubleshooting)\n  * [The mermaid diagram is not displayed (or displayed incorrectly)](#the-mermaid-diagram-is-not-displayed-or-displayed-incorrectly)\n    + [Seeing an error message at the place of the diagram?](#seeing-an-error-message-at-the-place-of-the-diagram)\n    + [The mermaid source code appears as-is (not read)?](#the-mermaid-source-code-appears-as-is-not-read)\n    + [Using another theme than material ?](#using-another-theme-than-material-)\n    + [Using superfences, but no diagram is displayed?](#using-superfences-but-no-diagram-is-displayed)\n    + [Is mkdocs' version up to date (>= 1.1) ?](#is-mkdocs-version-up-to-date--11-)\n    + [Is the javascript library properly called?](#is-the-javascript-library-properly-called)\n    + [A certain type of diagram (e.g. mindmap, etc.) is not displayed, or the syntax is incorrectly interpreted?](#a-certain-type-of-diagram-eg-mindmap-etc-is-not-displayed-or-the-syntax-is-incorrectly-interpreted)\n  * [Other issues](#other-issues)\n    + [Rich text diagrams, or links are not displayed properly?](#rich-text-diagrams-or-links-are-not-displayed-properly)\n    + [With pymdownx.details, diagrams in collapsed elements are not displayed?](#with-pymdownxdetails-diagrams-in-collapsed-elements-are-not-displayed)\n- [Using the mermaid2.dumps() function](#using-the-mermaid2dumps-function)\n- [How to contribute](#how-to-contribute)\n- [Credits](#credits)\n\n<!-- tocstop -->\n\n## Introduction\n\nMermaid2 allows you to insert mermaid markup in the markdown \nof your mkdocs pages.\n\nFor example, a markdown page containing the following diagram:\n\n    ```mermaid\n    graph LR\n        hello --> world\n        world --> again\n        again --> hello\n    ```\n\nwill then be displayed in the final HTML page as:\n\n```mermaid\ngraph LR\n    hello --> world\n    world --> again\n    again --> hello\n```\n\nThe diagram will be rendered on the fly by the web browser,\nwith the use of the mermaid javascript library. \nmkdocs-mermaid2 takes care of inserting the javascript library into\nthe html page.\n\n> You can use all the diagrams types supported by the version of the Mermaid \n> javascript library that you are using (flowchart, class, state, timeline, \n> etc.).\n\n\n## Installation\n\n### Automatic\n\n\n```bash\npip install mkdocs-mermaid2-plugin\n```\n\n### Manual\nClone this repository in a local directory and install the package:\n\n```bash\npython setup.py install\n```\n\n### Test\nFor running the examples the `test` directory, \nyou will also need the mkdocs-material theme. You may \n[install it directly](https://squidfunk.github.io/mkdocs-material/getting-started/),\nor use the following command to install the whole package:\n\n```bash\npip install mkdocs-mermaid2-plugin[test]\n```\n\n\n## How it works\n\nWhen converting the markdown into HTML, mkdocs normally inserts the\nMermaid code (text) describing the diagram \ninto segments `<pre><code class='mermaid>`:\n\n    <pre><div class=\"mermaid\">\n    ...\n    </div></pre>\n\nTo make the HTML/css page more robust, the mermaid plugin converts \nthose segments into `<div>` elements in the final HTML page:\n\n    <div class=\"mermaid\">\n    ...\n    </div>\n\nIt also inserts a call to the \n[javascript library](https://github.com/mermaid-js/mermaid) :\n\n\n\n> **From version 1.0 of mkdocs-mermaid2:**\n\n[For versions from 10.0.0 of the Mermaid javascript library, the plugin uses the ESM format](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0), since\nit is the only one available. This requires a specific call from the HTML\npage e.g.:\n```html\n<script type=\"module\">\nimport mermaid from \"https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\"\n</script>\n```\n\nFor an earlier version of the library, the plugin uses the traditional call\nfrom HTML:\n```html\n<script src=\"https://unpkg.com/mermaid@8.8.2/dist/mermaid.min.js\">\n</script>\n```\n\nTo start displaying of the diagrams, the plugin then automatically inserts \na separate call to initialize the Mermaid library:\n\n    <script>\n    mermaid.initialize()\n    </script>\n\n\nThe user's browser will then read this code and render it on the fly.\n\n> No svg/png images are produced during the rendering of that graph.\n\n\n\n\n\n## Configuration\n\n### Basic configuration\nTo enable this plugin, you need to declare it in your [mkdocs config file](https://www.mkdocs.org/user-guide/configuration/)\n(`mkdocs.yml`).\n\nIn order to work, the plugin also requires the\n[mermaid](https://www.npmjs.com/package/mermaid) javascript\nlibrary (in the example below, it fetched from the last version\nfrom the [unpkg](https://unpkg.com/) repository; change the version\nno as needed).\n\n```yaml\nplugins:\n    - search\n    - mermaid2\n```\n> **Note:**  If you declare plugins, you need to declare _all_ of them, \n> including `search` (which would otherwise have been installed by default.)\n\n> **Important:** If you use another theme than material you **must** use a version of the plugin >= 0.5.0.\n\n### Specifying the version of the Mermaid library\n> **For plugin version >= 0.4**\n\nBy default, the plugin selects a version of the Mermaid javascript library\nthat is known to work (some versions work better than others).\n\nYou may specify a different version of the Mermaid library, like so:\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      version: 10.0.2\n```\n\nThe plugin will insert the correct call to the javascript library\ninside the final HTML page.\n\n\n### Explicit declaration of the Mermaid library\n\nYou _may_ specify the mermaid library explicitly, as long as it is\ncall mermaid (independently of extension):\n\n```yaml\nextra_javascript:\n    - https://unpkg.com/mermaid@8.7.0/dist/mermaid.min.js\n```\n\nThis will be translated in the final HTML page as:\n\n```html\n<script src=\"https://unpkg.com/mermaid@8.7.0/dist/mermaid.min.js\">\n```\n\n> This will work **only** for versions of the Mermaid javascript \n> library that can be called in that way, i.e. that do not use the ES Module\n> standard (ESM). [Above version 10.0.0 only ESM format libraries are\n> available](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0).\n\n\nAs a workaround you could declare a local script file:\n\n```yaml\nextra_javascript:\n    - js/mermaidloader.js\n```\n\nWhere `js` is a subdirectory of the document directory (`docs`).\n\nIf you are using a local javascript file, it is up to you to write the import,\nwith a version of the Mermaid library > 10 e.g.:\n\n```javascript\nimport mermaid from \"https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\"\n```\n\nNo explicit call to `mermaid.initialize()` is required, since it is\nautomatically inserted by the plugin.\n\n\n\n\n\n\n## Usage\n\n### General Principle\nIn order to insert a Mermaid diagram in a markdown page, simply \ntype it using the mermaid syntax,\nand surround it with the code fence for Mermaid:\n\n\n    ```mermaid\n    graph TD\n    A[Client] --> B[Load Balancer]\n    B --> C[Server01]\n    B --> D[Server02]\n    ```\n\n### How to write Mermaid diagrams\n\n* For instructions on how to make a diagram, see [the official website](https://mermaid.js.org).\n* If you are not familiar, see the [Mermaid Overview for Beginners](https://mermaid.js.org/community/n00b-overview.html).\n* In case of doubt, you will want to test your diagrams in the [Mermaid Live Editor](https://mermaid.live).\n\n### Adding arguments to the Mermaid engine\n\nBy default, the plugin automatically inserts \na Javascript command `mermaid.initialize();`\nin the HTML pages, which starts the interpretation.\nSometimes, however, you may want to add some\ninitialization commands (see [full list](https://github.com/mermaid-js/mermaid/blob/master/docs/config/setup/modules/mermaidAPI.md#mermaidapi-configuration-defaults)).\n\nFor example, you could change the theme of the diagram, \nusing 'dark' instead of the default one. \nSimply add those arguments in the config file, e.g.\n\n```yaml\nplugins:\n    - search\n    - mermaid2:\n        arguments:\n          theme: 'dark'\n```\n\n### Testing\n\nTo test your website with a diagram, restart the mkdocs server:\n\n    mkdocs serve\n\nIn your browser, open the webpage on the localhost\n(by default: `https://localhost:8000`)\n\n\n### Adding a Javascript callback function\n\n_New in 0.3.0_\n\n**CAUTION**: As of the [version 10.0.0 of the javascript Library(https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md#changelog)], callbacks are no longer accepted.\nIf you wish to use callbacks, specify a lower version of the\nlibrary in the config file.\n\n#### Use Case\nTo make modifications that are not possible with css, it can be useful\nto insert a callback function (Javascript) into the target HTML page.\n\nThis can be done using the standard pattern, e.g.:\n\n```javascript\n<script src=\"js/extra.js\">\n<script>mermaid.initialize({\n    theme: \"dark\",\n    mermaid: {\n        callback: myMermaidCallbackFunction\n    }\n});</script>\n```\n\nIn this case, `myMermaidCallbackFunction`is located in\nthe `js/extra.js` on the site's root directory. \n\nHere is a simplistic example:\n\n```\n// js/extra.js\nfunction myMermaidCallbackFunction(id) {\n  console.log('myMermaidCallbackFunction', id);\n```\n\n> You will see the results if you display the browser's console.\n\n#### Method\nThis can be translated into the config (`mkdocs.yaml`) file as:\n\n```yaml\nplugins:\n  - mermaid2:\n      arguments:\n        theme: dark\n        mermaid:\n            callback: ^myMermaidCallbackFunction\n\nextra_javascript:\n  - https://unpkg.com/mermaid/dist/mermaid.min.js\n  - js/extra.js\n```\n\n1. Note that **the name of the function must be preceded by a ^ (caret)**\n   to signify it's a literal and not a string.\n2. Consider the **directory path** for the script\n   as **relative to the document directory** (`docs`).\n   Mkdocs will then put it in the proper place in the hierarchy of the\n   html pages.\n\n## Tips and Tricks\n\n### Setting the security level to \"loose\"\n\nTo access these functions, you need to relax mermaid's security level,\n([since version 8.2](https://mermaid-js.github.io/mermaid/#/?id=special-note-regarding-version-82)).\n\n> This requires, of course, your application taking responsibility \n> for the security of the diagram source.\n\nIf that is OK with you, you can set the argument in the configuration of the\nplugin:\n\n```yaml\n    - mermaid2:\n        arguments:\n          securityLevel: 'loose'\n```\n\n### Formatting text in diagrams\n> To enable this function, you need to [relax mermaid's security level to 'loose'](#setting-the-security-level-to-loose).\n\nYou may use HTML in the diagram.\n\n> **Note:** This is guaranteed to work with Mermaid 8.6.4, but\n> does not work e.g. on 8.7.0.\n\n\n```mermaid\ngraph LR\n    hello[\"<b>Hello</b>\"] --> world[\"<big><i>World</i></big>\"]\n    world --> mermaid[mermaid web site]\n```\n\nUse this in the config file:\n```yaml\nextra_javascript:\n     - https://unpkg.com/mermaid@8.6.4/dist/mermaid.min.js\n```\n\n\n\n### Adding Hyperlinks to a Diagram (versions of Mermaid javascript >~ 8.5.0)\n\n> To enable this function, you need to [relax mermaid's security level to 'loose'](#setting-the-security-level-to-loose).\n\nUse the click directive in the language (for more information,\nsee [Interaction](https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction) on the official mermaid website).\n\n```mermaid\ngraph LR\n    hello --> world\n    world --> mermaid[mermaid web site]\n    click mermaid \"https://mermaid-js.github.io/mermaid\" \"Website\"\n```\n\n\n\n### Adding Hyperlinks to a Diagram (versions of Mermaid javascript <~ 8.5.0)\n> To enable this function, you need to [relax mermaid's security level to 'loose'](#setting-the-security-level-to-loose).\n\nIt is possible to add hyperlinks to a  diagram, e.g.:\n\n```\nbox1[An <b>important</b> <a href=\"https://google.com\">link</a>] \n```\n\n\n### Auto-configure dark mode based on Host OS\n\nUsing a combination of the unquote (`^`) functionality of this plugin and the\n[prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)\nCSS media feature, one can have the plugin automatically enable dark mode.\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      arguments:\n          theme: |\n            ^(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'\n```\n\nThis works well with the `scheme: preference` option in\n[mkdocs-material](https://squidfunk.github.io/mkdocs-material/) and referenced in [their documentation](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-scheme).\n\n\n\n### Material Theme: Switching the Mermaid diagram on the fly between light and dark mode\nThe Material theme for MkDocs allows [toggling between colors](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette-toggle).\nUnfortunately the Mermaid diagram will not switch out of the box from light to\ndark or vice versa. \n\n\nThis solution is similar to [switch the theme according to the OS color](#auto-configure-dark-mode-based-on-host-os), \nthough that earlier, simpler solution cannot toggle dynamically.\n\nA workable solution has been proposed by [elgalu](https://github.com/elgalu)\n(for more information see [Issue 39](https://github.com/fralau/mkdocs-mermaid2-plugin/issues/39)).\n\n\n\n**`mkdocs.yml`**\n\n(The palette is an example, where primary color, accent, icons, toggle message, etc. can be adapted to your needs.)\n\n```yaml\ntheme:\n  name: material\n  # https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette\n  palette:\n    - media: \"(prefers-color-scheme: light)\"\n      scheme: default\n      primary: indigo\n      accent: light-blue\n      toggle:\n        icon: material/toggle-switch-off-outline\n        name: Switch to dark mode\n    - media: \"(prefers-color-scheme: dark)\"\n      scheme: slate\n      primary: black\n      accent: deep orange\n      toggle:\n        icon: material/toggle-switch\n        name: Switch to light mode\n\n  # https://facelessuser.github.io/pymdown-extensions/extensions/superfences/\n  pymdownx.superfences:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid\n\nplugins:\n  - mermaid2:\n      arguments:\n        # test if its __palette_1 (dark) or __palette_2 (light)\n        # for mkdocs-material >=8.0.0\n        theme: |\n          ^(JSON.parse(__md_get(\"__palette\").index == 1)) ? 'dark' : 'light'\n#       for mkdocs-material <8.0.0\n#         ^(JSON.parse(window.localStorage.getItem(__prefix('__palette'))).index == 1) ? 'dark' : 'light'\n\nextra_javascript:\n    - extra/refresh_on_toggle_dark_light.js\n```\n\n> The caret operator (`^`) means \"unquote\". It is used here to insert Javascript code into the initialization code of `mermaid.initialize()`.\n\n\n**`docs/extra/refresh_on_toggle_dark_light.js`**\n\nTo avoid refreshing the page after switching between dark/light modes so that Mermaid diagram can be updated, two listeners\nmust be installed, which are instructed to reload the page, whenever \nthey detect a change.\n\nThat is the function of the additional script\n(`refresh_on_toggle_dark_light.js`):\n\n```javascript\nvar paletteSwitcher1 = document.getElementById(\"__palette_1\");\nvar paletteSwitcher2 = document.getElementById(\"__palette_2\");\n\npaletteSwitcher1.addEventListener(\"change\", function () {\n  location.reload();\n});\n\npaletteSwitcher2.addEventListener(\"change\", function () {\n  location.reload();\n});\n```\n\n## Compatibility\n\n### List\nHere is a short list of compatibilities and incompatibilities for\nthe mermaid plugin:\n\n| Item                     | Type      | Status | Note                                                             |\n|--------------------------|-----------|--------|------------------------------------------------------------------|\n| **mkdocs**               | theme     | YES    | (default) plugin version >= 0.5                                  | \n| **material**             | theme     | YES    |                                                                  |\n| **windmill**             | theme     | YES    | plugin version >= 0.5                                            | \n| **admonition**           | extension | YES    |                                                                  |\n| **footnotes**            | extension | YES    |                                                                  |\n| **minify**               | plugin    | NO     | Breaks the mermaid diagrams.                                     |\n| **pymdownx.highlight**   | extension | NO     | Use [pymdownx.superfences](#declaring-the-superfences-extension) |\n| **pymdownx.superfences** | extension | OK     | [see paragraph](#declaring-the-superfences-extension)            |\n| **search**               | plugin    | OK     | Do not forget to declare it in `config.yml`.                     |\n\n### Using Mermaid and code highlighting at the same time\n\n>**IMPORTANT** Do NOT use Superfences unless you want code highlighting.\n\n#### Usage\n\nIt is quite natural that we want to display **mermaid diagrams**,\nwhile having usual **code highlighting** (for bash, python, etc.).\n\n#### Use of markdown extensions\n**Symptom**: The mermaid code is not transformed into a diagram,\nbut processed as code to be displayed (colors, etc.).\n\n\nThe likely reason is that you have a markdown extension that interprets\nall fenced code as code to display, and it prevents the mkdocs-mermaid2\nplugin from doing its job.\n\n**Do not use the [codehilite](https://squidfunk.github.io/mkdocs-material/extensions/codehilite/) markdown extension.**\n\nInstead, use [facelessusers](https://github.com/facelessuser)'s splendid \n[PyMdown's superfences](https://facelessuser.github.io/pymdown-extensions/extensions/superfences/); and use the \n**[custom fences](https://facelessuser.github.io/pymdown-extensions/extensions/superfences/#custom-fences)**\nfacility.\n\n\n#### Declaring the superfences extension\nIn the config file (`mkdocs.yaml`):\n\n```yaml\nmarkdown_extensions:\n  - pymdownx.superfences:\n      # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid\n```\n\nIt means: \n\n1. Take the fenced parts marked with mermaid\n2. Turn them into `class='mermaid'`.\n3. To format those pieces, use the function `fence_mermaid`, \n   from the mermaid2 package.\n\nThere are **two** functions:\n\n* `fence_mermaid` for the general case.\n* `fence_mermaid_custom` for the Material theme (note the use of\nthe **custom** suffix)\n\nHence, for the Material theme (only):\n```yaml\nmarkdown_extensions:\n  - pymdownx.superfences:\n      # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n```\n\n\n\n> **IMPORTANT:** Note that the superfences will be slightly more demanding with\n> HTML tags inside a mermaid diagram: \n> **take care to always close the HTML tags that require it**\n> (e.g. `<small>` must have its corresponding `</small>` tag).\n> Otherwise, the extension system will attempt to close those tags \n> and it will break the diagram.\n\n\n## Troubleshooting\n\n### The mermaid diagram is not displayed (or displayed incorrectly)\n\n> To start with, use a simple diagram that you know is syntactically correct.\n\ne.g.\n\n    ```mermaid\n    graph TD\n    A[Client] --> B[Load Balancer]\n    B --> C[Server01]\n    B --> D[Server02]\n    ```\n\n#### Seeing an error message at the place of the diagram?\n\nIn recent versions of the javascript library (> 8.6.0), a pretty\nerror message is displayed in case of incorrect syntax:\n\n![error message](error.png)\n\n> **In earlier versions, the library displays nothing, which \n> can be confusing.**\n\nIf you see the error message, it is at least an indication that \nthe mermaid javascript library was called.\n\n#### The mermaid source code appears as-is (not read)?\nIn that case, the javascript library was probably not called.\nSee the next questions.\n\n\n#### Using superfences, but no diagram is displayed?\n\nIf you are using the superfences extension, but you see the source\ncode, you probably forgot to declare the custom_fences. \nSe more explanations under [Declaring the superfences extension](#declaring-the-superfences-extension)\n\n#### Is mkdocs' version up to date (>= 1.1) ?\n\nUse `mkdocs -v`.\n\nIf not, update it:\n\n    pip install mkdocs --upgrade\n\nOr, if you cloned this repo:\n\n    python setup.py install\n\n\n#### Is the javascript library properly called?\n\nIn order to work, the proper javascript library must called from\nthe html page (this is done automatically).\nIf necessary check the link used in the HTML page generated, e.g.:\n\n```HTML\n<script type=\"module\">import mermaid from \"https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\"</script>\n```\n\nEvery diagram should start with a valid preamble, e.g. `graph TD`.\n\nIn case of doubt, you may want to test your diagram in the\n[Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).\n\n\n> Note, however, that the Mermaid Live Editor **does not\n> support loose mode** (with HTML code in the mermaid code).\n\n#### A certain type of diagram (e.g. mindmap, etc.) is not displayed, or the syntax is incorrectly interpreted?\n\nCheck the version of the javascript mermaid library you are using (it's indicated\nin the error message; as a last resort, check in the html page). \nYou can [change the library version if needed](#specifying-the-version-of-the-mermaid-library).\n\n### Other issues\n\n#### Rich text diagrams, or links are not displayed properly?\n\n1. As a first step, [set the security level to 'loose'](#setting-the-security-level-to-loose).\n2. Make sure you use a compatible version of the javascript library\n   (8.6.4, 8.8.0, ~~8.7.0~~). In principle, the version used\n   by the plugin is compatible (see instructions to \n   [change the version](#specifying-the-version-of-the-mermaid-library)).\n\n\n#### With pymdownx.details, diagrams in collapsed elements are not displayed?\n\n**This fix is experimental (it has been tested once and it worked).**\n\nIf you declared `pymdownx.details` in `config.yml` \n(under `markdown_extensions`), you may notice that a diagram will not\ndisplay correctly in that case:\n\n```markdown\n???- note \"Collapsed\"\n    ```mermaid\n    graph TD\n    A[Client] --> B[Load Balancer]\n    ```\n    This is additional text.\n```\n\nDepending on the browser, you may have a dot, or nothing, etc.\n\n\nIn that case, use the following declaration in your `markdown_extensions`:\n```yaml\n  - pymdownx.superfences:\n      # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n```\n\nThe use of this function will trigger a custom behavior, with two effects:\n\n1. It will create custom HTML tags, `<pre class='mermaid'><code>`.\n2. It will deactivate the auto-load.\n\nYou **must** then use a special custom javascript loader for the diagram,\ndeveloped by [facelessuser](https://github.com/facelessuser): \n\n1. Copy the code from\nthe [website of PyMdown Extension](https://facelessuser.github.io/pymdown-extensions/extras/mermaid/#putting-it-all-together).\n2. Paste it in a file in your project: `docs/js/loader.js`\n3. Declare this script in the `config.yml` file:\n\n```yaml\nextra_javascript:\n     - js/loader.js\n```\n\n\n## Using the mermaid2.dumps() function\n\nAs a bonus, mermaid2 exports the function `dumps()` which produces a string\ndescribing a [JavaScript object](https://javascript.info/object).\nIt can be used to help generate JavaScript code from Python\n(this is typically needed, when generating an HTML page that contains\nJavaScript).\n\nA JavaScript object is not exactly the same as a JSON object.\nThe reason why this why introduced is that sometimes one needs to produce\na key/value pair as:\n\n```JavaScript\nfoo = MyFunctioName\n```\n\nwhere the value is _not_ a string but an identifier (in this case:\na function name).\n\nHere is an example:\n\n```python\nimport mermaid2\n\nobj = { \"hello\": \"world\", \n    \"barbaz\": \"^bazbar\",\n    \"foo\": {\"bar\": 2},\n    \"bar\": True}\n\ns = mermaid2.dumps(obj)\n\n```\n\nThe purpose of the caret is to specify that the value should be\nan identifier and not a string. The result will be:\n\n```JavasScript\n{\n    hello: \"world\",\n    barbaz: bazbar,\n    foo: {\n        bar: 2\n    },\n    bar: true\n}\n```\n\n## How to contribute\n\nContributions are welcome.\n\nUse the Issues to signal a bug or propose a feature you believe is necessary.\n\nIf this is a usage question, prefer the discussions.\n\nAlways open an Issue and consider the answers, before submitting a PR.\n\n## Credits\n\nmkdocs-mermaid2 is a fork from\n[Pugong Liu's excellent project](https://github.com/pugong/mkdocs-mermaid-plugin), \nwhich is no longer maintained. This new plugin offers expanded documentation as\nwell as new functions.\n\nIt is also compatible with versions of the mermaid library > 10.0.\n\nThanks to all the members of the community who participated to the \nimprovement of this project with ideas and PRs."
  },
  {
    "path": "mermaid2/__init__.py",
    "content": "\"Exports of mermaid2\"\n\n# export the dumps function (for producing a JS object)\nfrom .pyjs import dumps\n\n# export the fence_mermaid for pymdownx.superfences\nfrom .fence import fence_mermaid, fence_mermaid_custom\n\n\n"
  },
  {
    "path": "mermaid2/fence.py",
    "content": "\"\"\"\nSpecial fence for PyMdown Extensions Superfences\nSee: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/#formatters\n\nNOTE: SUPERFENCES AND CUSTOM_FENCES ARE NOT NEEDED UNLESS\n      CODE HIGHLIGHTING IS REQUIRED.\n\n- fence_mermaid() for most Mkdocs themes\n- fence_mermaid_custom() for Material theme\n\"\"\"\nfrom functools import partial\n\n\ndef fence_mermaid(source, language, css_class, options, md, \n            classes=None, id_value='', custom=False, **kwargs):\n    \"\"\"\n    For mermaid loose mode:\n\n    This function is needed for correctly displaying the mermaid\n    HTML in diagrams when pymdownx.superfences is activated,\n    so that code highlighting is activated.\n\n    Contrary to the standard fence_div_format used in\n    https://github.com/facelessuser/pymdown-extensions/blob/9489bd8d94eebf4a109b7dada613bc2db378e31f/pymdownx/superfences.py#L149,\n    this function it format sources as <div>...</div> but\n    WITHOUT escaping the < and > characters in the HTML.\n\n    It should be called in the mkdocs.yaml file as:\n\n    markdown_extensions:\n        - ...\n        - ...\n        - pymdownx.superfences:\n            # make exceptions to highlighting of code:\n            custom_fences:\n                - name: mermaid\n                class: mermaid\n                format: !!python/name:mermaid2.fence_mermaid\n    \"\"\"\n\n    if id_value:\n        id_value = ' id=\"{}\"'.format(id_value)\n    classes = css_class if classes is None else ' '.join(classes + [css_class])\n\n    if custom:\n        html = '<pre %s class=\"%s\"><code>%s\\n</code></pre>' % \\\n                (id_value, classes, source)\n    else:\n        html = '<div %s class=\"%s\">%s\\n</div>' % \\\n                (id_value, classes, source)\n    # print(\"--- Mermaid ---\\n\", html, \"\\n------\")\n    return html\n\n# special custom function for Material theme\n# (do not forget to specify name!)\nfence_mermaid_custom = partial(fence_mermaid, custom=True)\nfence_mermaid_custom.__name__ = 'fence_mermaid_custom'"
  },
  {
    "path": "mermaid2/plugin.py",
    "content": "\"\"\"\nMain plugin module for mermaid2\n\"\"\"\n\nimport os\n\n\nfrom mkdocs.plugins import BasePlugin\nfrom mkdocs.config.config_options import Type as PluginType\nfrom bs4 import BeautifulSoup\n\nfrom . import pyjs\nfrom .util import info, libname, url_exists\n\n\n# ------------------------\n# Constants and utilities\n# ------------------------\n# the default (recommended) mermaid lib:\nJAVASCRIPT_VERSION = '10.4.0'\nJAVASCRIPT_PRE_10 = \"https://unpkg.com/mermaid@%s/dist/mermaid.min.js\"\n# New format (ESM):\nJAVASCRIPT = \"https://unpkg.com/mermaid@%s/dist/mermaid.esm.min.mjs\"\n\n\n\n\n# Two conditions for activating custom fences:\nSUPERFENCES_EXTENSION = 'pymdownx.superfences'\nCUSTOM_FENCE_FN = 'fence_mermaid_custom' \n\n\n\n# ------------------------\n# Plugin\n# ------------------------\nclass MarkdownMermaidPlugin(BasePlugin):\n    \"\"\"\n    Plugin for interpreting Mermaid code\n    \"\"\"\n    config_scheme = (\n\n        ('version', PluginType(str, default=JAVASCRIPT_VERSION)),\n        ('javascript', PluginType(str, default=None)),\n        ('arguments', PluginType(dict, default={})),\n        # ('custom_loader', PluginType(bool, default=False))\n    )\n\n\n    # ------------------------\n    # Properties\n    # Do not call them before on_config was run!\n    # ------------------------\n    @property\n    def full_config(self):\n        \"\"\"\n        The full plugin's configuration object,\n        which also includes the contents of the yaml config file.\n        \"\"\"\n        return self._full_config  \n    \n    @property\n    def mermaid_args(self):\n        \"\"\"\n        The arguments for mermaid, found in the config file.\n        \"\"\"\n        return self._mermaid_args\n    \n    @property\n    def mermaid_version(self) -> str:\n        \"\"\"\n        The version of mermaid\n        This information comes from the YAML file parameter,\n        or, if empty, from JAVASCRIPT_VERSION.\n        \"\"\"\n        version = self.config['version'] or JAVASCRIPT_VERSION\n        assert version, \"No correct version of mermaid is provided!\"\n        return version\n    \n    @property\n    def mermaid_major_version(self) -> int:\n        \"\"\"\n        Major version of mermaid (e.g. 8. 9, 10) as int\n        \"\"\"\n        major = self.mermaid_version.split('.')[0]\n        try:\n            return int(major)\n        except: \n            ValueError(\"Mermaid version provided has incorrect format\")\n\n\n    @property\n    def extra_javascript(self) -> str:\n        \"\"\"\n        Provides the mermaid.js library defined in mkdocs.yml \n        under extra_javascript.\n        \n        To be recognized, the library must have 'mermaid' in the filename.\n\n        WARNING:\n            Using extra_javascript for that purpose was the original way,\n            but is now DEPRECATED; it bypasses the new and better mechanisms\n            for selecting the javascript library.\n            It will insert the mermaid library in all pages, regardless\n            of whether a mermaid diagram is present or not.\n        \"\"\"\n        if not hasattr(self, '_extra_javascript'):\n            # As of mkdocs 1.5, extra_javascript is a list of objects; \n            # no longer a string. Call to str was used.\n            # Patched in 1.5.1, with __fspath___ method, \n            # see https://github.com/mkdocs/mkdocs/issues/3310\n            # But we keep it, to guarantee it's a string. \n            extra_javascript = map(str, self.full_config.get('extra_javascript', []))\n            for lib in extra_javascript:\n                # check that 'mermaid' is in the filename, minus the extension.\n                basename = os.path.basename(lib)\n                basename, ext = os.path.splitext(basename)\n                if  'mermaid' in basename.lower():\n                    self._extra_javascript = lib\n                    return lib\n            self._extra_javascript = None\n        return self._extra_javascript\n\n\n    @property\n    def javascript(self) -> str:\n        \"\"\"\n        Provides the url/pathanme of mermaid library according to version\n        (distinction on the default, between version < 10 and after)\n        \"\"\"\n        if not hasattr(self, '_javascript'):\n            # check if a mermaid javascript parameter exists:\n            javascript = self.config['javascript']\n            if not javascript:\n                if self.mermaid_major_version < 10:\n                    javascript = JAVASCRIPT_PRE_10 % self.mermaid_version\n                else:\n                    # newer versions\n                    javascript = JAVASCRIPT % self.mermaid_version\n                # make checks\n            if not url_exists(javascript, \n                              local_base_dir=self.full_config['docs_dir']):\n                raise FileNotFoundError(\"Cannot find Mermaid library: %s\" %\n                                        javascript)\n            self._javascript = javascript\n        return self._javascript\n    \n\n    @property\n    def activate_custom_loader(self) -> bool:\n        \"\"\"\n        Predicate: activate the custom loader for superfences?\n        The rule is to activate:\n            1. superfences extension is activated\n            2. it specifies 'fence_mermaid_custom' as\n               as format function (instead of fence_mermaid)\n        \"\"\"\n        try:\n            return self._activate_custom_loader\n        except AttributeError:\n            # first call:\n            # superfences_installed = ('pymdownx.superfences' in \n            #             self.full_config['markdown_extensions'])\n            # custom_loader = self.config['custom_loader']\n            # self._activate_custom_loader = (superfences_installed and \n            #                                 custom_loader)\n            # return self._activate_custom_loader\n            self._activate_custom_loader = False\n            superfences_installed = (SUPERFENCES_EXTENSION in \n                         self.full_config['markdown_extensions'])\n            if superfences_installed:\n                # get the config extension configs\n                mdx_configs = self.full_config['mdx_configs']\n                # get the superfences config, if exists:\n                superfence_config = mdx_configs.get(SUPERFENCES_EXTENSION)\n                if superfence_config:\n                    info(\"Found superfences config: %s\" % superfence_config)\n                    custom_fences = superfence_config.get('custom_fences', [])\n                    for fence in custom_fences:\n                        format_fn = fence.get('format')\n                        if format_fn.__name__ == CUSTOM_FENCE_FN:\n                            self._activate_custom_loader = True\n                            info(\"Found '%s' function: \" \n                                 \"activate custom loader for superfences\" \n                                 % CUSTOM_FENCE_FN)\n                            break\n                    \n            return self._activate_custom_loader\n\n    # ------------------------\n    # Event handlers\n    # ------------------------\n    def on_config(self, config):\n        \"\"\"\n        The initial configuration\n        store the configuration in properties\n        \"\"\"\n        # the full config info for the plugin is there\n        # we copy it into our own variable, to keep it accessible\n        self._full_config = config\n        # Storing the arguments to be passed to the Javascript library;\n        # they are found under `mermaid2:arguments` in the config file:\n        self._mermaid_args = self.config['arguments']\n        # Here we used the standard self.config property\n        # (this can get confusing...)\n        assert isinstance(self.mermaid_args, dict)\n        info(\"Initialization arguments:\", self.mermaid_args)\n        # info on the javascript library:\n        if self.extra_javascript:\n            info(\"Explicit mermaid javascript library from extra_javascript:\\n  \", \n                 self.extra_javascript)\n            info(\"WARNING: Using extra_javascript is now DEPRECATED; \"\n                 \"use mermaid:javascript instead!\")\n        elif self.config['javascript']:\n            info(\"Using specified javascript library: %s\" %\n                 self.config['javascript'])\n        else:\n            info(\"Using javascript library (%s):\\n  \"% \n                  self.config['version'],\n                  self.javascript)\n            \n    def on_post_page(self, output_content, config, page, **kwargs):\n        \"\"\"\n        Actions for each page:\n        generate the HTML code for all code items marked as 'mermaid'\n        \"\"\"\n        if \"mermaid\" not in output_content:\n            # Skip unecessary HTML parsing\n            return output_content\n        soup = BeautifulSoup(output_content, 'html.parser')\n        page_name = page.title\n        # first, determine if the page has diagrams:\n        if self.activate_custom_loader:\n            # the custom loader has its specific marking\n            # <pre class = 'mermaid'><code> ... </code></pre>\n            info(\"Custom loader activated\")\n            mermaids = len(soup.select(\"pre.mermaid code\"))\n        else:\n            # standard mermaid can accept two types of marking:\n            # <pre><code class = 'mermaid'> ... </code></pre>\n            # but since we want only <div> for best compatibility,\n            # it needs to be replaced\n            # NOTE: Python-Markdown changed its representation of code blocks\n            # https://python-markdown.github.io/change_log/release-3.3/\n            pre_code_tags = (soup.select(\"pre code.mermaid\") or \n                            soup.select(\"pre code.language-mermaid\"))\n            no_found = len(pre_code_tags)\n            if no_found:\n                info(\"Page '%s': found %s diagrams \"\n                     \"(with <pre><code='[language-]mermaid'>), converting to <div>...\" % \n                        (page_name, len(pre_code_tags)))\n                for tag in pre_code_tags:\n                    content = tag.text\n                    new_tag = soup.new_tag(\"div\", attrs={\"class\": \"mermaid\"})\n                    new_tag.append(content)\n                    # replace the parent:\n                    tag.parent.replace_with(new_tag)\n            # Count the diagrams <div class = 'mermaid'> ... </div>\n            mermaids = len(soup.select(\"div.mermaid\"))\n        # if yes, add the javascript snippets:\n        if mermaids:\n            info(\"Page '%s': found %s diagrams, adding scripts\" % \n                    (page_name, mermaids))\n            # insertion of the <script> tag, with the initialization arguments\n            new_tag = soup.new_tag(\"script\")\n            js_code = [] # the code lines\n            if not self.extra_javascript:\n                javascript = self.javascript.strip()\n                if not javascript.startswith(\"http\"):\n                    # it is necessary to adapt the link\n                    javascript = os.path.relpath(javascript,\n                                            os.path.dirname(page.url))\n                # if no extra library mentioned,\n                # add the <SCRIPT> tag needed for mermaid\n                if javascript.endswith('.mjs'):\n                    # <script type=\"module\">\n                    # import mermaid from ...\n                    new_tag['type'] = \"module\"\n                    js_code.append('import mermaid from \"%s\";' \n                                   % javascript)\n                else:\n                    # <script src=\"...\">\n                    # generally for self.mermaid_major_version < 10:\n                    new_tag['src'] = javascript\n                    # it's necessary to close and reopen the tag:\n                    soup.body.append(new_tag)\n                    new_tag = soup.new_tag(\"script\")\n\n            # (self.mermaid_args), as found in the config file.\n            if self.activate_custom_loader:\n                # if the superfences extension is present, use the specific loader\n                self.mermaid_args['startOnLoad'] = False\n                js_args =  pyjs.dumps(self.mermaid_args) \n                js_code.append(\"window.mermaidConfig = {default: %s};\" %\n                               js_args)\n            else:\n                # normal case\n                js_args =  pyjs.dumps(self.mermaid_args) \n                js_code.append(\"mermaid.initialize(%s);\" % js_args)\n            # merge the code lines into a string:\n            new_tag.string = \"\\n\".join(js_code)\n            soup.body.append(new_tag)\n        return str(soup)\n"
  },
  {
    "path": "mermaid2/pyjs.py",
    "content": "\"\"\"\nWriter for JavaScript objects\n(not JSON syntax)\n\nhttps://stackoverflow.com/questions/3975859/what-are-the-differences-between-json-and-javascript-object\n\nIn principle, JSON _could_ work.\nHowever, we occasionally need to use identifiers, e.g. for function names;\nthe problem is that json.dumps() only produces strings, never literals.\n\n\"\"\"\nfrom typing import Any, Callable\n\nfrom jsbeautifier import beautify\n\n\ndef dumps(obj:Any, \n          pretty:bool=True, \n          default:Callable[[Any], str]=None) -> str:\n    \"\"\"\n    Serialize an object into a JavaScript object syntax. \n\n    Arguments:\n    ---------\n    - obj: the input object\n    - pretty: indent the result\n    - default: function to be used of no serialization is pssible\n\n    Usage Note\n    ----------\n    When a string starts with a ^ character (caret),\n    the rest of the string will be considered as an identifier.\n    \n\n    Returns\n    -------\n    A string containing a Javascript object\n    \"\"\"\n    if isinstance(obj, bool):\n        if obj:\n            return \"true\"\n        else:\n            return \"false\"\n    elif isinstance(obj, (int, float)):\n        return obj\n    elif isinstance(obj, str):\n        # return strings\n        if not obj:\n            # empty\n            r = '\"\"'\n        elif obj[0] == '^':\n            # it's a literal\n            r = obj[1:]\n        else:\n            # normal string\n            r =  '\"%s\"' % obj\n        return r\n    elif isinstance(obj, dict):\n        l = []\n        for key, value in obj.items():\n            s_value = dumps(value, False, default)\n            # print(\"Key, value, s_value:\", key, value, s_value)\n            v = '%s: %s' % (key, s_value)\n            l.append(v)\n        #return indent('\\n'.join(l), level)\n        r = \"{ %s }\" % ', '.join(l)\n        if pretty:\n            r = beautify(r)\n        # r = str(level) + r\n        return r\n    elif isinstance(obj, list):\n        l = []\n        for value in obj:\n            s_value = dumps(value, False, default)\n            l.append('%s' % s_value)\n        r = \"[ %s ]\" % ',  '.join(l)\n        if pretty:\n            r = beautify(r)\n        return r\n    elif default:\n        return default(obj)\n    else:\n        raise ValueError(\"Unrecognized type %s for Javascript\" % \n                          type(obj).__name__)\n\n\nif __name__ == \"__main__\":\n    a = { \"hello\": \"world\", \n        \"barbaz\": \"^bazbar\",\n        \"foo\": {\"bar\": 2},\n        \"bar\": True}\n\n    r = dumps(a)\n    print(\"FIRST\")\n    print(\"- Python:\", a)\n    print(\"- Javascript:\")\n    print(r)\n\n    assert '\"bazbar\"' not in r\n    assert 'bazbar' in r\n\n    print(\"SECOND\")\n    import yaml\n    config_yaml = \"\"\"\n    plugins:\n        - mermaid2:\n            arguments:\n                theme: neutral\n                mermaid:\n                    callback: ^myMermaidCallbackFunction\n\n    extra_javascript:\n        - https://unpkg.com/mermaid@8.5.2/dist/mermaid.min.js\n        - js/extra.js\n    \"\"\"\n\n    config = yaml.load(config_yaml, Loader=yaml.BaseLoader)\n    print(\"- YAML:\")\n    print(config_yaml)\n    print(\"- dumps:\")\n    print(dumps(config))\n"
  },
  {
    "path": "mermaid2/util.py",
    "content": "\"\"\"\nUtilities for mermaid2 module\n\"\"\"\nimport os\nimport requests\nimport logging\nfrom packaging.version import Version\n\nimport mkdocs\n\n\n\n# -------------------\n# Logging\n# -------------------\nlog = logging.getLogger(\"mkdocs.plugins.\" + __name__)\n\nMKDOCS_LOG_VERSION = '1.2'\nif Version(mkdocs.__version__) < Version(MKDOCS_LOG_VERSION):\n    # filter doesn't do anything since that version\n    from mkdocs.utils import warning_filter\n    log.addFilter(warning_filter)\n\nMERMAID_LABEL = \"MERMAID2  -\" # plugin's signature label\n\n\nTRACE_LEVELS = {\n    'debug'   : logging.DEBUG,\n    'info'    : logging.INFO,\n    'warning' : logging.WARNING,\n    'error'   : logging.ERROR,\n    'critical': logging.CRITICAL\n}\n\ndef trace(*args, level:str='info'):\n    \"\"\"\n    General purpose print function, as trace,\n    for the mkdocs-macros framework;\n    it will appear unless --quiet option is activated.\n\n    The level is 'debug', 'info', 'warning', 'error' or 'critical'.\n    \"\"\"\n    args = [MERMAID_LABEL] + [str(arg) for arg in args]\n    msg = ' '.join(args)\n    try:\n        log.log(TRACE_LEVELS[level], msg)\n    except KeyError:\n        raise ValueError(\"Unknown level '%s' %s\" % (level, \n                                                  tuple(TRACE_LEVELS.keys())\n                                                  )\n                            )\n    return msg\n\n\n\ndef info(*args) -> str:\n    \"Write information on the console, preceded by the signature label\"\n    # args = [MERMAID_LABEL] + [str(arg) for arg in args]\n    # msg = ' '.join(args)\n    # log.info(msg)\n    return trace(*args)\n \n# -------------------\n# Paths and URLs\n# -------------------\ndef libname(lib:str) -> str:\n    \"Get the library name from a path -- not used\"\n    basename = os.path.basename(lib)\n    # remove extension three times, e.g. mermaid.min.js => mermaid\n    t = basename\n    for _ in range(3):\n        t = os.path.splitext(t)[0]\n    return t\n\n\n\ndef url_exists(url:str, local_base_dir:str='') -> bool:\n    \"Checks that a url exists\"\n    if url.startswith('http'):\n        try:\n            request = requests.get(url)\n            return request.status_code == 200\n        except requests.exceptions.RequestException as e:\n            trace(\"Cannot check URL, no Internet access? (%s):\\n\\n%s\" % (url, e),\n                  level='warning')\n            return True\n    else:\n        pathname = os.path.join(local_base_dir, url)\n        return os.path.exists(pathname)\n"
  },
  {
    "path": "pyproject.toml",
    "content": "[project]\nname = \"mkdocs-mermaid2-plugin\"\n\n# This version number is the REFERENCE for the rest of the project,\n# particularly for update_pypi.sh\nversion = \"1.2.3\"\n\ndescription = \"A MkDocs plugin for including mermaid graphs in markdown sources\"\nreadme = \"README.md\"\nlicense = { text = \"MIT\" }\nrequires-python = \">=3.8\"\nauthors = [{ name = \"Laurent Franceschetti\" }]\nkeywords = [\"markdown\", \"mermaid\", \"mkdocs\", \"python\"]\nclassifiers = [\n    \"Development Status :: 5 - Production/Stable\",\n    \"Intended Audience :: Developers\",\n    \"Intended Audience :: Information Technology\",\n    \"License :: OSI Approved :: MIT License\",\n    \"Programming Language :: Python :: 3\",\n    \"Programming Language :: Python :: 3.5\",\n    \"Programming Language :: Python :: 3.6\",\n    \"Programming Language :: Python :: 3.7\",\n    \"Programming Language :: Python :: 3.8\",\n]\ndependencies = [\n    \"beautifulsoup4>=4.6.3\",\n    \"jsbeautifier\",\n    \"mkdocs>=1.0.4\",\n    \"pymdown-extensions >= 8.0\",\n    \"requests\",\n    \"setuptools>=18.5\",\n]\n\n[tool.setuptools]\npackages = { find = { exclude = [\"*.tests\"] } }\n\n[project.optional-dependencies]\ntest = [\"mkdocs-macros-test\", \"mkdocs-material\", \"packaging\", \"requests-html\"]\n\n[project.entry-points.\"mkdocs.plugins\"]\nmermaid2 = \"mermaid2.plugin:MarkdownMermaidPlugin\"\n\n[project.urls]\nHomepage = \"https://github.com/fralau/mkdocs-mermaid2-plugin\"\n"
  },
  {
    "path": "setup.py",
    "content": "\"\"\"\nInstallation using setup.py is no longer supported.\nUse `python -m pip install .` instead.\n\"\"\"\n\nfrom setuptools import setup\n\n# Fake reference so GitHub still considers it a real package for statistics purposes.\nsetup(\n    name='mkdocs-mermaid2-plugin',\n)"
  },
  {
    "path": "test/__init__.py",
    "content": ""
  },
  {
    "path": "test/extra_javascript/docs/index.md",
    "content": "# Mermaid test (simple)\n\n## Mermaid usual\nThis is a test of Mermaid:\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n## Git Graph\nThis is a test of Git Graph: \n\n```mermaid\ngitGraph\n    commit\n    commit\n    branch develop\n    checkout develop\n    commit\n    commit\n    checkout main\n    merge develop\n    commit\n    commit\n```\n\n\n## Normal fences\nThis is usual fenced code (with no highlighting)\n\n```python\nfor page in pages:\n    page.read()\n```\n\n"
  },
  {
    "path": "test/extra_javascript/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## Correct\n\n```mermaid\ngraph TD\nA[Client] --> B[Load Balancer]\n```\n\n## Other\n\n```mermaid\ngraph TD\n  A[Client] --> B[Load Balancer]\n  B --> C[Server01]\n  B --> D[Server02]\n```\n"
  },
  {
    "path": "test/extra_javascript/mkdocs.yml",
    "content": "site_name: Mermaid test (simple, extra_javascript)\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: readthedocs # you may want to try windmill?\n\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - mermaid2\n\nextra_javascript:\n  - js/mermaid.min.js    \n\n\n\n"
  },
  {
    "path": "test/fixture.py",
    "content": "\"\"\"\nSpecific for MkDocs Projects\n\n(C) Laurent Franceschetti 2024\n\"\"\"\n\nimport re\nimport requests\n\nfrom super_collections import SuperDict\nfrom mkdocs_test import DocProject, MkDocsPage\nfrom packaging import version\n\n\nURL_PATTERN  = r'https://[^\\s\"]+'\nVERSION_PATTERN = r\"@(\\d+\\.\\d+\\.\\d+)\"\n\ndef extract_url(s:str) -> str|None:\n    \"Extract the first url from a string\"\n    match = re.search(URL_PATTERN, s)\n    if match:\n        url = match.group(0)\n        return url\n    else:\n        return None\n\n\ndef get_last_version(mermaid_url:str) -> version.Version:\n    \"Get the last version from a mermaid url\"\n    response = requests.get(mermaid_url)\n    version_no = response.url.split('@')[1].split('/')[0]\n    return version.parse(version_no)\n\n\n\ndef assert_string_contains(txt:str, items:list) -> bool:\n    \"\"\"\n    Find items in a string.\n    All items must be present (AND); however, if one item is an\n    iterable-non-string, then each subitem will an OR.\n\n    ['foo', 'bar', ('baz', 'barbaz')] -> 'foo' AND 'bar' AND ('baz' OR 'barbaz')\n    \"\"\"\n    for item in items:\n        if isinstance(item, str):\n            assert item in txt, f\"'{item}' not found in:\\n{txt}!\"\n        else:\n            assert any(subitem in txt for subitem in item), f\"None of {item} found in:\\n{txt}!\"\n\n\n\nclass Mermaid2Page(MkDocsPage):\n    \"Specific for Mermaid2\"\n\n    LIB_VERSION_CHANGE = version.parse('10')\n\n\n    @property\n    def mermaid_script(self) -> str:\n        \"\"\"\n        Get the call to the mermaid javascript library\n        (in the two versions, pre- and post- 10.0).\n\n        Performs checks and initializes the js_version property.\n\n        For testing purposes, this function contains INVARIANTS\n        (principles that should remain the same in time, and \n        across different configurations).\n        \"\"\"\n        try:\n            self._mermaid_script\n        except AttributeError:\n            mermaid_script = self.find('script', type=\"module\")\n            if mermaid_script:\n                # Version >= 10\n                script_txt = mermaid_script.string\n                FIND_TEXT = [\"import mermaid\", \"esm.min.mjs\", \n                            ('mermaid.initialize', 'mermaidConfig')]\n                assert_string_contains(script_txt, FIND_TEXT)\n                # Get the version number from the string; if not, from the Mermaid url:\n                mermaid_url = extract_url(script_txt)\n                assert mermaid_url, \"No URL found for mermaid\"\n                assert 'mermaid' in mermaid_url, f\"Error in url: {mermaid_url}\"\n                self._js_version = get_last_version(mermaid_url)\n                return script_txt\n            else:\n                # Version < 10\n                # Find the script calling the library\n                mermaid_script = self.find('script', src=lambda x: x and 'mermaid' in x)\n                assert mermaid_script, \"Couldn't find the < 10 Mermaid library!\"\n                src = mermaid_script.get('src')\n                match = re.search(VERSION_PATTERN, src)\n                #  If < 10, it demands that the script version be explicit (x.y.z)\n                if match:\n                    version_str = match.group(1)\n                    version = version.Version(version_str)\n                    self._js_version = version\n                else:\n                    raise ValueError(\"No version number with < 10 Mermaid library\")\n                return mermaid_script.string\n\n\n\n    @property\n    def js_version(self) -> version.Version:\n        \"\"\"\n        Get the version of the javascript library, while performing checks.\n        \"\"\"\n        try:\n            return self._js_version\n        except AttributeError:\n            # Initialize\n            self.mermaid_script\n            return self._js_version\n\n\nclass Mermaid2DocProject(DocProject):\n    \"Specific for MkDocs-Macros\"\n\n    @property\n    def plugin_version(self) -> version.Version|None:\n        \"Get the Mermaid2 javascript library version from the plugin\"\n        plugin = self.get_plugin('mermaid2')\n        try:\n            return version.Version(plugin.version)\n        except AttributeError:\n            pass\n\n \n    @property\n    def pages(self) -> dict[Mermaid2Page]:\n        \"List of pages\"\n        pages = super().pages\n        return {key: Mermaid2Page(value) for key, value in pages.items()}\n    \n\n "
  },
  {
    "path": "test/http_lib/docs/index.md",
    "content": "# Mermaid test (simple)\n\n## Mermaid usual\nThis is a test of Mermaid:\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n## Git Graph\nThis is a test of Git Graph: \n\n```mermaid\ngitGraph\n    commit\n    commit\n    branch develop\n    checkout develop\n    commit\n    commit\n    checkout main\n    merge develop\n    commit\n    commit\n```\n\n\n## Normal fences\nThis is usual fenced code (with no highlighting)\n\n```python\nfor page in pages:\n    page.read()\n```\n\n"
  },
  {
    "path": "test/http_lib/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## Correct\n\n```mermaid\ngraph TD\nA[Client] --> B[Load Balancer]\n```\n\n## Other\n\n```mermaid\ngraph TD\n  A[Client] --> B[Load Balancer]\n  B --> C[Server01]\n  B --> D[Server02]\n```\n"
  },
  {
    "path": "test/http_lib/mkdocs.yml",
    "content": "site_name: Mermaid test (simple, with local specified library)\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: readthedocs # you may want to try windmill?\n\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - mermaid2:\n      javascript: https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs   \n\n\n\n"
  },
  {
    "path": "test/local_lib/docs/index.md",
    "content": "# Mermaid test (simple)\n\n## Mermaid usual\nThis is a test of Mermaid:\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n## Git Graph\nThis is a test of Git Graph: \n\n```mermaid\ngitGraph\n    commit\n    commit\n    branch develop\n    checkout develop\n    commit\n    commit\n    checkout main\n    merge develop\n    commit\n    commit\n```\n\n\n## Normal fences\nThis is usual fenced code (with no highlighting)\n\n```python\nfor page in pages:\n    page.read()\n```\n\n"
  },
  {
    "path": "test/local_lib/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## Correct\n\n```mermaid\ngraph TD\nA[Client] --> B[Load Balancer]\n```\n\n## Other\n\n```mermaid\ngraph TD\n  A[Client] --> B[Load Balancer]\n  B --> C[Server01]\n  B --> D[Server02]\n```\n"
  },
  {
    "path": "test/local_lib/mkdocs.yml",
    "content": "site_name: Mermaid test (simple, with local specified library)\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: readthedocs # you may want to try windmill?\n\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - mermaid2:\n      javascript: js/mermaid.min.js    \n\n\n\n"
  },
  {
    "path": "test/material/__init__.py",
    "content": ""
  },
  {
    "path": "test/material/docs/index.md",
    "content": "# Mermaid test (Material theme)\n\n## Mermaid usual\nThis is a test of Mermaid:\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n## Git Graph\nThis is a test of Git Graph: \n\n```mermaid\ngitGraph\n    commit\n    commit\n    branch develop\n    checkout develop\n    commit\n    commit\n    checkout main\n    merge develop\n    commit\n    commit\n```\n\n\n## Normal fences\nThis is usual fenced code (with no highlighting)\n\n```python\nfor page in pages:\n    page.read()\n```\n\n"
  },
  {
    "path": "test/material/docs/js/extra.js",
    "content": "// js/extra.js\nfunction myMermaidCallbackFunction(id) {\n    var d = new Date();\n    var now = d.toLocaleTimeString();\n    console.log('Hello, this is myMermaidCallbackFunction', id, now);\n  }\n\n\n// import uml from \"./uml\"\n\n// (() => {\n//   const onReady = function(fn) {\n//     if (document.addEventListener) {\n//       document.addEventListener(\"DOMContentLoaded\", fn)\n//       document.addEventListener(\"DOMContentSwitch\", fn)\n//     } else {\n//       document.attachEvent(\"onreadystatechange\", () => {\n//         if (document.readyState === \"interactive\") {\n//           fn()\n//         }\n//       })\n//     }\n//   }\n\n//   onReady(() => {\n\n//     if (typeof mermaid !== \"undefined\") {\n//       uml(\"mermaid\")\n//     }\n//   })\n// })()"
  },
  {
    "path": "test/material/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## Correct\n\n```mermaid\ngraph TD\nA[Client] --> B[Load Balancer]\n```\n\n## Other\n\n```mermaid\ngraph TD\n  A[Client] --> B[Load Balancer]\n  B --> C[Server01]\n  B --> D[Server02]\n```\n"
  },
  {
    "path": "test/material/mkdocs.yml",
    "content": "site_name: Mermaid test (Material theme)\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\n# theme: material # you may want to try windmill?\ntheme: material\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - test\n  - mermaid2:\n      version: '10.1.0'\n\n"
  },
  {
    "path": "test/material/test_site.py",
    "content": "\"\"\"\nTesting the project\n\nMaterial theme, otherwise normal\n\n(C) Laurent Franceschetti 2024\n\"\"\"\n\n\nimport pytest\n\nfrom mkdocs_test import DocProject\n\nfrom test.fixture import Mermaid2DocProject\n\n\n\n\ndef test_pages():\n    \"Test this project\"\n\n\n\n    # ----------------\n    # First page\n    # ----------------\n    project = Mermaid2DocProject(\".\")\n    build_result = project.build(strict=False)\n    # did not fail\n    return_code = project.build_result.returncode\n    assert not return_code, f\"Build returned with {return_code} {build_result.args})\" \n\n\n\n    # ----------------\n    # First page\n    # ----------------\n    page = project.get_page('index')\n\n\n\n    # find the diagrams; they are divs\n    diagrams = page.find_all('div', class_='mermaid')\n    assert len(diagrams) == 2\n    assert diagrams[0].string.startswith('graph TD')\n    assert diagrams[1].string.startswith('gitGraph')\n\n    # use the fixture:\n    version = page.js_version\n    assert version == project.plugin_version\n    print(\"Version:\", version)\n    assert version\n    assert version > page.LIB_VERSION_CHANGE\n\n    # find the piece of Python code\n    my_code = page.find('code', class_='language-python')\n    assert 'page.read()' in my_code.string\n    \n\n    # ----------------\n    # Second page\n    # ----------------\n    page = project.get_page('second')\n\n    # find the diagrams; they are divs:\n    diagrams = page.find_all('div', class_='mermaid')\n    assert len(diagrams) == 3\n    wrong_diagram = diagrams[0].string # this one is wrong\n    assert wrong_diagram.startswith('graph FG') \n    assert \"A[Client]\" in wrong_diagram\n    # the other two are correct:\n    assert diagrams[1].string.startswith('graph TD')\n    assert diagrams[2].string.startswith('graph TD')\n\n    # check that the second page has same version as first\n    assert page.js_version == version\n    \n\n\n\n\n    "
  },
  {
    "path": "test/medium/docs/index.md",
    "content": "# Mermaid test (medium, with arguments)\n\n## Mermaid usual\nThis is a test of Mermaid:\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n> The diagram must be **green** (forest).\n> If it isn't then arguments in config.yaml are not taken\n> into consideration!\n\n## Mermaid (with HTML)\n\nThis code exploits the 'loose' security level.\n\n> If you don't see a graph here, it's broken.\n> **Hello** should be bold, and *World* should be big and italic.\n>\n> If you see the tags `<b>` or `<i>`, it's broken.\n\n```mermaid\ngraph LR\n    hello[\"<b>Hello</b>\"] --> world[\"<big><i>World</i></big>\"]\n    world --> mermaid[mermaid web site]\n    click mermaid \"https://mermaid-js.github.io/mermaid\" \"Website\"\n```\n\n> The box **mermaid web site** is clickable!\n\n\n## Normal fences\nThis is usual fenced code (with color highlighting)\n\n```python\nfor page in pages:\n    page.read()\n```\n\n## Javascript callback\nCheck **in the web console** that a message of that type is displayed:\n\n```\nHello, this is myMermaidCallbackFunction mermaid-1598273751083 14:55:51\n```\n\nThis is the result of this directive in the config file:\n\n```\nextra_javascript:\n     - js/extra.js\n```"
  },
  {
    "path": "test/medium/docs/js/extra.js",
    "content": "// js/extra.js\nfunction myMermaidCallbackFunction(id) {\n    var d = new Date();\n    var now = d.toLocaleTimeString();\n    console.log('Hello, this is myMermaidCallbackFunction', id, now);\n  }\n\n\n"
  },
  {
    "path": "test/medium/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## Correct diagram\n\n```mermaid\ngraph LR\n    hello --> world\n    world --> again\n    again --> hello\n```\n\n"
  },
  {
    "path": "test/medium/mkdocs.yml",
    "content": "site_name: Mermaid test (medium, arguments)\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: \n  name: material\n  language: en\n  font: \"Open Sans\"\n\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - mermaid2:\n      version: '10.1.0' # just because we can\n      arguments:\n        securityLevel: 'loose'\n        theme: forest # we want also that to work\n        mermaid:\n              callback: ^myMermaidCallbackFunction\n\nmarkdown_extensions:\n  - admonition\n  - pymdownx.details\n  - pymdownx.superfences:\n      # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n\nextra_javascript:\n     # Callback function\n     - js/extra.js"
  },
  {
    "path": "test/simple/__init__.py",
    "content": ""
  },
  {
    "path": "test/simple/docs/index.md",
    "content": "# Mermaid test (simple)\n\n## Mermaid usual\nThis is a test of Mermaid:\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n## Git Graph\nThis is a test of Git Graph: \n\n```mermaid\ngitGraph\n    commit\n    commit\n    branch develop\n    checkout develop\n    commit\n    commit\n    checkout main\n    merge develop\n    commit\n    commit\n```\n\n\n## Normal fences\nThis is usual fenced code (with no highlighting)\n\n```python\nfor page in pages:\n    page.read()\n```\n\n"
  },
  {
    "path": "test/simple/docs/js/extra.js",
    "content": "// js/extra.js\nfunction myMermaidCallbackFunction(id) {\n    var d = new Date();\n    var now = d.toLocaleTimeString();\n    console.log('Hello, this is myMermaidCallbackFunction', id, now);\n  }\n\n\n// import uml from \"./uml\"\n\n// (() => {\n//   const onReady = function(fn) {\n//     if (document.addEventListener) {\n//       document.addEventListener(\"DOMContentLoaded\", fn)\n//       document.addEventListener(\"DOMContentSwitch\", fn)\n//     } else {\n//       document.attachEvent(\"onreadystatechange\", () => {\n//         if (document.readyState === \"interactive\") {\n//           fn()\n//         }\n//       })\n//     }\n//   }\n\n//   onReady(() => {\n\n//     if (typeof mermaid !== \"undefined\") {\n//       uml(\"mermaid\")\n//     }\n//   })\n// })()"
  },
  {
    "path": "test/simple/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## Correct\n\n```mermaid\ngraph TD\nA[Client] --> B[Load Balancer]\n```\n\n## Other\n\n```mermaid\ngraph TD\n  A[Client] --> B[Load Balancer]\n  B --> C[Server01]\n  B --> D[Server02]\n```\n"
  },
  {
    "path": "test/simple/mkdocs.yml",
    "content": "site_name: Mermaid test (simple, default theme)\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: readthedocs # you may want to try windmill?\n\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - test\n  - mermaid2\n\n\n"
  },
  {
    "path": "test/simple/test_site.py",
    "content": "\"\"\"\nTesting the project\n\n(C) Laurent Franceschetti 2024\n\"\"\"\n\n\nimport pytest\n\nfrom mkdocs_test import DocProject\n\n\nfrom test.fixture import Mermaid2DocProject\n\n\n\n\ndef test_pages():\n    \"Test this project\"\n\n    FIND_TEXT = [\"import mermaid\", \"mermaid.initialize\", \"esm.min.mjs\"]\n\n    # ----------------\n    # First page\n    # ----------------\n    project = Mermaid2DocProject(\".\")\n    build_result = project.build(strict=False)\n    # did not fail\n    return_code = project.build_result.returncode\n    assert not return_code, f\"Build returned with {return_code} {build_result.args})\" \n\n    # ----------------\n    # First page\n    # ----------------\n    page = project.get_page('index')\n\n    # find the diagrams; they are divs\n    diagrams = page.find_all('div', class_='mermaid')\n    assert len(diagrams) == 2\n\n    # find the mermaid script\n    mermaid_script = page.find('script', type=\"module\")\n    for text in FIND_TEXT:\n        assert text in mermaid_script.string, f\"'{text}' not found!\"\n\n    # use the fixture:\n    version = page.js_version\n    print(\"Version:\", version)\n    assert version\n    assert version > page.LIB_VERSION_CHANGE\n\n    \n\n    # ----------------\n    # Second page\n    # ----------------\n    # there is intentionally an error (`foo` does not exist)\n    page = project.get_page('second')\n    diagrams = page.find_all('div', class_='mermaid')\n    assert len(diagrams) == 3\n\n    # with open('output_file.html', 'w') as f:\n    #     f.write(page.html)\n    \n\n\n\n\n    "
  },
  {
    "path": "test/simple_format/docs/index.md",
    "content": "# Mermaid test (simple, with formatting of diagrams)\n\n## Mermaid usual\nThis is a test of Mermaid:\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n## Git Graph\nThis is a test of Git Graph: \n\n```mermaid\ngitGraph\n    commit\n    commit\n    branch develop\n    checkout develop\n    commit\n    commit\n    checkout main\n    merge develop\n    commit\n    commit\n```\n\n\n## Normal fences\nThis is usual fenced code (with no highlighting)\n\n```python\nfor page in pages:\n    page.read()\n```\n\n"
  },
  {
    "path": "test/simple_format/docs/js/extra.js",
    "content": "// js/extra.js\nfunction myMermaidCallbackFunction(id) {\n    var d = new Date();\n    var now = d.toLocaleTimeString();\n    console.log('Hello, this is myMermaidCallbackFunction', id, now);\n  }\n\n\n// import uml from \"./uml\"\n\n// (() => {\n//   const onReady = function(fn) {\n//     if (document.addEventListener) {\n//       document.addEventListener(\"DOMContentLoaded\", fn)\n//       document.addEventListener(\"DOMContentSwitch\", fn)\n//     } else {\n//       document.attachEvent(\"onreadystatechange\", () => {\n//         if (document.readyState === \"interactive\") {\n//           fn()\n//         }\n//       })\n//     }\n//   }\n\n//   onReady(() => {\n\n//     if (typeof mermaid !== \"undefined\") {\n//       uml(\"mermaid\")\n//     }\n//   })\n// })()"
  },
  {
    "path": "test/simple_format/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## Correct\n\n```mermaid\ngraph TD\nA[Client] --> B[Load Balancer]\n```\n\n## Other\n\n```mermaid\ngraph TD\n  A[Client] --> B[Load Balancer]\n  B --> C[Server01]\n  B --> D[Server02]\n```\n"
  },
  {
    "path": "test/simple_format/mkdocs.yml",
    "content": "site_name: Mermaid test (simple, with formatting)\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: readthedocs # you may want to try windmill?\n\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - mermaid2:\n      version: '10.1.0'\n      arguments:\n        theme: 'dark'\n        themeVariables:\n          primaryColor: '#BB2528'\n          primaryTextColor: '#fff'\n          primaryBorderColor: '#7C0000'\n          lineColor: '#F8B229'\n          secondaryColor: '#006100'\n          tertiaryColor: '#fff'\n\n\n"
  },
  {
    "path": "test/simple_pre_10/docs/index.md",
    "content": "# Mermaid test (simple)\n\n## Mermaid usual\nThis is a test of Mermaid:\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n\n\n## Normal fences\nThis is usual fenced code (with no highlighting)\n\n```python\nfor page in pages:\n    page.read()\n```\n\n"
  },
  {
    "path": "test/simple_pre_10/docs/js/extra.js",
    "content": "// js/extra.js\nfunction myMermaidCallbackFunction(id) {\n    var d = new Date();\n    var now = d.toLocaleTimeString();\n    console.log('Hello, this is myMermaidCallbackFunction', id, now);\n  }\n\n\n// import uml from \"./uml\"\n\n// (() => {\n//   const onReady = function(fn) {\n//     if (document.addEventListener) {\n//       document.addEventListener(\"DOMContentLoaded\", fn)\n//       document.addEventListener(\"DOMContentSwitch\", fn)\n//     } else {\n//       document.attachEvent(\"onreadystatechange\", () => {\n//         if (document.readyState === \"interactive\") {\n//           fn()\n//         }\n//       })\n//     }\n//   }\n\n//   onReady(() => {\n\n//     if (typeof mermaid !== \"undefined\") {\n//       uml(\"mermaid\")\n//     }\n//   })\n// })()"
  },
  {
    "path": "test/simple_pre_10/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## Correct\n\n```mermaid\ngraph TD\nA[Client] --> B[Load Balancer]\n```\n\n## Other\n\n```mermaid\ngraph TD\n  A[Client] --> B[Load Balancer]\n  B --> C[Server01]\n  B --> D[Server02]\n```\n"
  },
  {
    "path": "test/simple_pre_10/mkdocs.yml",
    "content": "site_name: Mermaid test (simple)\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: readthedocs # you may want to try windmill?\n\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - mermaid2:\n      version: 8.8.2\n\n# extra_javascript:\n#   - https://unpkg.com/mermaid/dist/mermaid.min.js\n\n"
  },
  {
    "path": "test/superfences/__init__.py",
    "content": ""
  },
  {
    "path": "test/superfences/docs/index.md",
    "content": "# Mermaid test (SuperFences, custom loader)\n\n!!! Note\n    This is a test of the Mermaid plugin, with:\n\n    1. the [pymdownx.superfences extension](https://facelessuser.github.io/pymdown-extensions/extensions/superfences/)\n    2. Custom fences with the `mermaid2.fence_mermaid_custom()` formatter\n    3. the custom loader is specified as `extra_javascript -> js/loader.js`\n\n## Mermaid (normal)\n\n\n```mermaid\ngraph TD\n    hello --> world\n    world --> world2\n```\n\n> If you don't see a graph here, it's broken.\n\n## Mermaid (with HTML)\n\n** This doesn't work! Known bug. **\n\nThis code exploits the 'loose' security level.\n\n> If you don't see a graph here, it's broken.\n> **Hello** should be bold, and *World* should be big and italic.\n>\n> If you see the tags `<b>` or `<i>`, it's broken.\n\n```mermaid\ngraph LR\n    hello[\"<b>Hello</b>\"] --> world[\"<big><i>World</i></big>\"]\n    world --> mermaid[mermaid web site]\n    click mermaid \"https://mermaid-js.github.io/mermaid\" \"Website\"\n```\n\n## Superfence\nThis is usual superfenced code, with code highlighting.\n\n> The keyword `for` should be colored in blue.\n\n```python\nfor page in pages:\n    page.read()\n```\n\n"
  },
  {
    "path": "test/superfences/docs/js/loader.js",
    "content": "function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function () {\n  'use strict';\n\n  function _classCallCheck(instance, Constructor) {\n    if (!(instance instanceof Constructor)) {\n      throw new TypeError(\"Cannot call a class as a function\");\n    }\n  }\n\n  function _inherits(subClass, superClass) {\n    if (typeof superClass !== \"function\" && superClass !== null) {\n      throw new TypeError(\"Super expression must either be null or a function\");\n    }\n\n    subClass.prototype = Object.create(superClass && superClass.prototype, {\n      constructor: {\n        value: subClass,\n        writable: true,\n        configurable: true\n      }\n    });\n    if (superClass) _setPrototypeOf(subClass, superClass);\n  }\n\n  function _getPrototypeOf(o) {\n    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n      return o.__proto__ || Object.getPrototypeOf(o);\n    };\n    return _getPrototypeOf(o);\n  }\n\n  function _setPrototypeOf(o, p) {\n    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n      o.__proto__ = p;\n      return o;\n    };\n\n    return _setPrototypeOf(o, p);\n  }\n\n  function _isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n\n    try {\n      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n      return true;\n    } catch (e) {\n      return false;\n    }\n  }\n\n  function _construct(Parent, args, Class) {\n    if (_isNativeReflectConstruct()) {\n      _construct = Reflect.construct;\n    } else {\n      _construct = function _construct(Parent, args, Class) {\n        var a = [null];\n        a.push.apply(a, args);\n        var Constructor = Function.bind.apply(Parent, a);\n        var instance = new Constructor();\n        if (Class) _setPrototypeOf(instance, Class.prototype);\n        return instance;\n      };\n    }\n\n    return _construct.apply(null, arguments);\n  }\n\n  function _isNativeFunction(fn) {\n    return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n  }\n\n  function _wrapNativeSuper(Class) {\n    var _cache = typeof Map === \"function\" ? new Map() : undefined;\n\n    _wrapNativeSuper = function _wrapNativeSuper(Class) {\n      if (Class === null || !_isNativeFunction(Class)) return Class;\n\n      if (typeof Class !== \"function\") {\n        throw new TypeError(\"Super expression must either be null or a function\");\n      }\n\n      if (typeof _cache !== \"undefined\") {\n        if (_cache.has(Class)) return _cache.get(Class);\n\n        _cache.set(Class, Wrapper);\n      }\n\n      function Wrapper() {\n        return _construct(Class, arguments, _getPrototypeOf(this).constructor);\n      }\n\n      Wrapper.prototype = Object.create(Class.prototype, {\n        constructor: {\n          value: Wrapper,\n          enumerable: false,\n          writable: true,\n          configurable: true\n        }\n      });\n      return _setPrototypeOf(Wrapper, Class);\n    };\n\n    return _wrapNativeSuper(Class);\n  }\n\n  function _assertThisInitialized(self) {\n    if (self === void 0) {\n      throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n    }\n\n    return self;\n  }\n\n  function _possibleConstructorReturn(self, call) {\n    if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n      return call;\n    }\n\n    return _assertThisInitialized(self);\n  }\n\n  function _createSuper(Derived) {\n    var hasNativeReflectConstruct = _isNativeReflectConstruct();\n\n    return function _createSuperInternal() {\n      var Super = _getPrototypeOf(Derived),\n          result;\n\n      if (hasNativeReflectConstruct) {\n        var NewTarget = _getPrototypeOf(this).constructor;\n\n        result = Reflect.construct(Super, arguments, NewTarget);\n      } else {\n        result = Super.apply(this, arguments);\n      }\n\n      return _possibleConstructorReturn(this, result);\n    };\n  }\n  /* Notes (as of Mermaid 8.7.0):\n   * - Gantt: width is always relative to the parent, if you have a small parent, the chart will be squashed.\n   *   Can't help it.\n   * - Journey: Suffers from the same issues that Gantt does.\n   * - Pie: These charts have no default height or width. Good luck pinning them down to a reasonable size.\n   * - Git: The render portion is agnostic to the size of the parent element. But padding of the SVG is relative\n   *   to the parent element. You will never find a happy size.\n   */\n\n  /**\n   * Targets special code or div blocks and converts them to UML.\n   * @param {string} className is the name of the class to target.\n   * @return {void}\n   */\n\n\n  var uml = function uml(className) {\n    // Custom element to encapsulate Mermaid content.\n    var MermaidDiv = /*#__PURE__*/function (_HTMLElement) {\n      _inherits(MermaidDiv, _HTMLElement);\n\n      var _super = _createSuper(MermaidDiv);\n      /**\n      * Creates a special Mermaid div shadow DOM.\n      * Works around issues of shared IDs.\n      * @return {void}\n      */\n\n\n      function MermaidDiv() {\n        var _this;\n\n        _classCallCheck(this, MermaidDiv);\n\n        _this = _super.call(this); // Create the Shadow DOM and attach style\n\n        var shadow = _this.attachShadow({\n          mode: \"open\"\n        });\n\n        var style = document.createElement(\"style\");\n        style.textContent = \"\\n      :host {\\n        display: block;\\n        line-height: initial;\\n        font-size: 16px;\\n      }\\n      div.mermaid {\\n        margin: 0;\\n        overflow: visible;\\n      }\";\n        shadow.appendChild(style);\n        return _this;\n      }\n\n      return MermaidDiv;\n    }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));\n\n    if (typeof customElements.get(\"mermaid-div\") === \"undefined\") {\n      customElements.define(\"mermaid-div\", MermaidDiv);\n    }\n\n    var getFromCode = function getFromCode(parent) {\n      // Handles <pre><code> text extraction.\n      var text = \"\";\n\n      for (var j = 0; j < parent.childNodes.length; j++) {\n        var subEl = parent.childNodes[j];\n\n        if (subEl.tagName.toLowerCase() === \"code\") {\n          for (var k = 0; k < subEl.childNodes.length; k++) {\n            var child = subEl.childNodes[k];\n            var whitespace = /^\\s*$/;\n\n            if (child.nodeName === \"#text\" && !whitespace.test(child.nodeValue)) {\n              text = child.nodeValue;\n              break;\n            }\n          }\n        }\n      }\n\n      return text;\n    }; // We use this to determine if we want the dark or light theme.\n    // This is specific for our MkDocs Material environment.\n    // You should load your configs based on your own environment's needs.\n\n\n    var defaultConfig = {\n      startOnLoad: false,\n      theme: \"default\",\n      flowchart: {\n        htmlLabels: false\n      },\n      er: {\n        useMaxWidth: false\n      },\n      sequence: {\n        useMaxWidth: false,\n        noteFontWeight: \"14px\",\n        actorFontSize: \"14px\",\n        messageFontSize: \"16px\"\n      }\n    };\n    mermaid.mermaidAPI.globalReset(); // Non Material themes should just use \"default\"\n\n    var scheme = null;\n\n    try {\n      scheme = document.querySelector(\"[data-md-color-scheme]\").getAttribute(\"data-md-color-scheme\");\n    } catch (err) {\n      scheme = \"default\";\n    }\n\n    var config = typeof mermaidConfig === \"undefined\" ? defaultConfig : mermaidConfig[scheme] || mermaidConfig[\"default\"] || defaultConfig;\n    mermaid.initialize(config); // Find all of our Mermaid sources and render them.\n\n    var blocks = document.querySelectorAll(\"pre.\".concat(className, \", mermaid-div\"));\n    var surrogate = document.querySelector(\"html\");\n\n    var _loop = function _loop(i) {\n      var block = blocks[i];\n      var parentEl = block.tagName.toLowerCase() === \"mermaid-div\" ? block.shadowRoot.querySelector(\"pre.\".concat(className)) : block; // Create a temporary element with the typeset and size we desire.\n      // Insert it at the end of our parent to render the SVG.\n\n      var temp = document.createElement(\"div\");\n      temp.style.visibility = \"hidden\";\n      temp.style.display = \"display\";\n      temp.style.padding = \"0\";\n      temp.style.margin = \"0\";\n      temp.style.lineHeight = \"initial\";\n      temp.style.fontSize = \"16px\";\n      surrogate.appendChild(temp);\n\n      try {\n        mermaid.mermaidAPI.render(\"_mermaind_\".concat(i), getFromCode(parentEl), function (content) {\n          var el = document.createElement(\"div\");\n          el.className = className;\n          el.innerHTML = content; // Insert the render where we want it and remove the original text source.\n          // Mermaid will clean up the temporary element.\n\n          var shadow = document.createElement(\"mermaid-div\");\n          shadow.shadowRoot.appendChild(el);\n          block.parentNode.insertBefore(shadow, block);\n          parentEl.style.display = \"none\";\n          shadow.shadowRoot.appendChild(parentEl);\n\n          if (parentEl !== block) {\n            block.parentNode.removeChild(block);\n          }\n        }, temp);\n      } catch (err) {} // eslint-disable-line no-empty\n\n\n      if (surrogate.contains(temp)) {\n        surrogate.removeChild(temp);\n      }\n    };\n\n    for (var i = 0; i < blocks.length; i++) {\n      _loop(i);\n    }\n  };\n\n  (function () {\n    var onReady = function onReady(fn) {\n      document.addEventListener(\"DOMContentLoaded\", fn);\n      document.addEventListener(\"DOMContentSwitch\", fn);\n    };\n\n    var observer = new MutationObserver(function (mutations) {\n      mutations.forEach(function (mutation) {\n        if (mutation.type === \"attributes\") {\n          var scheme = mutation.target.getAttribute(\"data-md-color-scheme\");\n\n          if (!scheme) {\n            scheme = \"default\";\n          }\n\n          localStorage.setItem(\"data-md-color-scheme\", scheme);\n\n          if (typeof mermaid !== \"undefined\") {\n            uml(\"mermaid\");\n          }\n        }\n      });\n    });\n    onReady(function () {\n      observer.observe(document.querySelector(\"body\"), {\n        attributeFilter: [\"data-md-color-scheme\"]\n      });\n\n      if (typeof mermaid !== \"undefined\") {\n        uml(\"mermaid\");\n      }\n    });\n  })();\n})();\n"
  },
  {
    "path": "test/superfences/docs/second.md",
    "content": "# Second page\nTesting special cases\n\n## Wrong diagram\n\n```mermaid\ngraph FG\nA[Client] \n```\n\n## First Note (collapsible open)\n\n???+ note \"Collapsable but open\"\n    ```mermaid\n    graph TD\n    A[Client] --> B[Load Balancer]\n    ```\n\n## Second note (collapsed)\n\nClick on the arrow, to reveal the diagram,\n\n???- note \"Collapsed\"\n    ```mermaid\n    graph TD\n    A[Client] --> B[Load Balancer]\n    ```\n    \n    This is additional text."
  },
  {
    "path": "test/superfences/mkdocs.yml",
    "content": "site_name: Mermaid test (SuperFences) + custom loader\nsite_description: Test for mermaid\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: \n  name: material\n  language: en\n\n\nnav:\n  - Main: index.md\n  - Second: second.md\n\nplugins:\n  - search\n  - test\n  - mermaid2:\n      custom_loader: true\n      arguments:\n        securityLevel: 'loose'\n        theme: forest # we want also that to work\n\nmarkdown_extensions:\n  - admonition\n  - pymdownx.details\n  - pymdownx.superfences:\n      # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n          # format: !!python/name:pymdownx.superfences.fence_div_format"
  },
  {
    "path": "test/superfences/test_site.py",
    "content": "\"\"\"\nTesting the project\n\nSuperfences, the behavior changes\n\n(C) Laurent Franceschetti 2024\n\"\"\"\n\n\nimport pytest\n\nfrom mkdocs_test import DocProject\n\nfrom test.fixture import Mermaid2DocProject\n\n\n\n\ndef test_pages():\n    \"Test this project\"\n\n\n\n    # ----------------\n    # First page\n    # ----------------\n    project = Mermaid2DocProject(\".\")\n    build_result = project.build(strict=False)\n    # did not fail\n    return_code = project.build_result.returncode\n    assert not return_code, f\"Build returned with {return_code} {build_result.args})\" \n    project.self_check()\n\n\n\n    # ----------------\n    # First page\n    # ----------------\n    page = project.get_page('index')\n\n\n\n    # find the diagrams; they are divs\n    diagrams = page.find_all('pre', class_='mermaid')\n    assert len(diagrams) == 2\n    assert diagrams[0].code.string.startswith('graph TD')\n    print(\"Second diagram's code:\\n\", diagrams[1].code)\n    assert diagrams[1].code.decode_contents().startswith('graph LR')\n\n    # use the fixture:\n    version = page.js_version\n    print(\"Version:\", version)\n    assert version\n    assert version > page.LIB_VERSION_CHANGE\n\n    # Find the piece of color-highlighted Python code\n    # now that the HTML is highlighted, it is almost unrecognizable\n    # it contains a <code> tag that contains <span> tags.\n    my_code = page.find('div', class_='highlight')\n    assert my_code, \"Couldn't find the expected highlighted code block.\"\n    code_text = my_code.get_text() # that strips the tags\n    assert 'page.read()' in code_text\n    assert 'foo' not in code_text # negative control\n    code = my_code.find('code')\n    assert code, \"Couldn't find code element!\"\n    spans = my_code.find_all('span')\n    assert len(spans) > 5\n    \n\n    # ----------------\n    # Second page\n    # ----------------\n    page = project.get_page('second')\n\n    # find the diagrams; they are divs:\n    diagrams = page.find_all('pre', class_='mermaid')\n    assert len(diagrams) == 3\n    wrong_diagram = diagrams[0].code.string # this one is wrong\n    assert wrong_diagram.startswith('graph FG') \n    assert \"A[Client]\" in wrong_diagram\n    # the other two are correct:\n    assert diagrams[1].code.string.startswith('graph TD')\n    assert diagrams[2].code.decode_contents().startswith('graph TD')\n\n    # check that the second page has same version as first\n    assert page.js_version == version\n    \n\n\n\n\n    "
  },
  {
    "path": "update_pypi.sh",
    "content": "# -------------------------------------------------------------\n# update the package on pypi\n# 2024-10-12\n#\n# Tip: if you don't want to retype pypi's username every time\n#      define it as an environment variable (TWINE_USERNAME)\n#\n# -------------------------------------------------------------\nfunction warn {\n  GREEN='\\033[0;32m'\n  NORMAL='\\033[0m'\n  echo -e \"${GREEN}$1${NORMAL}\"\n}\n\nfunction get_value {\n  # get the value from the config file (requires the Python toml package)\n  toml get --toml-path pyproject.toml $1\n}\n\n# Clean the subdirs, for safety and to guarantee integrity\n# ./cleanup.sh\n\n# Check for changes in the files compared to the repository\nif ! git diff --quiet; then\n  warn \"Won't do it: there are changes in the repository. Please commit first!\"\n  exit 1\nfi\n\n# get the project inform\npackage_name=$(get_value project.name)\npackage_version=v$(get_value project.version) # add a 'v' in front (git convention)\n\n# update Pypi\nwarn \"Rebuilding $package_name...\"\nrm -rf build dist *.egg-info # necessary to guarantee integrity\npython3.11 -m build\nif twine upload dist/*; then\n  git push # just in case\n  warn \"... create tag $package_version, and push to remote git repo...\"\n  git tag $package_version\n  git push --tags\n  warn \"Done ($package_version)!\"\nelse\n  warn \"Failed ($package_version)!\"\n  exit 1\nfi\n\n"
  },
  {
    "path": "webdoc/docs/contribute.md",
    "content": "## Guidance\n\n1. Contributions are welcome.\n2. Before submitting an issue, consider this documentation, and particularly \n   the [troubleshooting](troubleshooting.md) section.\n3. Use the [Issues](https://github.com/fralau/mkdocs-mermaid2-plugin/issues) to signal a bug or propose a feature you believe is necessary.\n4. If this is a usage question, prefer the [discussions](https://github.com/fralau/mkdocs-mermaid2-plugin/discussions).\n5. **Before submitting a PR, always open an Issue and consider the answers.**\n6. As a rule, changes get a new version number;\nthey are first [pushed on github](https://github.com/fralau/mkdocs-mermaid2-plugin), and then [deployed on pypi](https://pypi.org/project/mkdocs-mermaid2-plugin/).\n\n## Making a distinction between the software components\nWhen assessing issues or bugs, it is important to understand which \ncomponents are involved.\n\n!!! Tip\n    The items marked with an asterisk (*) are clickable.\n\n```mermaid\n\ngraph TD\n\n    subgraph plugins\n    mkdocs-mermaid[\"Mkdocs-Mermaid2\"]\n    end\n\n    subgraph browser[\"Browser\"]\n    rendering[/\"HTML/css/Javascript engine\"\\]\n    html(HTML) ==> rendering\n    css(css) ==> rendering\n    javascript(Javascript) ==> rendering\n    end\n\n    subgraph main\n    mkdocs[\"MkDocs*\"] -- generates --> html\n    mkdocs -- generates --> javascript\n    end\n\n    mkdocs-mermaid -.plugin of.-> mkdocs\n    mkdocs -.-> Material\n    mkdocs -.extra_javascript.-> mermaid\n    Superfences -- custom fence --> mermaid\n    \n\n    \n    subgraph libraries[\"Javascript libraries\"]\n    mermaid[Mermaid.js*]  -- provides --> javascript \n    end\n    \n    subgraph extensions[\"Markdown extensions\"]\n    mkdocs -.markdown_extensions.-> Superfences\n    Superfences[\"Superfences*\"]\n    end\n    \n    subgraph themes\n    Material[Material*] -- provides --> css \n    Material --> html2(\"HTML (templates)\") --> html\n    end\n\n   \n\n    click mkdocs \"https://www.mkdocs.org/\" _blank\n    click Material \"https://squidfunk.github.io/mkdocs-material/\" _blank\n    click Superfences \"https://facelessuser.github.io/pymdown-extensions/extensions/superfences/\" _blank\n    click mermaid \"https://mermaid.js.org/intro/\" _blank\n```\n\n## Credits\n\nmkdocs-mermaid2 is a fork from\n[Pugong Liu's excellent project](https://github.com/pugong/mkdocs-mermaid-plugin), \nwhich is no longer maintained. This new plugin offers expanded documentation as\nwell as new functions.\n\nIt is also compatible with versions of the mermaid library > 10.0.\n\nThanks to all the members of the community who participated to the \nimprovement of this project with ideas and PRs."
  },
  {
    "path": "webdoc/docs/description.md",
    "content": "# Detailed description of the page production process\n\n## Steps for the preparation of an HTML page\n\nThere are three steps in the preparation of the HTML page:\n\n```mermaid\nflowchart TD\n    subgraph Page [Page production]\n    HTML(1. Setting up the HTML tags around the diagram.) --> JS(\"2. Inserting the call to Mermaid.js\")\n    JS --> Init(3. Initialization/customization)\n    end\n\n```\n\nWhen the webserver serves the statig html page,\nthe Mermaid.js library is executed in the user's browser, to render the diagram.\n\n## Conversion to HTML\n\nWhen converting the markdown into HTML, MkDocs normally inserts the\nMermaid code (text) describing the diagram \ninto segments, which will then be processed by the Mermaid.js library\n(in the user's browser):\n\n```html\n<pre class=\"mermaid\">\n<code>\n...\n</code>\n</pre>\n```\n\nTo make the HTML/css page more robust for most MkDocs themes,\nthe Mkdocs-Mermaid2 plugin systematically converts\nthose segments directly into `<div>` elements:\n\n```html\n<div class=\"mermaid\">\n...\n</div>\n```\n\n!!! Note \"Superfences extension\"\n    The principle remains the same \n    when using the [Superfences](superfences.md) extension.\n\n    That extension is **not** mandatory, except\n    when using the Material theme.\n\n## Automatic insertion of the Javascript Library\nThe plugin then inserts a call to the\n[javascript library](https://github.com/mermaid-js/mermaid).\n\nBy default, the plugin will use one of the latest versions of Mermaid.js.\n\nAs already mentioned, you can specify, in the config file, the version\nof Mermaid.js required:\n\n```yaml\n- mermaid2:\n    version: '10.1.0'\n```\n\n!!! Note\n    Mkdocs-Macros inserts the Mermaid.js library into the HTML page\n    **only** when a Mermaid diagram is detected in the markdown page.\n\n!!! Warning \"Change of distribution format\"\n    The behavior of the plugin depends of the version of Mermaid.js.\n\n    [As of version 10 of the Mermaid javascript library, the plugin uses the ESM format for distribution](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0) (see also the [changelog](https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md#1000)).\n\n    More information can be found on [ECMAScript Module](https://nodejs.org/api/esm.html#modules-ecmascript-modules)\n    (or **ESM**), but for our purposes:\n\n    1. **The main file is recognizable because it has the `.mjs` extension.**\n    2. The HTML call must have the form: `<script src=\"<URL>\", type=\"module\">`\n    3. A module in ESM format is not a single file, but a hierarchy of directories/files.\n\n    **MkDocs-Mermaid2, as of version 1.0, takes this difference into account.**\n\n=== \"ESM Library\"\n\n    > For versions of MkDocs-Mermaid2 >= 1 and versions of Mermaid2.js >= 10\n    \n    This requires a specific call from the HTML\n    page e.g.:\n\n    ``` html\n    <script src=\"https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\" type=\"module\">\n    </script>\n    ```\n\n    The plugin automatically inserts this call.\n\n=== \"All-in-one Library\"\n\n    For an earlier version of the Mermaid.js (<10),\n    the plugin continues to use the traditional version, which is an **all-in-one file**.\n    \n    Those library files are recognizable because they have the `.js` extension.\n    \n    The call in the HTML page is:\n\n    ``` html\n    <script src=\"https://unpkg.com/mermaid@8.8.2/dist/mermaid.min.js\">\n    mermaid.initialize()\n    </script>\n    ```\n\n\n    The plugin automatically inserts this call.\n\n    ** This is still a valid method.** (Even though the very first versions after 10.0.0 no longer provided\n    this file, later versions have resumed providing it.)\n\n\n\n\n## Initialization sequence\n\n### Default sequence\nTo start displaying of the diagrams, the plugin then automatically inserts \na separate call to initialize the Mermaid library:\n\n```javascript\nmermaid.initialize()\n```\n\nThe user's browser will then read this code and render it on the fly.\n\n> No svg/png images are produced during the rendering of that graph.\n\n### Additional arguments to the Mermaid engine\n\nSometimes, however, you may want to add some\nadditional initialization commands (see [full list](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults)).\n\nFor example, you could change the theme of the diagram, \nusing 'dark' instead of the default one. \nSimply add those arguments in the config file, e.g.\n\n\n```yaml\nplugins:\n- search\n- mermaid2:\n    version: '10.1.0'\n    arguments:\n        theme: 'dark'\n        themeVariables:\n        primaryColor: '#BB2528'\n        primaryTextColor: '#fff'\n        primaryBorderColor: '#7C0000'\n        lineColor: '#F8B229'\n        secondaryColor: '#006100'\n        tertiaryColor: '#fff'\n```\n\nThe plugin then automatically adds the initialization sequence:\n\n=== \"ESM modules\"\n\n    Both `import` and `mermaid.initialize()` must be in the same `<script>`\n    tag. This is the code produced by the plugin:\n\n    ```html\n    <script type=\"module\">import mermaid from \"https://unpkg.com/mermaid@10.1.0/dist/mermaid.esm.min.mjs\";\n    mermaid.initialize({\n        theme: \"dark\",\n        themeVariables: {\n            primaryColor: \"#BB2528\",\n            primaryTextColor: \"#fff\",\n            primaryBorderColor: \"#7C0000\",\n            lineColor: \"#F8B229\",\n            secondaryColor: \"#006100\",\n            tertiaryColor: \"#fff\"\n        }\n    });\n    </script>\n    ```\n=== \"Traditional modules\"\n\n    For traditional (all-in-one file) javascript modules, **two** calls to the `<script>` tag are required. This is the code produced by the plugin:\n\n    ```html\n    <script src=\"https://unpkg.com/mermaid@9.1.0/dist/mermaid.min.js\"></script>\n    <script>mermaid.initialize({\n        theme: \"dark\",\n        themeVariables: {\n            primaryColor: \"#BB2528\",\n            primaryTextColor: \"#fff\",\n            primaryBorderColor: \"#7C0000\",\n            lineColor: \"#F8B229\",\n            secondaryColor: \"#006100\",\n            tertiaryColor: \"#fff\"\n        }\n    });\n    </script>\n    ```"
  },
  {
    "path": "webdoc/docs/index.md",
    "content": "# Mkdocs-Mermaid2<br>A diagrams plugin for Mkdocs { align=center }\n\n---\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![PyPI](https://img.shields.io/pypi/v/mkdocs-mermaid2-plugin)](https://pypi.org/project/mkdocs-mermaid2-plugin/)\n![Github](https://img.shields.io/github/v/tag/fralau/mkdocs-mermaid2-plugin?label=github%20tag)\n![Downloads(PyPI)](https://img.shields.io/pypi/dm/mkdocs-mermaid2-plugin)\n\n\n## Introduction\n**Mkdocs-Mermaid2** is a plugin for the [MkDocs](https://www.mkdocs.org/) \nstatic sites generator, which allows you \nto render Mermaid diagrams inserted (as text) into the markdown pages.\n\n- [The official repository of Mermaid2 is on github.](https://github.com/fralau/mkdocs-mermaid2-plugin)\n- [Mermaid2 is available from Pypi.](https://pypi.org/project/mkdocs-mermaid2-plugin/)\n\n### What is Mermaid?\n\n[Mermaid](https://mermaid.js.org/intro/) is two things: \n\n1. A simple language for the creation of diagrams.\n2. A [javascript library](https://github.com/mermaid-js/mermaid) (Mermaid.js) \n   for displaying those diagrams in an HTML page.\n\n### General Principle\nIn order to insert a Mermaid diagram in a markdown page, \n\n1. Start a new line with a [code fence](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) (triple backticks),\n    with the codeword `mermaid`.\n2. Type the diagram using the Mermaid syntax.\n2. End with a code fence.\n\n\n\n\nFor example, a markdown page containing the following diagram (left-right graph):\n\n    ```mermaid\n    graph LR\n        hello --> world\n        world --> again\n        again --> hello\n    ```\n\nwill then be displayed in the final HTML page as:\n\n```mermaid\ngraph LR\n    hello --> world\n    world --> again\n    again --> hello\n```\n\nThe diagram will be rendered on the fly by the web browser,\nwith the use of the mermaid javascript library. \n\nThe mkdocs-mermaid2 plugin takes care of inserting the javascript library into\nthe html page and inserting the script to start it.\n\n\n!!! Note\n    You can use all the diagrams types supported by the version of the Mermaid \n    javascript library that you are using (flowchart, class, state, timeline, \n    etc.).\n\n\nHere is another example:\n\n\n    ```mermaid\n    pie title Which animals do you prefer as pets?\n        \"Dogs\" : 386\n        \"Cats\" : 85\n        \"Rabbits\" : 53\n        \"Hamsters\" : 101\n    ```\n\nIt will be rendered as (a pie chart):\n```mermaid\npie title Which animals do you prefer as pets?\n    \"Dogs\" : 386\n    \"Cats\" : 85\n    \"Rabbits\" : 53\n    \"Hamsters\" : 101\n```\n\n\n\n### How to write Mermaid diagrams\n\n* For instructions on how to make a diagram, see [the official website](https://mermaid.js.org).\n* If you are not familiar, see the [Mermaid Overview for Beginners](https://mermaid.js.org/intro/getting-started.html).\n* In case of doubt, you will want to test your diagrams in the [Mermaid Live Editor](https://mermaid.live).\n\n\n\n\n## Installation\n\n### Pre-requisites\n\n* Python 3 >= 3.6\n* [Mkdocs](https://www.mkdocs.org/user-guide/installation/)\n\n### Automatic\n\nThe most up-to-date, stable production version of mkdocs-mermaid2 is available from the [pypi repository](https://pypi.org/project/mkdocs-mermaid2-plugin/):\n\n```bash\npip install mkdocs-mermaid2-plugin\n```\n\n### Manual\nThe most up-to-date version of the package is available from [github](https://github.com/fralau/mkdocs-mermaid2-plugin).\n\nClone this repository in a local directory and install the package:\n\n```bash\npython setup.py install\n```\n\n### Installing and running the test examples\nFor running the examples the `test` directory, \nyou will also need the mkdocs-material theme. You may \n[install it directly](https://squidfunk.github.io/mkdocs-material/getting-started/),\nor use the following command to install the whole package:\n\n```bash\npip install mkdocs-mermaid2-plugin[test]\n```\n\n\n\n\n\n## Configuration\n\n### Basic configuration\nTo enable this plugin, you need to declare it in your [mkdocs config file](https://www.mkdocs.org/user-guide/configuration/)\n(`mkdocs.yml`).\n\nIn order to work, the plugin also requires the\n[mermaid](https://www.npmjs.com/package/mermaid) javascript\nlibrary (in the example below, it fetched from the last version\nfrom the [unpkg](https://unpkg.com/) repository; change the version\nno as needed).\n\n```yaml\nplugins:\n    - search\n    - mermaid2\n```\n!!! Warning \"Caution\"\n    If you declare plugins in the config file, you need to declare _all_ of them, \n    including `search` (which would otherwise have been installed by default.)\n\n\n\n\n### Specifying the version of the Mermaid library\n\nBy default, the plugin selects a version of the Mermaid javascript library\nthat is known to work (some versions work better than others).\n\nYou may specify a different version of the Mermaid library, like so:\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      version: 10.0.2\n```\n\nThe plugin will insert the correct call to the javascript library\ninside the final HTML page.\n\n\n### Specifying your own Mermaid library\n\nBy default, mkdocs-mermaid2 automatically inserts the proper calls to\nMermaid.js (according to the correct version),\nso that the diagrams are correctly interpreted.\n\nYou may, however, specify your own explicit call:\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      javascript: https://unpkg.com/mermaid@10.4.0/dist/mermaid.esm.min.mjs\n```\n\nFor more details, [see the relative page](library.md).\n\n\n\n\n### Use of the Material theme\n\n!!! Note\n    The [Material theme](https://squidfunk.github.io/mkdocs-material/), \n    developed by [squidfunk](https://github.com/squidfunk)\n    is not mandatory, but recommended.\n\n    **Mermaid diagrams will automatically adapt their colors to the theme\n    and palette.**\n\nHere are the recommended settings in the configuration file:\n\n```yaml\nmarkdown_extensions:\n  - pymdownx.superfences:\n        # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n\n```\n\nSee the [technical explanation](superfences.md/#usage-for-the-material-theme).\n\n\n### Other Themes\n\nIf you don't use the Material theme, it will be up to you to define the\ntheme and colors of the diagrams, by adding arguments to the plugin, e.g. :\n\n```yaml\nplugins:\n    - search\n    - mermaid2:\n        version: '9.4.3' # only works with version < 10\n        arguments:\n          theme: 'dark'\n          themeVariables:\n            primaryColor: '#BB2528'\n            primaryTextColor: '#fff'\n            primaryBorderColor: '#7C0000'\n            lineColor: '#F8B229'\n            secondaryColor: '#006100'\n            tertiaryColor: '#fff'\n```\nThe result would be as follows, for the diagrams above:\n\n![](img/custom_colors1.png)\n\n![](img/custom_colors2.png)\n\n!!! Tip\n    As of mkdocs-mermaid2 version 1.0.8, this works also with versions of Mermaid.js >= 10. \n    \n\n\n### Testing\n\nTo test your website with a diagram, restart the mkdocs server:\n\n    mkdocs serve\n\nIn your browser, open the webpage on the localhost\n(by default: `https://localhost:8000`)\n"
  },
  {
    "path": "webdoc/docs/library.md",
    "content": "# Using the JavaScript Mermaid Library\n\n> _From version 1.1.0 of Mkdocs-Mermaid2_\n\n## Introduction\nBy default, MkDocs-Mermaid2 automatically inserts the proper calls to\n[the Mermaid.js library, according to the correct version](description.md/#insertion-of-the-javascript-library) (all-in one file, or ESM),\nso that the diagrams are correctly interpreted.\n\nYou may, however, specify your own version, using to the\n`javascript` parameter of Mermaid2, \nin the [config file of MkDocs](https://mkdocs.readthedocs.io/en/859/user-guide/configuration/).\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      javascript: https://unpkg.com/mermaid@10.4.0/dist/mermaid.esm.min.mjs \n```\n\nThe files can be found on [unpkg](https://unpkg.com/browse/mermaid@10.4.0/) or [jsdelivr.com](https://www.jsdelivr.com/package/npm/mermaid).\n\nMkdocs-Mermaid2 will still insert the appropriate call to the JavaScript library\ninto the HTML page, according to the type of library (as all-in-one\njavascript function, or [ESM module](description.md/#automatic-insertion-of-the-javascript-library)),\nas well as the [initialization\nsequence](description.md/#initialization-sequence).\n\nTo determine which version, it will use the extension:\n\nFile extension | Type | HTML Code\n--- | -- |\n`.js` | All-in-one javascript file (function) | `<script src=\"URL>\"</script>`\n`.mjs` | ESM Module | `<script type=\"module\">import mermaid from \"URL\"</script>`\n\n\n!!! Warning\n    In that case, the `version` parameter is ignored.\n\n## Deploying Mermaid.js with the MkDocs website\n\nIn case you wish to use local version of the Mermaid.js library,\nyou can do so.\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      javascript: js/mermaid.min.js  \n```\n\nThe path is relative to the docs directory of Mkdocs. In the above example:\n\n    mkdocs.yaml\n    ├─ docs/\n    │  ├─ index.md\n    │  ├─ ...\n    │  ├─ js/\n    │  │  ├─ mermaid.min.js\n\n\nThe typical way to download the library from unpkg or cdn.jsdelivr.net,\nchanging the version number to determine the version you want\n(here: **10.2.0**):\n\n```\nhttps://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js\n```\n\n\n!!! Note\n    No explicit call to `mermaid.initialize()` is required, since it is\n    automatically inserted by the plugin.\n\n!!! Warning \"Use the .js file\"\n    The recommended way to do this, is to work with the file that contains\n    the traditional, all-in-one package that ends with `.js`.\n\n    It **may** be possible to use the full ESM module (with a reference to\n    the script that ends with `.mjs`). That would require, however, \n    downloading the whole directory structure. Using the `.mjs` file\n    on its ownlwill definitely **not** work, since there will be broken\n    links.\n\n!!! Warning \"Behavior in case of incorrect URL/no Internet access\"\n    1. An incorrect URL will cause an error that aborts MkDocs.\n    2. If the address starts with http(s) and no Internet access\n       is available at time of compile, MkDocs-Mermaid will continue and issue\n       a WARNING. That behavior is for containers that do not\n       have necessarily have Internet access at compile time\n       (however, if you want to abort\n       in that case use the strict mode: `mkdocs build --strict`.\n\n## Using `extra_javascript`\n\nMkdocs, by default, provides a standard mechanism for inserting a library into the\nHTML pages, which relies on the\n[parameter `extra_javascript` in the config file](https://mkdocs.readthedocs.io/en/859/user-guide/configuration/#extra_javascript).\n\n\n!!! Warning \"DEPRECATED in default cases\"\n    As of version 1.1.0 of Mkdocs-Mermaid2, \n    using `extra_javascript` in the config file\n    as the default solution to explictly call \n    the Mermaid javascript library is **DEPRECATED**.\n\n    Use instead the standard config of Mkdocs-Mermaid2 parameters.\n\n\n!!! Important \"Failsafe mechanism\"\n    \n    However, `extra_javascript` was not kept only\n    as a backward compatibility measure.\n\n    Its purpose is now to be a **failsafe mechanism**.\n\n    **If Mkdocs-Mermaid2 detects a name of library that contains the\n    word `mermaid`, it will deactivate its own automatic/manual \n    insertion mecanism and fall back on the standard mechanism of MkDocs.**\n\n    You can (and possibly should) use `extra_javascript` mechanism,\n    if the standard defaults\n    of MkDocs-Plugin do not match your needs.\n\n\n\n```yaml\nextra_javascript:\n    - https://unpkg.com/mermaid@8.8.2/dist/mermaid.min.js\n```\n\nIt still works for versions > 10:\n\n```yaml\nextra_javascript:\n    - https://unpkg.com/mermaid@10.4.0/dist/mermaid.min.js\n```\n\nor (if using a local version):\n\n```yaml\nextra_javascript:\n    - js/mermaid.min.js\n```\n\n(where the path is relative to the docs directory.)\n\n\n!!! Note \"Going 'full manual'?\"\n\n    If you feel that you need the flexibility of the `extra_javascript`\n    parameter,\n    you might start to weigh the pros and cons of using MkDocs-Mermaid2\n    as a plugin. \n\n    You might want to go \"full manual\", \n    **and deactivate the Mkdocs-Mermaid2 plugin.** \n    \n    Or on the contrary, if you are using the **Material theme**, you might consider\n    [using its default config for Mermaid](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)\n       (if it works better for you).\n\n\n!!! Warning \"Workaround for versions of MkDocs < 1.5\"\n\n    > _Versions of MkDocs < 1.5.0 were unable to call the ESM library._\n\n    The best solution is to call the `.js` file:\n\n    ```yaml\n    extra_javascript:\n        - https://unpkg.com/mermaid@10.2.0/dist/mermaid.min.js\n    ```\n\n   \n\n    If you **really** want to use the ESM module,\n    you could declare a local script file:\n\n    ```yaml\n    extra_javascript:\n        - js/mermaidloader.js\n    ```\n\n    (where `js` is a subdirectory of the docs directory.)\n\n    `mermaidloader.js` must contains the code for the import statement:\n\n    ```javascript\n    import mermaid from \"https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\"\n    ```\n\n\n\n\n\n\n\n\n\n\n"
  },
  {
    "path": "webdoc/docs/superfences.md",
    "content": "# Using the mermaid2 with Superfences\n\n## Introduction\n\n[Superfences](https://facelessuser.github.io/pymdown-extensions/extensions/superfences/) is a markdown extension that allows a better management\nof code blocks, particularly syntax highlighting for the different languages.\n\n!!! Warning\n    Do not use the [codehilite](https://python-markdown.github.io/extensions/code_hilite/) markdown extension, as it is deprecated in this context.\n\nHence, for a Python code block:\n\n```python\nimport foo.bar\n```\n\nIt belongs to the PyMdown extension package (see [installation instructions](https://facelessuser.github.io/pymdown-extensions/installation/)) created\nby [facelessuser](https://github.com/facelessuser).\n\n\n!!! Danger \"Caution with Superfences\"\n    The problem is that if you activate Superfences, you will deactivate\n    automatically the display of Mermaid diagrams (they will simply be\n    color-highlighted), **unless** you specify an exception for those diagrams,\n    called a **custom_fence**.\n\n\n    Hence the code:\n\n        ```mermaid\n        graph LR\n            hello --> world\n            world --> again\n            again --> hello\n        ```\n\n    Will be highlighted instead of being displayed!\n\n    See the next paragraph, for how to do that.\n\n!!! Important\n    The Superfences extension is **not** mandatory, its main purpose\n    is to allow highlighting in code blocks.\n\n    It is, however, [**recommended** for the Material theme](#usage-for-the-material-theme).\n\n\n## Specifying the Mermaid custom fence \n\nHence, to speciy the custom fence in the configuration file:\n\n```yaml\nmarkdown_extensions:\n  ...\n  - pymdownx.superfences:\n        # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid\n```\n\nEach time a code block of `mermaid` type is found in the markdown,\nthen the code will **not** be highlighted, but transformed into a diagram.\nThis is done by the `fence_mermaid` function provided by mermaid2, \nwhich encloses the Mermaid code\nin the following way (in alignment with the plugin's policy):\n\n    <div class=\"mermaid\">\n    ...\n    </div>\n\n!!! Note \"Important\"\n\n    1. For better results with the Material theme, use the `fence_mermaid_custom`\n        function (see below).\n    2. Do not use `fence_mermaid_custom` with themes other than Material, as\n        this will prevent the Mermaid diagrams from displaying.\n    3. Superfences is slightly more demanding with\n       HTML tags inside a mermaid diagram: \n       **take care to always close the HTML tags that require it**\n       (e.g. `<small>` must have its corresponding `</small>` tag).\n       Otherwise, the extension system will attempt to close those tags \n       and it will break the diagram.\n\n\n## Usage for the Material theme\nThe [Material theme](https://squidfunk.github.io/mkdocs-material/), developed by [squidfunk](https://github.com/squidfunk), is designed out of the box \n[so as to exploit the Mermaid.js library](https://squidfunk.github.io/mkdocs-material/reference/diagrams/). \n\nA beautiful feature is that the color theme will be reflected\non the mermaid diagram, with a much better rendering of the diagrams\naccording to the palette.\n\nIt will also use proper colors for Mermaid diagrams if you use a **dark mode**\nin the theme (`scheme: slate`) e.g., in the Config file:\n\n```yaml\ntheme: \n  # name: readthedocs\n  name: material\n  language: en\n  palette:\n    scheme: slate\n    primary: red\n    accent: pink\n```\n\n\n!!! Important \"Recommended usage with Material theme\"\n    This requires, however,\n\n    1. The use of the Superfences extension.\n    2. To use the default `<pre class=\"mermaid\"><code>` representation, and\n    not the `<div class=\"mermaid\">` representation used by mkdocs-mermaid2.\n    **This is achieved by using the `fence_mermaid_custom` function.**\n    \n\nHence in the configuration file:\n\n```yaml\nmarkdown_extensions:\n  ...\n  - pymdownx.superfences:\n        # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n```\n\n"
  },
  {
    "path": "webdoc/docs/tips.md",
    "content": "# Tips and Tricks\n\n## Advanced Mermaid Functions\n\n### Setting the security level to \"loose\"\n\nTo access the following functions, you need to relax mermaid's security level,\n([since version 8.2](https://mermaid-js.github.io/mermaid/#/?id=special-note-regarding-version-82)).\n\n!!! Caution \n    This requires you, of course, to take the responsibility \n    for the security of the diagram source.\n\nIf that is OK with you, you can set the argument in the configuration of the\nplugin:\n\n```yaml\n    - mermaid2:\n        arguments:\n          securityLevel: 'loose'\n```\n\n### Formatting text in diagrams\n\n> To enable this function, you need to [relax mermaid's security level to 'loose'](#setting-the-security-level-to-loose).\n\nYou may use HTML in the diagram.\n\n!!! Caution\n    This is guaranteed to work with Mermaid 8.6.4, but\n    does not work e.g. on 8.7.0.\n\n    It may not work on more recent versions.\n\n\nUse HTML formatting:\n\n    ```mermaid\n    graph LR\n        hello[\"<b>Hello</b>\"] --> world[\"<big><i>World</i></big>\"]\n        world --> mermaid[mermaid web site]\n    ```\n\n```mermaid\ngraph LR\n    hello[\"<b>Hello</b>\"] --> world[\"<big><i>World</i></big>\"]\n    world --> mermaid[mermaid web site]\n```\n\nUse this in the config file:\n```yaml\nextra_javascript:\n     - https://unpkg.com/mermaid@8.6.4/dist/mermaid.min.js\n```\n\n\n\n### Adding Hyperlinks to a Diagram \n\n> To enable this function, you need to [relax mermaid's security level to 'loose'](#setting-the-security-level-to-loose).\n\n=== \"Mermaid.js >~ 8.5.0\"\n\n    Use the **click** directive in the language (for more information,\n    see [Interaction](https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction) on the official mermaid website).\n\n        ```mermaid\n        graph LR\n            hello --> world\n            world --> mermaid[mermaid web site]\n            click mermaid \"https://mermaid-js.github.io/mermaid\" \"Website\"\n        ```\n\n\n    ```mermaid\n    graph LR\n        hello --> world\n        world --> mermaid[mermaid web site]\n        click mermaid \"https://mermaid-js.github.io/mermaid\" \"Website\"\n    ```\n\n\n\n=== \"Mermaid.js < ~ 8.5.0\"\n\n    It is possible to add hyperlinks to a  diagram, e.g.:\n\n    ```\n    box1[An <b>important</b> <a href=\"https://google.com\">link</a>] \n    ```\n\n\n## Using variables and macros in diagrams (MkDocs-Macros)\n\n\n### Variables\nWhat if your diagrams contain a repetitive string, such as the URL of a website\n[in your hyperlinks](#adding-hyperlinks-to-a-diagram)?\n\nInstead of writing:\n\n```\ngraph TD;\n    Platform-->Gaming;\n    click Gaming \"http://127.0.0.1:8000/Gaming/\";\n```\n\nYou might want to use a **variable**:\n\n```\ngraph TD;\n    Platform-->Gaming;\n    click Gaming \"{{ my_website }}/Gaming/\";\n```\n\nYou define that variable in your project's config file (`mkdocs.yml`):\n\n```yaml\nextra:\n  my_website: http://127.0.0.1:8000\n```\n\n\nIn this way, you will be able to change that value wherever it appears in the pages,\nsimply by modifying the value in the config file.\n\nTo do that, you would have to use the [Mkdocs-Macros plugin](https://mkdocs-macros-plugin.readthedocs.io/).\n\n\n\nThis requires [installing the plugin](https://mkdocs-macros-plugin.readthedocs.io/en/latest/#standard-installation), and declaring it in the config file.\n\n!!! Caution\n    Variables are **not** part of the Mermaid specification. The Macros plugin simply expands the variables in the\n    Markdown page, so that the result is a standard Mermaid diagram.\n\n\n\n\nDeclare the plugins in the config file, in that order:\n\n```yaml\nplugins:\n    - search\n    - macros\n    - mermaid2\n```\n\n!!! Tip \"Uses of variables\"\n\n    You can use an MkDocs-Macros variable to represent _any_ string that you need to repeat\n    in Mermaid diagrams, or that could change (over time, or because you have two possible configs).\n    \n    Variables can be used in any part of a page, inside or outside of Mermaid diagrams.\n\n    MkDocs-Macros and Mkdocs-Mermaid2 are two plugins that work very well together.\n\n    Read the documentation of [MkDocs-Macros](https://mkdocs-macros-plugin.readthedocs.io/), \n    to discover all its possibilities!\n\n\n### Using macros to generate Mermaid code\n\nIf you can program in Python, you could go further than that with MkDocs-Macros:\nyou could use a Python module (`main.py`) to define\n[**macros** (functions)](https://mkdocs-macros-plugin.readthedocs.io/en/latest/macros/)\nthat produce hyperlinks or pieces of diagrams from data,\nor even complete diagrams from a source file.\n\n\nFor example the macro `make_choice()` would create a full diagram from three components.\n\n```python\ndef define_env(env):\n\n\n    @env.macro\n    def make_choice(start, choice1, choice2):\n        \"\"\"\n        Generate a Mermaid decision diagram with two choices from a starting point,\n        within a fenced code block.\n        \"\"\"\n        lines = [\n            \"```mermaid\",\n            \"graph TD\",\n            f\"    {start} -->|first| {choice1}\",\n            f\"    {start} -->|second| {choice2}\",\n            \"```\"\n        ]\n        return \"\\n\".join(lines)\n\n```\n\nThen you could write, in your markdown page:\n\n```markdown\n{{ make_choice(\"Start\", \"OptionA\", \"OptionB\") }}\n```\n\nWhich would be translated into:\n\n    ```mermaid\n    graph TD\n        Start -->|first| OptionA\n        Start -->|second| OptionB\n    ```\n\nAnd then rendered by your browser as:\n\n```mermaid\ngraph TD\n    Start -->|first| OptionA\n    Start -->|second| OptionB\n```\n\n\n## Switching between light and dark mode\n\n### Auto-configure dark mode based on Host OS\n\nUsing a combination of the unquote (`^`) functionality of this plugin and the\n[prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)\nCSS media feature, one can have the plugin automatically enable dark mode.\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      arguments:\n          theme: |\n            ^(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'\n```\n\nThis works well with the `scheme: preference` option in\n[mkdocs-material](https://squidfunk.github.io/mkdocs-material/) and referenced in [their documentation](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-scheme).\n\n\n\n### Material Theme: Switching on the fly between light and dark mode\nThe Material theme for MkDocs allows [toggling between colors](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette-toggle).\nUnfortunately the Mermaid diagram will not switch out of the box from light to\ndark or vice versa. \n\n\nThis solution is similar to [switch the theme according to the OS color](#auto-configure-dark-mode-based-on-host-os), \nthough that earlier, simpler solution cannot toggle dynamically.\n\nA workable solution has been proposed by [elgalu](https://github.com/elgalu)\n(for more information see [Issue 39](https://github.com/fralau/mkdocs-mermaid2-plugin/issues/39)).\n\n\n\n**`mkdocs.yml`**\n\n(The palette is an example, where primary color, accent, icons, toggle message, etc. can be adapted to your needs.)\n\n```yaml\ntheme:\n  name: material\n  # https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette\n  palette:\n    - media: \"(prefers-color-scheme: light)\"\n      scheme: default\n      primary: indigo\n      accent: light-blue\n      toggle:\n        icon: material/toggle-switch-off-outline\n        name: Switch to dark mode\n    - media: \"(prefers-color-scheme: dark)\"\n      scheme: slate\n      primary: black\n      accent: deep orange\n      toggle:\n        icon: material/toggle-switch\n        name: Switch to light mode\n\n  # https://facelessuser.github.io/pymdown-extensions/extensions/superfences/\n  pymdownx.superfences:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid\n\nplugins:\n  - mermaid2:\n      arguments:\n        # test if its __palette_1 (dark) or __palette_2 (light)\n        # for mkdocs-material >=8.0.0\n        theme: |\n          ^(JSON.parse(__md_get(\"__palette\").index == 1)) ? 'dark' : 'light'\n#       for mkdocs-material <8.0.0\n#         ^(JSON.parse(window.localStorage.getItem(__prefix('__palette'))).index == 1) ? 'dark' : 'light'\n\nextra_javascript:\n    - extra/refresh_on_toggle_dark_light.js\n```\n\n> The caret operator (`^`) means \"unquote\". It is used here to insert Javascript code into the initialization code of `mermaid.initialize()`.\n\n\n**`docs/extra/refresh_on_toggle_dark_light.js`**\n\nTo avoid refreshing the page after switching between dark/light modes so that Mermaid diagram can be updated, two listeners\nmust be installed, which are instructed to reload the page, whenever \nthey detect a change.\n\nThat is the function of the additional script\n(`refresh_on_toggle_dark_light.js`):\n\n```javascript\nvar paletteSwitcher1 = document.getElementById(\"__palette_1\");\nvar paletteSwitcher2 = document.getElementById(\"__palette_2\");\n\npaletteSwitcher1.addEventListener(\"change\", function () {\n  location.reload();\n});\n\npaletteSwitcher2.addEventListener(\"change\", function () {\n  location.reload();\n});\n```\n"
  },
  {
    "path": "webdoc/docs/troubleshooting.md",
    "content": "\n## Important notice\n\nIf mermaid diagrams are not displayed correctly, or not displayed at all\n**read this section first**!\n\n\n## Mermaid diagram is not displayed (or displayed incorrectly)\n\n!!! Tip\n    To start with, use a simple diagram that you know is syntactically correct.\n\ne.g.\n\n    ```mermaid\n    graph TD\n    A[Client] --> B[Load Balancer]\n    B --> C[Server01]\n    B --> D[Server02]\n    ```\n\n```mermaid\ngraph TD\nA[Client] --> B[Load Balancer]\nB --> C[Server01]\nB --> D[Server02]\n```\n\n!!! Notes\n    1. Every diagram should start with a valid preamble, e.g. `graph TD`.\n    2. In case of doubt, you may want to test your diagram in the\n       [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor)\n    3. Note, however, that the Mermaid Live Editor **does not\n       support loose mode** (with HTML code in the mermaid code).\n\n### Seeing an error message at the place of the diagram?\n\nIn recent versions of the javascript library (> 8.6.0), a pretty\nerror message is displayed in case of incorrect syntax:\n\n![error message](img/error.png)\n\n!!! Note\n    In earlier versions, the library displayed nothing, which \n    could be confusing.\n\nIf you see the error message, it is at least an indication that \nthe mermaid javascript library was called.\n\n### The mermaid source code appears as-is (not read)?\nIn that case, the javascript library was probably not called.\n\n!!! Tip\n    **Examine the HTML code produced in the page and see the next questions.**\n\n\n### Using superfences, but no diagram is displayed?\n\nIf you are using the superfences extension, but you see the source\ncode, you probably forgot to declare the custom_fences, or declared the wrong\none. \nSee more explanations under [Declaring the superfences extension](superfences.md#specifying-the-mermaid-custom-fence)\n\n!!! Tip\n    **Examine the HTML code produced in the page and see the next questions.**\n\n### Is mkdocs' version up to date (>= 1.1) ?\n\n\n!!! Note\n    As an absolute minimum, you should use a version of mkdocs > 1.1. \n\n    A version >= 1.5 is recommended.\n\nTo determine the version, use `mkdocs -V`.\n\nTo update mkdocs:\n\n    pip install mkdocs --upgrade\n\nOr, if you cloned the repo:\n\n    python setup.py install\n\n\n### Is the javascript library properly called?\n\nIn order to work, the proper javascript library must called from\nthe html page (by default, the call is inserted automatically).\n\nControl the link used in the HTML page generated, e.g.:\n\n```HTML\n<script type=\"module\">import mermaid from \"https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\"</script>\n```\n\n\n\n### A certain type of diagram (e.g. mindmap, etc.) is not displayed, or the syntax is incorrectly interpreted?\n\nCheck the version of the javascript mermaid library you are using (it's indicated\nin the error message; as a last resort, check in the html page). \nYou can [change the library version if needed](index.md/#specifying-the-version-of-the-mermaid-library).\n\n\n### The arguments in the config file (color, etc.) do not work\n\nFor example, the following specification ([see description](index.md/#other-themes)) does not work:\n\n```yaml\nplugins:\n  - search\n  - mermaid2:\n      version: '10.1.0'\n      arguments:\n        theme: 'dark'\n        themeVariables:\n          primaryColor: '#BB2528'\n          primaryTextColor: '#fff'\n          primaryBorderColor: '#7C0000'\n          lineColor: '#F8B229'\n          secondaryColor: '#006100'\n          tertiaryColor: '#fff'\n```\n\nDue to the change of javascript library format as of mermaid.js **as of \nversion 10.0**, this did not work any more (but it worked for lower versions).\n\nThis was fixed in version 1.0.8 of the mkdocs-mermaid2 library\n([see github issue for a full description](https://github.com/mermaid-js/mermaid/issues/4672)).\n\n**Upgrade mkdocs-mermaid2 to the most recent version.**\n\n### What if nothing worked?\n\n1. Check the [test cases](https://github.com/fralau/mkdocs-mermaid2-plugin/tree/1ab72b5c6a5acf35cc702b7d85019b08678a52e2/test) on the github repository\n    and try to run them on your machine;\n    start with the `simple` website.\n2. Open a question on the [discussion page for the project](https://github.com/fralau/mkdocs-mermaid2-plugin/discussions).\n\n\n\n## Explicit calls of the Mermaid library with `extra_javascript`\n\n> For reference information see the [`extra_javascript` section](library.md/#using-extra_javascript)\n> in the JavaScript page. \n\n!!! Tip \"Easy Fix\"\n\n    **Upgrade Mkdocs and Mkdocs-Macros to the latest \n    version and stop using `extra_javascript`. Use the [`javascript` parameter instead](library.md)**.\n\n    Otherwise, read on.\n\n!!! Warning \"Important\"\n    If you [specify the version number in the config file](index.md/#specifying-the-version-of-the-mermaid-library),\n    then the mkdocs-mermaid2 will insert the correct calls for you.\n\n    Remember that explicit calls to the Mermaid.js\n    (through `extra_javascript` in the config file) are **optional**\n    and are considered a **hack** (failsafe) mecanism \n    for cases when the default procedure doesn't work.\n\n    **As of version 1.1 of Mkdocs-Mermaid2 the use of `extra_javascript` is DEPRECATED, as a default solution.** \n    Use the [`javascript` parameter instead](library.md).\n\n\n\n\n### Issues with versions\n**Mermaid.js**: Above version 10.0.0, [the official format for the Mermaid library is ESM](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0).\n\n**MkDocs**: Under version 1.5.0, the `extra_javascript` directive in the config\nfile (`mkdocs.yml`) does not process ESM libraries correctly.\n\n\n\n\n### Version of Mermaid.js < 10\n\nAll versions of mkdocs manage correctly the traditional call to javascript\ncode.\n\n\n``` html\n<script src=\"https://unpkg.com/mermaid@8.8.2/dist/mermaid.min.js\">\n</script>\n```\n\nYou _may_ specify the mermaid library explicitly in the config file,\nas long as it is call mermaid (independently of extension):\n\n\n\n\n```yaml\nextra_javascript:\n    - https://unpkg.com/mermaid@8.8.2/dist/mermaid.min.js\n```\n\n\n\nThis will be translated in the final HTML page as:\n\n```html\n<script src=\"https://unpkg.com/mermaid@8.8.2/dist/mermaid.min.js\">\n```\n\n\n\n\n### Version of Mermaid.js >= 10\n\nAs an ESM javascript library, Mermaid.js requires an `import` statement.\n\n  ``` html\n  <script type=\"module\">\n  import mermaid from \"https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\"\n  </script>\n  ```\n\n=== \"MkDocs < 1.5.0\"\n\n    Versions of MkDocs < 1.5.0 translate the call into `<script src=...>`\n    in all cases, and this is incorrect.\n\n    **Upgrade to MkDocs >= 1.5.0 and this should fix the problem!**\n\n    Otherwise, as a workaround you could declare a local script file:\n\n    ```yaml\n    extra_javascript:\n        - js/mermaidloader.js\n    ```\n\n    Where `js` is a subdirectory of the document directory (`docs`).\n\n    The file contains the code for the import statement:\n\n    ```javascript\n    import mermaid from \"https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\"\n    ```\n\n\n=== \"MkDocs >= 1.5.0\"\n    MkDocs correctly recognizes this case and will create the import statement.\n\n    **Treat this case normally.**\n\n    ```yaml\n    extra_javascript:\n        - https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs\n    ```\n\n\n\n\n\n\n!!! Warning\n\n    The \"traditional\", min.js packages are still unoficially available.\n    Even though mkdocs-mermaid2 will not insert them by default,\n    you can use them, at your own peril.\n\n    ```yaml\n    extra_javascript:\n        - https://cdn.jsdelivr.net/npm/mermaid@10.1.0/dist/mermaid.min.js\n    ```\n\n    For some reason, they require the `mermaid2.fence_mermaid` function\n    in order to work. It means that with the Material theme, \n    your diagrams will not inherit the theme's color\n    ([see more information on this subject](superfences.md/#usage-for-the-material-theme)).\n\n\n\n\n## Other issues\n\n### Rich text diagrams, or links are not displayed properly?\n\n1. As a first step, [set the security level to 'loose'](tips.md/#setting-the-security-level-to-loose).\n2. Make sure you use a compatible version of the javascript library\n   (8.6.4, 8.8.0, ~~8.7.0~~). In principle, the version used\n   by the plugin is compatible (see instructions to \n   [change the version](index.md/#specifying-the-version-of-the-mermaid-library)).\n\n\n### With pymdownx.details, diagrams in collapsed elements are not displayed?\n\n**This fix is experimental (it has been tested once and it worked).**\n\nIf you declared `pymdownx.details` in `config.yml` \n(under `markdown_extensions`), you may notice that a diagram will not\ndisplay correctly in that case:\n\n```markdown\n???- note \"Collapsed\"\n    ```mermaid\n    graph TD\n    A[Client] --> B[Load Balancer]\n    ```\n    This is additional text.\n```\n\nDepending on the browser, you may have a dot, or nothing, etc.\n\n\nIn that case, use the following declaration in your `markdown_extensions`:\n```yaml\n  - pymdownx.superfences:\n      # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n```\n\nThe use of this function will trigger a custom behavior, with two effects:\n\n1. It will create custom HTML tags, `<pre class='mermaid'><code>`.\n2. It will deactivate the auto-load.\n\nYou **must** then use a special custom javascript loader for the diagram,\ndeveloped by [facelessuser](https://github.com/facelessuser): \n\n1. Copy the code from\nthe [website of PyMdown Extension](https://facelessuser.github.io/pymdown-extensions/extras/mermaid/#putting-it-all-together).\n2. Paste it in a file in your project: `docs/js/loader.js`\n3. Declare this script in the `config.yml` file:\n\n```yaml\nextra_javascript:\n     - js/loader.js\n```\n\n\n## Using the mermaid2.dumps() function\n\nAs a bonus, mkdocs-mermaid2 exports the Python function `dumps()` \nwhich produces a string\ndescribing a [JavaScript object](https://javascript.info/object).\nIt can be used to help generate JavaScript code from Python\n(this is typically needed, when generating an HTML page that contains\nJavaScript).\n\nA JavaScript object is not exactly the same as a JSON object.\nThe reason why this why introduced is that sometimes one needs to produce\na key/value pair as:\n\n```JavaScript\nfoo = MyFunctioName\n```\n\nwhere the value is _not_ a string but an identifier (in this case:\na function name).\n\nHere is an example:\n\n```python\nimport mermaid2\n\nobj = { \"hello\": \"world\", \n    \"barbaz\": \"^bazbar\",\n    \"foo\": {\"bar\": 2},\n    \"bar\": True}\n\ns = mermaid2.dumps(obj)\n\n```\n\nThe purpose of the caret is to specify that the value should be\nan identifier and not a string. The result will be:\n\n```JavasScript\n{\n    hello: \"world\",\n    barbaz: bazbar,\n    foo: {\n        bar: 2\n    },\n    bar: true\n}\n```\n"
  },
  {
    "path": "webdoc/extra_requirements.txt",
    "content": "mkdocs-mermaid2-plugin\nmkdocs-material>=6.2"
  },
  {
    "path": "webdoc/mkdocs.yml",
    "content": "site_name: MkDocs-Mermaid2\nsite_description: Mkdocs plugin for mermaid diagrams\ndocs_dir: docs # indispensable or readthedocs will fail\ntheme: \n  # name: readthedocs\n  name: material\n  icon:\n    logo: fontawesome/solid/diagram-project\n  language: en\n  palette:\n    # scheme: slate\n    primary: red\n    accent: pink\nrepo_url: https://github.com/fralau/mkdocs-mermaid2-plugin\nedit_uri: edit/master/webdoc/docs/\ncopyright: © Laurent Franceschetti, 2024. This work is licensed under CC BY-SA 4.0.\nnav:\n    - How to get started: index.md\n    - Detailed description: description.md\n    - Superfences: superfences.md\n    - Using the Mermaid library: library.md\n    - Tips and tricks: tips.md\n    - troubleshooting.md\n    - How to contribute: contribute.md\n\nmarkdown_extensions:\n  - attr_list\n  - admonition\n  - footnotes\n  - pymdownx.superfences:\n        # make exceptions to highlighting of code:\n      custom_fences:\n        - name: mermaid\n          class: mermaid\n          format: !!python/name:mermaid2.fence_mermaid_custom\n  - pymdownx.tabbed:\n      alternate_style: true \n  # - attr_list\n  # - pymdownx.emoji:\n  #     emoji_index: !!python/name:materialx.emoji.twemoji\n  #     emoji_generator: !!python/name:materialx.emoji.to_svg\n\nplugins:\n  - search\n  - mermaid2:\n      arguments:\n        securitylevel: loose\n      version: '10.9.0'\n\n"
  }
]