Mermaid config issue

[skonik]

Hello.

I would like to render my mermaid diagram with the config like on the picture below:

However mkdocs-materials ignores config section

Is it possible somehow to enable config parsing?

[alexvoss]

Try removing the config: element like so:

---
flowchart:
  curve: stepAfter
---
flowchart TD
 A[GE Solution] --- recEmpty[ ]:::empty
 B[GA Solution] --- recEmpty
 recEmpty --> C[Stir 10 mins at 500 r/min]
A> classDef empty width:0p

[skonik]

I would like to make edges straight(it's circular now).
So I found some examples on stackoverflow how to do it.

This is what I would like to get:

---
config:
  flowchart: 
    curve: stepAfter
  
---
flowchart TD
   A[GE Solution] --- recEmpty[ ]:::empty
   B[GA Solution] --- recEmpty
   recEmpty --> C[Stir 10 mins at 500 r/min]
   classDef empty width:0px

But using the same code inside mkdocs doesn't make any changes. It's still circular.
I was wondering if someone knows what's the issue with the config. It works perfectly fine if I use mermaid online editor

Anyway thanks for your participation

[alexvoss]

Right, I was misled by the funny effect that the arrows do not meet up in your version.

[alexvoss]

I have pasted the output back into the Mermaid editor and it renders fine - after replacing the > HTML entity with the >character. So, it does not seem to be the case that the Mermaid code gets mangled. I also turned on the debugger in the browser and checked what was being passed into Mermaid for rendering:

---\nconfig: \n  flowchart:\n    curve: stepAfter\n---\nflowchart TD\n A[GE Solution] --- recEmpty[ ]:::empty\n B[GA Solution] --- recEmpty\n recEmpty --> C[Stir 10 mins at 500 r/min]\n classDef empty width:0px

That looks fine to me. Also bumped up the Mermaid version locally to 10.9.0 and it made no difference. Does not seem to be a version issue. Maybe I got something wrong somewhere or did not manage to look in the right places.

[kamilkrzyskow]

Works for me @skonik with newest theme version 9.5.15 with mermaid 10.7. The frontmatter config is available since version 10.4
Maybe you're using some older version of the material theme, which uses an older mermaid version?

mermaid-config-frontmatter.zip

EDIT:
Also thanks for letting me know about the frontmatter config, we opted out of mermaid because of those curvy lines which were unconfigurable, good to know there is a way to control it from Markdown now.

[alexvoss]

Bloody hell. Your version works for me as well. I have just removed what I had by reusing it for another issue and deleting the crucial bits. Argh. I am using 9.5.15, public version.

[kamilkrzyskow]

Looking at the changelog, before version https://squidfunk.github.io/mkdocs-material/changelog/#9.4.13 Material used mermaid 9.4, so there was no config frontmatter support.

This could truly be a groundbreaking discovery for me, as it might influence the need for shadow root opening:

• Mermaid with Icons #6778 (reply in thread)

---

also turned on the debugger in the browser and checked what was being passed into Mermaid for rendering:

Before running the example, I also checked the minified code with the debugger on the Live Mermaid site and it also uses the mermaid.render(id, content) function.
The theme's implementation uses the textContent and doesn't sanitize anything, so I just assuemed it will work and run the example from the comment ✌️

[skonik]

Wow. Yeah, I've been using older version of mkdocs-material. Thank you!

[alexvoss]

So, I don't have any experience with the whole shadow DOM stuff but if I understand correctly, it would be possible to access the contents from JavaScript if it was open. The code would need to use element.shadowRoot explicitly to get access, while none of the document.getElement and document.querySelector methods would select content in the shadow DOM. Neither would CSS selectors. Previous discussions seem to suggest that closed was used out of an abundance of caution. So, is the question how we might ascertain whether opening it up would cause any issues? I don't see where they would be coming from but then I am neither a web developer nor a chap with much imagination ;o)