marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-04 04:44:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

gh-50 Allow styling of edge labels in css

Browse Source
This commit is contained in:
esther.machata
2015-12-08 17:26:17 +01:00
parent 9fb980ab2c
commit 52fcd18e6a
5 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -192,7 +192,7 @@ exports.addEdges = function (edges, g) {
var edgeText = edge.text.replace(/<br>/g, '\n'); var edgeText = edge.text.replace(/<br>/g, '\n');
if(typeof edge.style === 'undefined'){ if(typeof edge.style === 'undefined'){
if (conf.htmlLabels){ if (conf.htmlLabels){
g.setEdge(edge.start, edge.end,{labelType: 'html',style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt); g.setEdge(edge.start, edge.end,{labelType: 'html',style: style, labelpos:'c', label: '<span class="edgeLabel">'+edge.text+'</span>', arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt);
}else{ }else{
g.setEdge(edge.start, edge.end,{labelType: 'text', style: 'stroke: #333; stroke-width: 1.5px;fill:none', labelpos:'c', label: edgeText, arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt); g.setEdge(edge.start, edge.end,{labelType: 'text', style: 'stroke: #333; stroke-width: 1.5px;fill:none', labelpos:'c', label: edgeText, arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt);
} }

6
src/less/default/flow.less
View File

@@ -11,8 +11,12 @@
.edgePath .path { .edgePath .path {
stroke: @lineColor; stroke: @lineColor;
} }
.edgeLabel {
background-color: @edgeLabelBackground;
}
.cluster rect{ .cluster rect{
fill: @secondBkg !important; fill: @secondBkg !important;
rx:4 !important; rx:4 !important;

2
src/less/default/variables.less
View File

@@ -15,6 +15,8 @@
@titleColor: #333; @titleColor: #333;
@edgeLabelBackground: #e8e8e8;
/* Sequence Diagram variables */ /* Sequence Diagram variables */
@actorBorder: @border1; @actorBorder: @border1;
@actorBkg: @mainBkg; @actorBkg: @mainBkg;

6
src/less/forest/flow.less
View File

@@ -15,8 +15,12 @@ color:#333
.edgePath .path { .edgePath .path {
stroke: @lineColor; stroke: @lineColor;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.edgeLabel {
background-color: @edgeLabelBackground;
}
.cluster rect{ .cluster rect{
fill: @secondBkg !important; fill: @secondBkg !important;
rx:4 !important; rx:4 !important;

2
src/less/forest/variables.less
View File

@@ -16,6 +16,8 @@
@titleColor: #333; @titleColor: #333;
@edgeLabelBackground: #e8e8e8;
/* Sequence Diagram variables */ /* Sequence Diagram variables */
@actorBorder: @border1; @actorBorder: @border1;
@actorBkg: @mainBkg; @actorBkg: @mainBkg;