Are inline themes supported?

[joshkempner]

First off, thanks for a great library. It's really easy to use, and solves the sticky problem of live updates that's so difficult when trying to call mermaid.js directly.

I have no trouble at all rendering diagrams using the library, but I'm running into a problem when trying to apply a simple inline them. I've added the following to the beginning of my diagram definition:

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#33c481',
      'primaryTextColor': '#242424',
      'secondaryColor': '#ffffff',
      'fontSize': '16px'
    }
  }
}%%

With that theme definition, I just get the full diagram definition rendered as text in the page inside a <pre> tag. When I omit it, the rest of the diagram renders as expected. The docs suggest that inline themes like that should work. What am I missing?

[MikaBerglund]

Hi Josh!

Great to hear that you find Blazorade Mermaid is helpful!

One of the key principles of Blazorade Mermaid is that anything you can do with Mermaid in the "traditional" way using pre.mermaid and calling the Mermaid JavaScript API, should also be possible with Blazorade Mermaid.

So, if you can't use custom themes as documented on the Mermaid site, then that's is a bug in Blazorade Mermaid.

Theming support is one of the future development efforts I already have filed in #1. Now you helped me to get that list prioritized. Thank you!

I'll focus on theming support in the future development efforts. Please consider following #1 to get updates on how that is progressing.

If this is OK with you, I'll close this discussion, unless you have anything else you would like to add? Of course you can also add your input to the theming support issue #1.

[joshkempner]

Playing around with it a bit more, I found some surprising, but somewhat encouraging behavior.

If I paste the theme into the "Edit" window in the sample server app, it renders as expected, including the theme. Digging into it more, I found that's it a bit more complicated than that. If I render a diagram once without the theme and then a second time with the theme, the themed diagram displays just fine. If instead I try rendering it the first time with the theme, it fails to render properly.

I was able to reproduce this in the simple server app by adding my theme definition to the flowchart diagram (in the .razor files) that is the first to be rendered. By doing that, it fails to render properly when the sample app loads. When I click one of the buttons to show a different kind of chart, that new chart renders properly. If I then click the button to go back to the flowchart, it renders properly, including the theme.

On first load (when it fails to render) the browser's dev console indicates a mermaid.js error:

No diagram type detected matching given configuration for text: 
flowchart TB

followed by the rest of the diagram definition.

In conclusion, this seems to be a genuine bug, though I can work around it for the time being.

[MikaBerglund]

Thanks for this info. I'll try to repro this problem with the steps you described above so I get to fix it.

[MikaBerglund]

I'm sorry Josh, but I can't seem to reproduce the problem you are experiencing. Could you send me a PR with the problem, if you were able to reproduce it in one of the sample apps?

[MikaBerglund]

By the way, what browser are you using? Maybe it has to do with different browsers, even though browser differences typically don't cause any problems these days.

[joshkempner]

I'll send you a PR. I reproduced it in both Edge and Chrome, both on Windows.

[MikaBerglund]

OK, so I got the problem reproduced with your PR. Thanks again. That was actually quite an interesting bug. It might even be a bug in Mermaid itself, but I haven't yet tried to reproduce the bug with standard HTML and JS.

Anyway, this is now fixed. What I did was that the JavaScript component in Blazorade Mermaid keeps track of how many times it has rendered a diagram. If no diagrams have been rendered, it adds a temporary simple diagram without inline themes to the DOM, renders that, and them removes it from the DOM. You can't even see that it is added and removed.

This workaround seems to work with all of the different cases I tried. Also the changes that you sent in your PR are fixed.

I published a new version of Blazorade Mermaid to Nuget, v1.1.1. I'll close this discussion if you confirm that your problems are also fixed now.

[joshkempner]

I've tested it out, and it works like a charm. Thanks for the quick response and fix!