Class diagram example
This commit is contained in:
parent
17be68f5d9
commit
a9ac654040
|
@ -0,0 +1,79 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../dist/mermaid.css"/>
|
||||||
|
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
|
||||||
|
<script src="../../dist/mermaid.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
|
||||||
|
Class03 *-- Class04
|
||||||
|
Class05 o-- Class06
|
||||||
|
Class07 .. Class08
|
||||||
|
Class09 -- C2
|
||||||
|
Class09 -- C3
|
||||||
|
Class09 -- Class07
|
||||||
|
Class07 : equals()
|
||||||
|
Class07 : Object[] elementData
|
||||||
|
Class01 : size()
|
||||||
|
Class01 : int chimp
|
||||||
|
Class01 : int gorilla
|
||||||
|
Class08 -- C2
|
||||||
|
</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>
|
Loading…
Reference in New Issue