Dep Update Mermaid 10.3

[strausmann]

Context

No response

Description

MkDocs Material use Mermaid 9.3 but 10.x is the latest release. Update required.

Related links

• Mermaid Release v10.0.1

Use Cases

The update has just been released recently and will certainly be of help to other users.

Visuals

No response

Before submitting

• I have read and followed the change request guidelines.
• I have verified that my idea is a change request and not a bug report.
• I have ensured that, to the best knowledge, my idea will benefit the entire community.
• I have included relevant links to the documentation, related issues and discussions to underline the need for my idea.

[squidfunk]

Thanks for suggesting. Mermaid.js 10+ is ESM-only, which is currently not supported by MkDocs. However, since we automatically include it, we are actually able to upgrade. If somebody wants to provide a PR, feel free!

We need to make sure all diagram types still work.

[strausmann]

What is ESM ?

[squidfunk]

ECMAScript modules. See the v10 release notes.

[squidfunk]

Okay, so I've investigated this change request, and I don't think we're ready yet to make the switch. The thing is that Material for MkDocs can't go full-ESM yet, as we need to support older browsers that don't have support for ESM. We would be removing support for those browsers. Now, if you want v10, you can still achieve the same thing via theme extension, but for now we can't make this switch. This is very likely going to change in the future, but currently not planned. Related:

• Unable to register extra javascript as type="module" mkdocs/mkdocs#2850

[samzong]

temporary:

follow this document add custom theme override: main.html, apply the content.

{% block scripts %}
  <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.2.0/+esm'
  </script>
{% endblock %}

[squidfunk]

This is being worked on over at MkDocs:

• [Feature Request] Add way to treat .mjs files as JavaScript mkdocs/mkdocs#3164
• Add support for using .mjs files in extra_javascript mkdocs/mkdocs#3232 (my PR)

[sheilnaik]

temporary:

follow this document add custom theme override: main.html, apply the content.

{% block scripts %}
  <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.2.0/+esm'
  </script>
{% endblock %}

This definitely feels like a temporary workaround. Using this block removes the search field. Adding {{ super() }} as suggested in the docs brings back the search bar, but also reverts back to the version of Mermaid (version 9.x) included with mkocs-material. It doesn't seem like there's a way to have both.

[squidfunk]

We've re-evaluated this request and progress is now tracked in #5758. If somebody is up to it, any help is appreciated. Please see the additional comments in #5758.

[glureau]

@sheilnaik did you find another workaround?

[sheilnaik]

@sheilnaik did you find another workaround?

I unfortunately did not. I'm waiting on #5758 and I'm just not using search on my site for now.