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

#487 Set text color for flowchart nodes according to style definitions

Browse Source
This commit is contained in:
Marc Faber
2020-01-24 01:24:47 +01:00
parent 28153656d7
commit d2d4a24229
4 changed files with 46 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -524,4 +524,36 @@ describe('Flowchart', () => {
{ flowchart: { htmlLabels: false } }
);
});
it('25: Set node text color according to style when html labels are enabled', () => {
imgSnapshotTest(
`graph LR
A[red<br>text] --> B(blue<br>text)
C[/red<br/>text/] --> D{blue<br/>text}
style A color:red;
style B color:blue;
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "index.html#link-clicked" "link test"
click D testClick "click test"
`,
{ flowchart: { htmlLabels: true } }
);
});
it('26: Set node text color according to style when html labels are disabled', () => {
imgSnapshotTest(
`graph LR
A[red<br>text] --> B(blue<br>text)
C[/red<br/>text/] --> D{blue<br/>text}
style A color:red;
style B color:blue;
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "index.html#link-clicked" "link test"
click D testClick "click test"
`,
{ flowchart: { htmlLabels: false } }
);
});
});

11
dist/index.html vendored
View File

@@ -353,6 +353,17 @@ graph TB
linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px
</div>
<div class="mermaid">
graph LR
A[red<br>text] --> B(blue<br>text)
C[/red<br/>text/] --> D{blue<br/>text}
style A color:red;
style B color:blue;
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "index.html#link-clicked" "link test"
click D testClick "click test"
</div>
<hr/>

4
docs/flowchart.md
View File

@@ -509,13 +509,13 @@ It is possible to apply specific styles such as a thicker border or a different
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
```
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
```

1
src/diagrams/flowchart/flowRenderer.js
View File

@@ -87,6 +87,7 @@ export const addVertices = function(vert, g, svgId) {
vertexNode.parentNode.removeChild(vertexNode);
} else {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('style', labelStyle.replace('color:', 'fill:'));
const rows = vertexText.split(/<br\s*\/?>/gi);