mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.
80 lines (69 loc) • 2.03 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<script src="../../dist/mermaid.js"></script>
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.cluster {
fill: #fcac93;
rx: 4px;
stroke: grey;
}
.cssClass > rect {
fill: #FF0000;
stroke: #FFFF00;
stroke-width: 4px;
}
</style>
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body style="height:100%">
<h1>Rendering</h1>
A should have a red background with styling from class.
<script>
mermaidAPI.initialize({
startOnLoad: true,
logLevel: 1
});
</script>
<div class="mermaid" style="height:500px;">
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Coola label
</div>
<svg id="mermaidChart10" style="display:none" width="100%" height="500" xmlns="http://www.w3.org/2000/svg">
<style type="text/css" title="mermaid-svg-internal-css">/* */
text {
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
text {
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
/* */
</style>
<g transform="translate(0,0)">
<rect x="0" y="0" fill="yellow" width="115.5625" height="26.65625"></rect>
<text x="10" y="17" fill="darkblue" class="classText">AveryLongClass</text>
</g>
<g transform="translate(200,0)">
<rect rx="0" ry="0" fill="grey" width="115.5625" height="26.65625"></rect>
<text x="10" y="17" fill="darkblue" class="classText">AveryLongClass</text>
</g>
</svg>
</body>
</html>