mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #101 from bjowes/text-labels 

Text based labels, new shape
This commit is contained in:
Knut Sveidqvist 2015-01-14 08:13:49 +01:00
parent 0b2afb8e71 595fe1fd32
commit 1033a74970
16 changed files with 845 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
dist/mermaid.full.js vendored
View File

File diff suppressed because one or more lines are too long

6
dist/mermaid.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

193
dist/mermaid.slim.js vendored
View File

File diff suppressed because one or more lines are too long

6
dist/mermaid.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

12
gulpfile.js
View File

@ -71,11 +71,23 @@ gulp.task('less', function () {
var browserify = require('gulp-browserify');
//var slim_ext_libs = [
// 'dagre-d3',
// 'd3'
//];
// Basic usage
gulp.task('slimDist', function() {
// Single entry point to browserify
return gulp.src('src/main.js')
.pipe(browserify())
/*.pipe(browserify({standalone: 'mermaid'}))
.on('prebundle', function(bundle) {
// Keep these external for the slim version.
slim_ext_libs.forEach(function(lib) {
bundle.external(lib);
});
})*/
.pipe(rename('mermaid.slim.js'))
.pipe(gulp.dest('./dist/'))
.pipe(uglify())

15
src/diagrams/flowchart/dagre-d3.js Normal file
View File

@ -0,0 +1,15 @@
/* global window */
var dagreD3;
if (require) {
try {
dagreD3 = require("dagre-d3");
} catch (e) {}
}
if (!dagreD3) {
dagreD3 = window.dagreD3;
}
module.exports = dagreD3;

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

@ -4,7 +4,7 @@
var graph = require('./graphDb');
var flow = require('./parser/flow');
var dot = require('./parser/dot');
var dagreD3 = require('dagre-d3');
var dagreD3 = require('./dagre-d3');
/**
* Function that adds the vertices found in the graph definition to the graph to be rendered.
* @param vert Object containing the vertices.
@ -60,7 +60,13 @@ exports.addVertices = function (vert, g) {
verticeText = vertice.text;
}
console.log(verticeText);
var labelTypeStr = '';
if(global.mermaid.htmlLabels) {
labelTypeStr = 'html';
} else {
verticeText = verticeText.replace(/<br>/g, "\n");
labelTypeStr = 'text';
}
var radious = 0;
var _shape = '';
@ -80,6 +86,9 @@ exports.addVertices = function (vert, g) {
case 'odd':
_shape = 'rect_left_inv_arrow';
break;
case 'odd_right':
_shape = 'rect_left_inv_arrow';
break;
case 'circle':
_shape = 'circle';
break;
@ -87,7 +96,7 @@ exports.addVertices = function (vert, g) {
_shape = 'rect';
}
// Add the node
g.setNode(vertice.id, {labelType: "html",shape:_shape, label: verticeText, rx: radious, ry: radious, class: classStr, style: style, id:vertice.id});
g.setNode(vertice.id, {labelType: labelTypeStr, shape:_shape, label: verticeText, rx: radious, ry: radious, class: classStr, style: style, id:vertice.id});
});
};
@ -147,12 +156,16 @@ exports.addEdges = function (edges, g) {
}
// Edge with text
else {
var edgeText = edge.text.replace(/<br>/g, "\n");
if(typeof edge.style === 'undefined'){
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);
}else{
if (global.mermaid.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);
}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);
}
}else{
g.setEdge(edge.start, edge.end, {
labelType: "html",style: style, arrowheadStyle: "fill: #333", label: edge.text, arrowhead: aHead
labelType: "text", style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
},cnt);
}
}
@ -183,10 +196,12 @@ exports.getClasses = function (text, isDot) {
var classes = graph.getClasses();
// Add default class if undefined
if(typeof classes.default === 'undefined') {
if(typeof(classes.default) === 'undefined') {
classes.default = {id:'default'};
classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
}
classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
}
return classes;
};
@ -312,6 +327,28 @@ exports.draw = function (text, id,isDot) {
return shapeSvg;
};
// Add custom shape for box with inverted arrow on right side
render.shapes().rect_right_inv_arrow = function (parent, bbox, node) {
var w = bbox.width,
h = bbox.height,
points = [
{x: 0, y: 0},
{x: w+h/2, y: 0},
{x: w, y: -h/2},
{x: w+h/2, y: -h},
{x: 0, y: -h},
];
var shapeSvg = parent.insert("polygon", ":first-child")
.attr("points", points.map(function (d) {
return d.x + "," + d.y;
}).join(" "))
.attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point);
};
return shapeSvg;
};
// Add our custom arrow - an empty arrowhead
render.arrows().none = function normal(parent, id, edge, type) {
var marker = parent.append("marker")

4
src/diagrams/flowchart/parser/flow.jison
View File

@ -243,6 +243,10 @@ vertex: alphaNum SQS text SQE
{$$ = $1;yy.addVertex($1,$3,'odd');}
| alphaNum TAGEND text SQE SPACE
{$$ = $1;yy.addVertex($1,$3,'odd');}
/* | alphaNum SQS text TAGSTART
{$$ = $1;yy.addVertex($1,$3,'odd_right');}
| alphaNum SQS text TAGSTART SPACE
{$$ = $1;yy.addVertex($1,$3,'odd_right');} */
| alphaNum
{$$ = $1;yy.addVertex($1);}
| alphaNum SPACE

9
src/main.js
View File

@ -94,6 +94,7 @@ var equals = function (val, variable){
global.mermaid = {
startOnLoad:true,
htmlLabels:true,
init:function(){
init();
},
@ -109,6 +110,12 @@ exports.contentLoaded = function(){
// Check state of start config mermaid namespece
//console.log('global.mermaid.startOnLoad',global.mermaid.startOnLoad);
//console.log('mermaid_config',mermaid_config);
if (typeof mermaid_config !== 'undefined') {
if (equals(false, mermaid_config.htmlLabels)) {
global.mermaid.htmlLabels = false;
}
}
if(global.mermaid.startOnLoad) {
// For backwards compatability reasons also check mermaid_config variable
@ -128,7 +135,7 @@ exports.contentLoaded = function(){
if(typeof document !== 'undefined'){
/**
* Wait for coument loaded before starting the execution
* Wait for document loaded before starting the execution
*/
document.addEventListener('DOMContentLoaded', function(){
exports.contentLoaded();

16
src/utils.js
View File

@ -58,10 +58,19 @@ module.exports.cloneCssStyles = function(svg, classes){
for (var className in classes) {
if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
if (className === 'default') {
defaultStyles = '.node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
if (classes.default.styles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
}
if (classes.default.nodeLabelStyles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n';
}
if (classes.default.edgeLabelStyles instanceof Array) {
defaultStyles += "#" + svg.id.trim() + ' .edgeLabel text ' + ' { ' + classes[className].edgeLabelStyles.join("; ") + '; }\n';
}
} else {
embeddedStyles += '.' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
//embeddedStyles += svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
if (classes[className].styles instanceof Array) {
embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
}
}
}
}
@ -71,6 +80,7 @@ module.exports.cloneCssStyles = function(svg, classes){
s.setAttribute('type', 'text/css');
s.setAttribute('title', 'mermaid-svg-internal-css');
s.innerHTML = "/* <![CDATA[ */\n";
// Make this CSS local to this SVG
if (defaultStyles !== "") {
s.innerHTML += defaultStyles;
}

58
src/utils.spec.js
View File

@ -85,12 +85,14 @@ describe('when cloning CSS ',function() {
}
function addStyleToDocument() {
var styleSheetCount = document.styleSheets.length;
var s = document.createElement('style');
s.innerHTML = '.node { stroke:#eee; }\n.node-square { stroke:#bbb; }\n';
document.body.appendChild(s);
}
function addSecondStyleToDocument() {
var styleSheetCount = document.styleSheets.length;
var s = document.createElement('style');
s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#beb; }\n';
document.body.appendChild(s);
@ -98,6 +100,7 @@ describe('when cloning CSS ',function() {
function generateSVG() {
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-01');
var g1 = document.createElement('g');
g1.setAttribute('class', 'node');
svg.appendChild(g1);
@ -107,29 +110,22 @@ describe('when cloning CSS ',function() {
return svg;
}
function addSVGwithStyleToDocument() {
var svg = document.createElement('svg');
var s = document.createElement('style');
s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#bfb; }\n';
svg.appendChild(s);
document.body.appendChild(svg);
}
function addMermaidSVGwithStyleToDocument(id) {
function addMermaidSVGwithStyleToDocument() {
var styleSheetCount = document.styleSheets.length;
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-03');
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.setAttribute('title', 'mermaid-svg-internal-css');
s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#bfe; }\n';
s.innerHTML = '#mermaid-05 .node2 { stroke:#eee; }\n.node-square { stroke:#bfe; }\n';
svg.appendChild(s);
document.body.appendChild(svg);
// The Mock-browser seems not to support stylesheets title attribute, so we add it manually
var sheets = document.styleSheets;
sheets[id].title = "mermaid-svg-internal-css";
document.styleSheets[styleSheetCount].title = 'mermaid-svg-internal-css';
}
it('should handle an empty set of classes', function () {
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-01');
utils.cloneCssStyles(svg, {});
// Should not create style element if not needed
@ -138,16 +134,19 @@ describe('when cloning CSS ',function() {
it('should handle a default class', function () {
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-01');
utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } });
expect(stylesToArray(svg)).toEqual([ '.node { stroke:#fff; stroke-width:1.5px; }']);
expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }' ]);
// Also verify the elements around the styling
expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n.node { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>');
expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>');
});
it('should handle stylesheet in document with no classes in SVG', function () {
var svg = document.createElement('svg');
addStyleToDocument();
svg.setAttribute('id', 'mermaid-01');
addStyleToDocument('mermaid');
utils.cloneCssStyles(svg, {});
// Should not create style element if not needed
expect(svg.innerHTML).toBe('');
@ -168,43 +167,34 @@ describe('when cloning CSS ',function() {
expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
});
it('should handle multiple stylesheets + styles in other SVG', function () {
it('should handle multiple stylesheets + ignore styles in other mermaid SVG', function () {
var svg = generateSVG();
addStyleToDocument();
addSecondStyleToDocument();
addSVGwithStyleToDocument();
addMermaidSVGwithStyleToDocument();
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }', '.node-square { stroke: #bfb; }']);
});
it('should handle multiple stylesheets + ignore styles in mermaid SVG', function () {
var svg = generateSVG();
addStyleToDocument();
addSecondStyleToDocument();
addSVGwithStyleToDocument();
addMermaidSVGwithStyleToDocument(3);
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }', '.node-square { stroke: #bfb; }']);
expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
});
it('should handle a default class together with stylesheet in document with classes in SVG', function () {
var svg = generateSVG();
addStyleToDocument();
utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } });
expect(stylesToArray(svg)).toEqual([ '.node { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
});
xit('should handle a default class together with stylesheet in document and classDefs', function () {
it('should handle a default class together with stylesheet in document and classDefs', function () {
var svg = generateSVG();
addStyleToDocument();
utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] },
"node-square": { "styles": ["fill:#eee", "stroke:#aaa"] },
"node-circle": { "styles": ["fill:#444", "stroke:#111"] } });
expect(stylesToArray(svg)).toEqual([ '.node { stroke:#fff; stroke-width:1.5px; }',
expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }',
'.node { stroke: #eee; }',
'.node-square { stroke: #bbb; }',
'.node-square { fill:#eee; stroke:#aaa; }',
'.node-circle { fill:#444; stroke:#111; }' ]);
'#mermaid-01 .node-square { fill:#eee; stroke:#aaa; }',
'#mermaid-01 .node-circle { fill:#444; stroke:#111; }'
]);
});
});

5
test/web.html
View File

@ -5,6 +5,7 @@
<script src="../dist/mermaid.full.js"></script>
<scrpt src="https://cdn.rawgit.com/knsv/mermaid/0.3.0/dist/mermaid.full.min.js"></scrpt>
<scrpt src="https://cdn.rawgit.com/knsv/mermaid/0.3.2/dist/mermaid.full.min.js"></scrpt>
<script>
var mermaid_config = {
startOnLoad:true
@ -34,9 +35,9 @@
A-->D;
B-->D;
A-->|Link text|B
classDef default fill:#9f6,stroke:#333,stroke-width:2px;
classDef default fill:#696,stroke:#333,stroke-width:2px;
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
class green B;
class B green;
</div>
<h1>Sub graphs</h1>
<div class="mermaid">graph LR

145
test/web_style.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.full.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
htmlLabels:false
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
&lt;style&gt;
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</div>
</body>
</html>

6
test/web_style.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

147
test/web_style_dagre.html Normal file
View File

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/d3.min.js"></script>
<script src="../../bjowes-dagre-d3/build/dagre-d3.js"></script>
<script src="../dist/mermaid.slim.js"></script> -
<!-- <script src="../dist/mermaid.full.min.js"></script> -->
<script>
var mermaid_config = {
startOnLoad:true
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
&lt;style&gt;
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</div>
</body>
</html>

145
test/web_style_html_label.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.full.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
labelStyle:'hmtl'
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
</head>
<body>
<h1>Style</h1>
Styling is applied in the following order:
<ol>
<li>Node default style (see wiki)</li>
<li>CSS on the page</li>
<li>Class definitions inside the graph definition</li>
<li>Inline styling inside the graph definition</li>
</ol>
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
<h3>CSS in the page head:</h3>
<pre>
&lt;style&gt;
.node-square {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
&lt;/style&gt;
</pre>
<h3>Graph definition</h3>
<pre>
graph TD;
noc[No class&lt;br />using default];
cyr2((Class node-cyr-undefined&lt;br /&gt;is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square&lt;br /&gt;defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq--&gt;ncss;
cyr[Class node-cyr&lt;br /&gt;defined by classDef];
od2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef];
ncdef[classDef style];
od2-->ncdef;
cyr-->ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr&lt;br /&gt;defined by classDef&lt;br /&gt;and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2&gt;Class node-odd-override&lt;br /&gt;defined in page CSS&lt;br /&gt;and defined by classDef&lt;br /&gt;and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in&lt;br /&gt;graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</pre>
<div class="mermaid">
graph TD;
noc[No class<br />using default];
cyr2((Class node-cyr-undefined<br />is undefined, using default));
class cyr2 node-cyr-undefined;
ndef[Default style];
noc-->ndef;
cyr2-->ndef;
sq[Class node-square<br />defined in page CSS];
class sq node-square;
ncss[Page CSS style];
sq-->ncss;
cyr[Class node-cyr<br />defined by classDef];
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
ncdef[classDef style];
od2-->|Simple edge label|ncdef;
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
e((Inline style in<br />graph definition));
style e fill:#FF0000;
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
</div>
</body>
</html>