Class diagram example

2015-11-04 16:36:19 +01:00 · 2015-11-04 16:36:19 +01:00 · a9ac654040
parent 17be68f5d9
commit a9ac654040
1 changed files with 79 additions and 0 deletions
--- a/test/examples/classDiagram.html
+++ b/test/examples/classDiagram.html
@ -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>