Allow user to disable setting of certain CSS styles

[Tor Erlend Fjelde]

Proposal

I'm currently trying to use Mermaid.js to describe some piece of code, and hence want syntax highlighting for both labels and edge labels.

One simple way to achieve this is to allow HTML labels and write raw HTML that will be styled accordingly (using, say, highlight.js).

Buuut it seems that there is just no possibility of overriding certain attributes due to arguably too strong CSS rules on defined on the side of Mermaid.js.

In particular, the following style

mermaid/packages/mermaid/src/diagrams/flowchart/styles.ts

Lines 5 to 19 in 3809732

 export interface FlowChartStyleOptions { 
   arrowheadColor: string; 
   border2: string; 
   clusterBkg: string; 
   clusterBorder: string; 
   edgeLabelBackground: string; 
   fontFamily: string; 
   lineColor: string; 
   mainBkg: string; 
   nodeBorder: string; 
   nodeTextColor: string; 
   tertiaryColor: string; 
   textColor: string; 
   titleColor: string; 
 } 

makes it so one cannot change the color of individiual spans inside a label, which is essential to make use of something like highlight.js.

Hence I was wondering if it would be possible to maybe make some attributes, e.g. color, to only be optionally set.

Thoughts? 😬

Example

I'm imagining something like

mermaid.initialize({
  theme: "base",
  themeVariables: {
    textColor: null
  }
});

would result in all rules based on textColor be left unset by Mermaid.js.

This would then allow more heavy customization on the user end.

An alternative, which is maybe simpler to implement, would be to add some configuration flag which replaces the usage of ID based ruling completely. I know this might cause significant issues on the rendering in many cases, but I think for advanced users this will be incredibly useful as they can then just take complete control of the styling of labels, etc. by using more specific rules.

Screenshots

No response