Mermaid sequence diagram box coloring overridden by material CSS

[haukened]

Context

When following the documentation for mermaid sequence diagrams, mermaid instructs the user to annotate the box color or rgb value.

Bug description

When using material for mkdocs, and you specify any color value in the mermaid diagram, the change is reflected in the CSS class of the resulting rect object in HTML but that class is overridden by the default CSS classes in material.

Related links

• Mermaid Docs on Grouping/Boxes

Reproduction

Example of correct real-time rendering on GitHub:

```mermaid
sequenceDiagram
    autonumber
    actor User
    box rgb(33,66,99) OT Network
    participant User
    participant App
    participant Keycloak
    end
    box transparent Customer Business LAN
    participant Active Directory
    participant NGFW
    end
    box transparent Azure
    participant EntraAD
    end
    Note over User,App: User must trust App Certificate
    User->>App: Initial Request
    App-->>User: Redirect to Keycloak
    User->>Keycloak: Frontend Auth request
    Activate Keycloak
    alt On-Prem IdP
        Note over Keycloak,Active Directory: Keycloak must trust AD Certificate
        Keycloak->>Active Directory: LDAPs Request
        Active Directory->>Keycloak: LDAPs Response
        Keycloak->>User: Authication Grant + Tokens
    else Azure IdP
        Note over User,EntraAD: User must trust Inspection Certificate
        Keycloak-->>User: OIDC Auth Redirect to EntraAD
        User->>NGFW: Auth Request
        Note over NGFW: HTTPS Inspection
        NGFW->>EntraAD: Proxied Auth Request
        EntraAD->>NGFW: Auth Response
        NGFW->>User: Proxied Auth Response + Tokens
    end
    User->>App: Request + Token
    App->>App: Validates Token
    App->>User: Returns secure page

sequenceDiagram
    autonumber
    actor User
    box rgb(33,66,99) OT Network
    participant User
    participant App
    participant Keycloak
    end
    box Purple Customer Business LAN
    participant Active Directory
    participant NGFW
    end
    box transparent Azure
    participant EntraAD
    end
    Note over User,App: User must trust App Certificate
    User->>App: Initial Request
    App-->>User: Redirect to Keycloak
    User->>Keycloak: Frontend Auth request
    Activate Keycloak
    alt On-Prem IdP
        Note over Keycloak,Active Directory: Keycloak must trust AD Certificate
        Keycloak->>Active Directory: LDAPs Request
        Active Directory->>Keycloak: LDAPs Response
        Keycloak->>User: Authication Grant + Tokens
    else Azure IdP
        Note over User,EntraAD: User must trust Inspection Certificate
        Keycloak-->>User: OIDC Auth Redirect to EntraAD
        User->>NGFW: Auth Request
        Note over NGFW: HTTPS Inspection
        NGFW->>EntraAD: Proxied Auth Request
        EntraAD->>NGFW: Auth Response
        NGFW->>User: Proxied Auth Response + Tokens
    end
    User->>App: Request + Token
    App->>App: Validates Token
    App->>User: Returns secure page

Steps to reproduce

1. Consider the example diagram submitted (which correctly renders on GitHub) but all boxes render the same when used with material for mkdocs (See attached screenshot)
   

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting. I already answered on a similar issue in #5034 (comment). What you're asking for is orthogonal to our implementation, as we parametrize colors with variables. Allowing the author to override colors would also not work with light/dark mode, since most colors don't work well in both modes. Thus, it is considered out of scope. You might be able to pull this off by using another Mermaid.js integration (and not our native one) like the mermaid2 plugin.

[haukened]

Thank you for the thoughtful reply. Perhaps instead, making it clear that you override purposefully up front in the mermaid section? Might reduce the noise long term.

Thanks for the great project!

[squidfunk]

We mention that colors are defined here, but we'll check if we can make it more apparent:

• Diagrams automatically use fonts and colors defined in mkdocs.yml1
• Fonts and colors can be customized with additional style sheets