mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-15 21:39:40 +02:00
82 lines
1.8 KiB
HTML
82 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<link rel="stylesheet" href="../../dist/mermaid.css"/>
|
|
<script src="../../dist/mermaid.js"></script>
|
|
<link rel="stylesheet" href="../../dist/mermaid.css"/>
|
|
<style>
|
|
body{
|
|
background-color: #2d2d22;
|
|
}
|
|
div.mermaidTooltip {
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 60px;
|
|
height: 28px;
|
|
padding: 2px;
|
|
font: 12px sans-serif;
|
|
background: lightsteelblue;
|
|
border: 1px solid black;
|
|
border-radius: 3px;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
function itsTime(){
|
|
|
|
function getScreenCoords(x, y, ctm) {
|
|
var xn = ctm.e + x*ctm.a;
|
|
var yn = ctm.f + y*ctm.d;
|
|
return { x: xn, y: yn };
|
|
}
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
},250);
|
|
|
|
}
|
|
function callback(id){
|
|
alert(id);
|
|
}
|
|
function callback2(id){
|
|
alert('x'+id);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="itsTime()">
|
|
<h1>Links to callbacks</h1>
|
|
A has a tooltip
|
|
<div class="mermaid" id="i211">
|
|
graph LR;
|
|
A-->B;
|
|
B-->C;
|
|
click A callback "Tooltip"
|
|
click B "http://www.github.com" "This is a link"
|
|
click C callback "Tooltip C1"
|
|
</div>
|
|
|
|
<h1>Links to urls</h1>
|
|
<div class="mermaid" id="i213">
|
|
graph LR;
|
|
A-->B
|
|
B-->C
|
|
click A callback2 "Tooltip3"
|
|
</div>
|
|
<div class="mermaid" id="i213">
|
|
graph LR;
|
|
subgraph S1
|
|
a-->b
|
|
end
|
|
subgraph S2
|
|
c-->d
|
|
c-->d
|
|
end
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|