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

Docs CSS incorrect, unclear what is correct #6419

Open
Crell opened this issue Mar 26, 2025 · 0 comments
Open

Docs CSS incorrect, unclear what is correct #6419

Crell opened this issue Mar 26, 2025 · 0 comments
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@Crell
Copy link

Crell commented Mar 26, 2025

Description

According to the docs, it's possible to define the styling of a node in a Flowchart graph via CSS. The example given looks like this:

  .cssClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }

(Replacing .cssClass with the defind class in question.) In my experiments, though, that doesn't work. The built-in default styling has a higher specificity than that, so this rule is ignored.

A workaround is to throw !important on each rule, but that is pretty much always the wrong answer. I am unclear what the right answer is. It is likely just a docs update from someone who does know how this should work (which is not me).

Steps to reproduce

See the attached code. It's a fully self-contained page that uses the docs example verbatim, but the CSS class is clearly not being applied.

Screenshots

Image

Code Sample

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose' });
    </script>

    <style>
        .cssClass > rect {
            fill: #ff0000;
            stroke: #ffff00;
            stroke-width: 4px;
        }
    </style>
</head>
<body>
    <pre class="mermaid">
        flowchart LR
            A-->B[AAA<span>BBB</span>]
            B-->D
            class A cssClass
    </pre>
</body>
</html>

Setup

  • Mermaid version: 11
  • Browser and Version: Firefox 136

Suggested Solutions

No response

Additional Context

No response
@Crell Crell added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Mar 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Crell