[BUG] Mermaid Frontmatter and Directive Style Customization Not Working in Version 8.14

[toumakawabe]

Describe the bug In version 8.14 of the Markdown Preview Enhanced extension, I've encountered an issue with Mermaid frontmatter and directive style customization. Specifically, nested configurations within the frontmatter and directive are not functioning as expected.

Environment

• OS: Windows 10
• VSCode: 1.93.0
• Markdown Preview Enhanced: 0.8.14

To Reproduce Steps to reproduce the behavior:

1. Create a Markdown file with a Mermaid diagram.
2. Add frontmatter or use directives to define custom styles for the diagram.
3. Notice that the nested configuration does not apply, and the diagram renders with default styling instead.

Expected behavior Both frontmatter and directive customizations, including nested configurations, should apply the specified styles correctly to the Mermaid diagram.

Markdown file test.md

Screenshots

Additional context This issue seems to have been introduced in version 8.14, as the same configuration worked correctly in previous versions. Any guidance on how to resolve this issue, or an upcoming fix, would be greatly appreciated.

Thank you for your attention to this matter!

[shd101wyy]

Hmm I just tried and it worked for me though:

The extension 0.8.14 updated the mermaid.js to the latest version 11.1.1

Maybe there is some change to the mermaid that broke yours?

[toumakawabe]

Hi,

Thank you so much for your prompt reply and for looking into this issue.

After further investigation, I realized that my initial report was incorrect. The problem is not with the nested configurations in the frontmatter but rather with the configuration for the flowchart. Specifically, it seems that settings such as curve: step are not being applied in version 0.8.14, while they were working correctly in version 0.8.13.

Here’s an example of my configuration:

\```mermaid
---
title: version 0.8.14
config:
  theme: base
  themeVariables:
    primaryColor: "#00ff00"
  flowchart:
    curve: step
---
flowchart
  1-->2
  1-->3
\```

In version 0.8.14, the curve: step setting does not seem to take effect, but when I switch back to version 0.8.13, it works as expected.

I apologize for the confusion in my initial report, and I appreciate any further insights you may have on this issue.

Thank you for your time and help!

[shd101wyy]

https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams#pako:eNo9zjEOwjAMBdCrWGZOlQIDysDCHZiypMGhkVKnckIRQtydtoJu_vpPX36jzzdCg0opyzXWRAYmkhIzg25OTXu07DOHeDeWAWpPwyw6V2iLVyfRdYnKKgBGiYOT1yWnLAYs7rQOQWuLSx1SfvreSf1h_5BpHiyVRsvrE5tYQKvUef8_Dvj5AgboOMM

This could be an upstreaming bug from the mermaid.js I just tried your code in the mermaid visual editor and it had the same problem you described.
So you may also want to ask the problem here: https://github.com/mermaid-js/mermaid/issues

[toumakawabe]

Thank you for confirming the issue and for pointing me in the right direction. I will go ahead and report this problem to the Mermaid.js team as you suggested.

Thanks again for your help and quick responses!