mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.
70 lines (58 loc) • 1.61 kB
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>