diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 64c1f8d11..d0b2323d2 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -451,4 +451,15 @@ flowchart TD {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); }); + it('65: text-color from classes', () => { + imgSnapshotTest( + ` + flowchart LR + classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff + Lorem --> Ipsum --> Dolor + class Lorem,Dolor dark + `, + {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} + ); + }); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index a2f7ecb8c..4c9056711 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -882,5 +882,15 @@ graph TD {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); }); - + it('65: text-color from classes', () => { + imgSnapshotTest( + ` + flowchart LR + classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff + Lorem --> Ipsum --> Dolor + class Lorem,Dolor dark + `, + {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} + ); + }); }); diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 7c9def0a7..d1424d6b7 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -25,7 +25,7 @@

info below

-
+
%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%% erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has @@ -54,26 +54,25 @@ flowchart TD class T TestSub linkStyle 0,1 color:orange, stroke: orange;
-
- sequenceDiagram - Actor1 -) Actor2:Async - Actor1 --) Actor2:Async dotted - Actor1 ->> Actor2:Sync - Actor1 -->> Actor2:Sync dotted -
+
+%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% +flowchart LR +subgraph A + a --> b +end +subgraph B + i -->f +end +A --> B
flowchart TD C -->|fa:fa-car Car| F[fa:fa-car Car]
-
-%%{init: { 'logLevel': 0, 'theme': 'forest'} }%% -graph TD - A(Start) --> B[/Another/] - A[/Another/] --> C[End] - subgraph section - B - C - end +
+flowchart LR + classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff + Lorem --> Ipsum --> Dolor + class Lorem,Dolor dark
%%{init: {'theme': 'base' }}%% @@ -90,7 +89,7 @@ flowchart TD C <-...-> E4 C ======> E5
-
+
flowchart LR A[red text] -->|default style| B(blue text) C([red text]) -->|default style| D[[blue text]] diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index db43d1c95..a6b5a0602 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -298,13 +298,35 @@ const render = function(id, _txt, cb, container) { if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') { const classes = flowRenderer.getClasses(txt); for (const className in classes) { - userStyles += `\n.${className} > * { ${classes[className].styles.join( - ' !important; ' - )} !important; }`; - if (classes[className].textStyles) { - userStyles += `\n.${className} tspan { ${classes[className].textStyles.join( + if (cnf.htmlLabels || cnf.flowchart.htmlLabels) { + userStyles += `\n.${className} > * { ${classes[className].styles.join( ' !important; ' )} !important; }`; + userStyles += `\n.${className} span { ${classes[className].styles.join( + ' !important; ' + )} !important; }`; + } else { + // console.log('classes[className].styles', classes[className].styles, cnf.htmlLabels); + userStyles += `\n.${className} path { ${classes[className].styles.join( + ' !important; ' + )} !important; }`; + userStyles += `\n.${className} rect { ${classes[className].styles.join( + ' !important; ' + )} !important; }`; + userStyles += `\n.${className} polygon { ${classes[className].styles.join( + ' !important; ' + )} !important; }`; + userStyles += `\n.${className} ellipse { ${classes[className].styles.join( + ' !important; ' + )} !important; }`; + userStyles += `\n.${className} circle { ${classes[className].styles.join( + ' !important; ' + )} !important; }`; + if (classes[className].textStyles) { + userStyles += `\n.${className} tspan { ${classes[className].textStyles.join( + ' !important; ' + )} !important; }`; + } } } }