mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
70 lines
1.6 KiB
HTML
70 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<link rel="stylesheet" href="../../dist/mermaid.css"/>
|
|
<script src="../../dist/mermaid.js"></script>
|
|
<style>
|
|
body{
|
|
background-color: #89896f;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
|
|
function callback(id){
|
|
alert(id);
|
|
}
|
|
function callback2(id){
|
|
alert('x'+id);
|
|
}
|
|
|
|
function onNodeClick(nodeId){
|
|
alert(nodeId);
|
|
}
|
|
|
|
mermaid.initialize({logLevel:1});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Links to callbacks</h1>
|
|
A has a tooltip and a callback <br/>
|
|
B has a link and a tooltip <br/>
|
|
C has a long tooltip <br/>
|
|
<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 quite long tooltip. So long that several rows are required... Not just two rows..."
|
|
</div>
|
|
|
|
<h1>Links to urls</h1>
|
|
A second diagram that should have its own callback on A even though the node has the same id.
|
|
<div class="mermaid" id="i213">
|
|
graph LR;
|
|
A-->B
|
|
B-->C
|
|
click A callback2 "Tooltip3"
|
|
</div>
|
|
|
|
<h1>Issue #272</h1>
|
|
|
|
<div class="mermaid" id="i213">
|
|
graph LR;
|
|
|
|
A((start))-->B(step1);
|
|
B-->C[step2];
|
|
C-->D{step3};
|
|
D-->E[end];
|
|
|
|
classDef green fill:#9f6,stroke:#333,stroke-width:1px;
|
|
class A,B,C,D,E green;
|
|
|
|
click B onNodeClick "tooltip"
|
|
</div>
|
|
</body>
|
|
</html>
|