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

Wit

Browse Source
This commit is contained in:
knsv
2015-09-26 18:30:13 +02:00
parent 709ebe524d
commit dc1a6ba8b5
20 changed files with 232 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
test/examples/cssClasses.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body>
<h1>Css classes</h1>
A should have a red background with styling from class.
<div class="mermaid" id="i211">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
</div>
A should have a red background with styling from style definition.
<div class="mermaid" id="i212">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
style A fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
</div>
A should have orange background with styling from local class definition definition.
<div class="mermaid" id="i213">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class A orange;
linkStyle 0 stroke:#ff3,stroke-width:4px;
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
</div>
</body>
</html>

47
test/examples/issue_210.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad:true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:true,
htmlLabels:true
}
};
mermaid.initialize(config);
</script>
<script>
function coolAction(){
console.log('Got callback in user defined function');
}
</script>
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body>
<h1>Issue 211</h1>
A should have a red background.
<div class="mermaid" id="i211">
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
classDef test fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
class A test;
</div>
</body>
</html>