Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issues using custom CSS in class diagrams #2207

Closed
datamonk3y opened this issue Jul 20, 2021 · 2 comments · Fixed by #4781
Closed

Issues using custom CSS in class diagrams #2207

datamonk3y opened this issue Jul 20, 2021 · 2 comments · Fixed by #4781
Assignees
@jgreywolf
Labels
Graph: Class Status: Awaiting PR Type: Bug / Error Something isn't working or is incorrect

Comments

@datamonk3y
Copy link

datamonk3y commented Jul 20, 2021 •
edited
Loading

Following on from a great PR #1599 by @jgreywolf and the original issue reported #1181, I've been trying to apply custom css to different elements within a class diagrams and seem to have come across a few issues I thought it was worth reporting.

The issues I've listed below are in the order I found them

The documentation states that something like the below should apply the relevant CSS to an element, but I'm seeing a syntax error

    <head>
        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
        <script>mermaid.initialize({startOnLoad:true});</script>
        <style>
            .customCss{
                fill: #d9138a;
                stroke:#000000;
                stroke-width: 2px;
            }
            </style>
        </head>
    <body>
    <div class="mermaid">
        classDiagram
            class test1
            cssClass "test1" customCss;
    </div>
  </body>
</html>

This seems to be due to a typo in the documentation which states a semi-colon is needed when assigning the CSS
cssClass "nodeId1" cssClass;

Removing the semi-colon fixes this (I spotted an example in the tests without a semi colon)
cssClass "nodeId1" cssClass

After this it worked, well, kind of... I was able to apply custom CSS, but only to CSS properties that aren't already being used, so existing properties weren't being overridden

To get round this I added !important to the properties I want to override, but this obviously isn't ideal.

The class name is being correctly assigned to the node, but because the default styles are being assigned via a <style> tag inside the <svg> tag, and the default style selectors use a css id, it’s very difficult to override the default styles (hence the need for !important)

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
        <script>mermaid.initialize({startOnLoad:true});</script>
        <style>
            .customCss{
                fill: #d9138a !important;
                stroke:#000000 !important;
                stroke-width: 2px !important;
            }
            </style>
        </head>
    <body>
    <div class="mermaid">
        classDiagram
            class test1
            cssClass "test1" customCss
    </div>
  </body>
</html>

I'm not sure if this issue would be picked up in the tests, I could be wrong but from what I can see the tests check to see if a SVG is generated, not whether they contain the correct colours?

  • Device: Macbook Pro
  • OS: macOS Big Sur 11.4
  • Browser Chrome
  • Version 91.0.4472.114 (Official Build) (x86_64)

I'm no js expert, but thought I'd post this in the hope someone might pick it up, or maybe this will help someone work around a problem instead of spending a couple of hours figuring out why their diagrams aren't working as expected
@datamonk3y datamonk3y added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Jul 20, 2021
@nyxgear
Copy link

nyxgear commented Sep 13, 2021

Hi! I found the same issue too.

I tried to replicate the CSS styling for classDiagram as in documentation on styling but I got the error "Syntax error in graph mermaid version 8.12.1".

Here is a JSFiddle to showcase the error. It takes the exact example (classDiagram) from the documentation: https://jsfiddle.net/4k8n5bd3/ .

@jgreywolf jgreywolf self-assigned this Apr 6, 2023
@jgreywolf
Copy link
Contributor

Updated documentation to fix the ";" issue in #4781

@jgreywolf jgreywolf linked a pull request Aug 28, 2023 that will close this issue
Update classDiagram.md #4781
Merged
@jgreywolf jgreywolf added Status: Awaiting PR and removed Status: Triage Needs to be verified, categorized, etc labels Aug 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jgreywolf jgreywolf

Labels
Graph: Class Status: Awaiting PR Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update classDiagram.md mermaid-js/mermaid
4 participants
@jgreywolf @nyxgear @datamonk3y @Yokozuna59