marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 09:20:03 +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>

24
test/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="nav.js"></script>
</head>
<body style="height:1000px" ng-app="navApp">
<div ng-controller="NavAppCtrl">
<ul style="width:4%;float:left;" >
<li ng-repeat="item in items"><a ng-click="go(item.url)">{{item.name}}</a></li>
</ul>
<iframe src="{{frameUrl}}" style="float:right;width:90%;height:1000px;"></iframe>
</div>
</body>
</html>

19
test/nav.js Normal file
View File

@@ -0,0 +1,19 @@
/**
* Created by knut on 2015-09-15.
*/
var navApp = angular.module('navApp', []);
navApp.controller('NavAppCtrl', function ($scope) {
$scope.items = [
{'name': 'Ett',
'url': 'cases/ett.html'},
{'name': 'Two',
'url': 'cases/two.html'}
];
$scope.frameUrl = "web.html"
$scope.go = function(url){
alert(url);
}
});