marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 22:39:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1955 Different selector in order to make it possible to change the text color for flowcharts vis classDef statements

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-03-23 19:22:10 +01:00
parent a5cc75c1f7
commit 87458657f8
4 changed files with 44 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -450,5 +450,15 @@ flowchart TD
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} {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'}
);
}); });
}); });

11
cypress/integration/rendering/flowchart.spec.js
View File

@@ -881,6 +881,17 @@ graph TD
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} {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'}
);
}); });
}); });

35
cypress/platform/knsv.html
View File

@@ -25,7 +25,7 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid" style="width: 100%; height: 400px;"> <div class="mermaid2" style="width: 100%; height: 400px;">
%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%% %%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -54,26 +54,25 @@ flowchart TD
class T TestSub class T TestSub
linkStyle 0,1 color:orange, stroke: orange; linkStyle 0,1 color:orange, stroke: orange;
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
sequenceDiagram %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
Actor1 -) Actor2:Async flowchart LR
Actor1 --) Actor2:Async dotted subgraph A
Actor1 ->> Actor2:Sync a --> b
Actor1 -->> Actor2:Sync dotted end
</div> subgraph B
i -->f
end
A --> B </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart TD flowchart TD
C -->|fa:fa-car Car| F[fa:fa-car Car] C -->|fa:fa-car Car| F[fa:fa-car Car]
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 0, 'theme': 'forest'} }%% flowchart LR
graph TD classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
A(Start) --> B[/Another/] Lorem --> Ipsum --> Dolor
A[/Another/] --> C[End] class Lorem,Dolor dark
subgraph section
B
C
end
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: {'theme': 'base' }}%% %%{init: {'theme': 'base' }}%%
@@ -90,7 +89,7 @@ flowchart TD
C <-...-> E4 C <-...-> E4
C ======> E5 C ======> E5
</div> </div>
<div class="mermaid" style="width: 50%; height: 21%;"> <div class="mermaid2" style="width: 50%; height: 21%;">
flowchart LR flowchart LR
A[red text] -->|default style| B(blue text) A[red text] -->|default style| B(blue text)
C([red text]) -->|default style| D[[blue text]] C([red text]) -->|default style| D[[blue text]]

6
src/mermaidAPI.js
View File

@@ -301,6 +301,12 @@ const render = function(id, _txt, cb, container) {
userStyles += `\n.${className} > * { ${classes[className].styles.join( userStyles += `\n.${className} > * { ${classes[className].styles.join(
' !important; ' ' !important; '
)} !important; }`; )} !important; }`;
userStyles += `\n.${className} span { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} tspan { ${classes[className].styles.join(
' !important; '
)} !important; }`;
if (classes[className].textStyles) { if (classes[className].textStyles) {
userStyles += `\n.${className} tspan { ${classes[className].textStyles.join( userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
' !important; ' ' !important; '