GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Class diagram example

Browse Source
This commit is contained in:
knsv 2015-11-04 16:36:19 +01:00
parent 17be68f5d9
commit a9ac654040
1 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
test/examples/classDiagram.html Normal file
View File

@ -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>