mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
45 lines (40 loc) • 1.37 kB
HTML
<html>
<head>
<title>ART Process work-flow</title>
<meta charset="UTF-8">
<lnk href="http://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<lnk href="../dist/mermaid.css" rel="stylesheet" type="text/css">
<link href="../dist/mermaid.forest.css" rel="stylesheet" type="text/css">
<style>
.title
{
font-size: 48px;
}
</style>
<script src="../dist/mermaidAPI.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
mermaidAPI.initialize({startOnLoad:true,cloneCssStyles:false});
function myAction(id)
{
alert("click fired");
}
$(function()
{
var callback = function(code,bindEvents){
console.log(bindEvents);
$("#div-id1").html(code);
bindEvents();
};
var graphDefinition = 'graph LR\nProposal-->Contract\nContract-->Planning\nPlanning-->Design\nDesign-->Build\nBuild-->Verification\nVerification-->Delivery\nDelivery-->Support\nclick Design myAction\n';
mermaidAPI.render('id1',graphDefinition,callback);
});
</script>
</head>
<body>
<div class="title">Process WorkFlow (static test)</div>
<div id="div-id1">
</div>
</body>
</html>