Styles not rendered from Mermaid

[finalspy]

Preflight Checklist

• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Describe the bug

If I take simple examples from Mermaid documentation, and try to import them into drawIO they should be rendered with style.

For instance from Mermaid documentation :

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

Is not properly rendered in DrawIO, all style is lost ...

To Reproduce Steps to reproduce the behavior:

1. Go to 'Arrange > Insert > Advanced > Mermaid'
2. Copy past the mermaid code with colors, classes definition etc.
3. Click 'Insert' button
4. See diagram is rendered but style is lost.

Expected behavior

I expect to see the diagram with the styles applied properly if present in the import.

Screenshots This screenshots shows the mermaid documentation for nodes styling.

This other screenshot shows the rendering inside draw.io

draw.io version (In the Help->About menu of the draw.io editor):

• draw.io version 21.8.0

Desktop (please complete the following information):

• OS: Ubuntu 1804
• Browser Chrome
• Browser Version 116.0.5845.140 (Official Build) (64-bit)

I tested the problem in incognito/private mode with all browser extensions switched off, write "yes" below:

• yes

[davidjgraph]

Please test with 24.4.11.

[mandreato]

Hi there, I've just created a new empty diagram on https://app.diagrams.net (today it's 24.5.5).

Arrange > Insert > Advanced > Mermaid

Then pasted the sample from Mermaid documentation: flowchart LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

Formatting is visible only when I insert as image but not when I insert as diagram. Would it be possible to have formatting in the diagram as well?

[asdkant]

Can confirm this is still happening in 24.6.4 and in the website, I inserted a mermaidJS diagram with this init line (note the mention of a theme) and it's rendered in shades of gray (it works fine in GitLab and the vscode extension bierner.markdown-mermaid, so I'm assuming it's correct)

%%{init: { 'logLevel': 'debug', 'theme': 'default', 'gitGraph': {'showBranches': true,'showCommitLabel': false}} }%%

[PedroLuizPBR]

Hi, I used the lasted version web V24.7.7 and doesn`t work properly ....

    Exist two issues  --  if would like to use colors into the nodes  . . 
                                   if would like like format the text into the nodes

##################################### draw.io not accept Styles

################################### draw.io not format text into nodes .... example

Thanks !

[ristllin]

Hey, I’m still experiencing this issue and would really appreciate it if this functionality could work as expected. Is there any plan to address it in the near future? Thanks so much!

[ifly-leonard]

Hi, experiencing the same. The charts when loaded on draw.io don't have colors. Is there a workaround for this? Thanks!