mermaid
Version:
Markdownish syntax for generating flowcharts
53 lines (45 loc) • 1.25 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.full.js"></script>
<scrpt src="https://cdn.rawgit.com/knsv/mermaid/0.3.0/dist/mermaid.full.min.js"></scrpt>
<script>
var mermaid_config = {
startOnLoad:true
}
mermaid.startOnLoad=true;
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
</style>
<link rel="stylesheet" href="seq.css"/>
</head>
<body>
<div class="mermaid">
graph TD;
subgraph
sq[Square shape]-->ci((Circle shape))
od>Odd shape]---|Two line<br>edge comment|ro
end
od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape];
di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);
di-->ro2(Rounded square shape)
%% Comments after double percent signs
e((Inner / circle))-->f(,.?!+-*ز);
cyr[Cyrillic]-->cyr2((Circle shape Начало));
A[Object foo,bar]-->B(Thing)
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
class green sq;
</div>
</body>
</html>