6.1 KB273 lines
Blame
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <title>Class diagrams Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8 <style>
9 div.mermaid {
10 /* font-family: 'trebuchet ms', verdana, arial; */
11 font-family: 'Courier New', Courier, monospace !important;
12 }
13 </style>
14 </head>
15
16 <body>
17 <h1>Class diagram demos</h1>
18
19 <pre class="mermaid">
20 ---
21 title: Demo Class Diagram
22 ---
23 classDiagram
24 accTitle: Demo Class Diagram
25 accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
26
27 Animal <|-- Duck
28 Animal <|-- Fish
29 Animal <|-- Zebra
30 Animal : +int age
31 Animal : +String gender
32 Animal: +isMammal()
33 Animal: +mate()
34
35 class Duck{
36 +String beakColor
37 +swim()
38 +quack()
39 }
40 class Fish{
41 -Listint sizeInFeet
42 -canEat()
43 }
44 class Zebra{
45 +bool is_wild
46 +run(List~T~, List~OT~)
47 %% +run-composite(List~T, K~)
48 +run-nested(List~List~OT~~)
49 }
50
51 </pre>
52 <hr />
53
54 <pre class="mermaid">
55 classDiagram
56 Class01 <|-- AveryLongClass : Cool
57
58 &lt;&lt;interface&gt;&gt; Class01
59 Class03 "0" *-- "0..n" Class04
60 Class05 "1" o-- "many" Class06
61 Class07 .. Class08
62 Class09 "many" --> "1" C2 : Where am i?
63 Class09 "0" --* "1..n" C3
64 Class09 --|> Class07
65 Class07 : equals()
66 Class07 : Object[] elementData
67 Class01 : #size()
68 Class01 : -int chimp
69 Class01 : +int gorilla
70 Class08 <--> C2: Cool label
71 class Class10 {
72 &lt;&lt;service&gt;&gt;
73 int id
74 size()
75 }
76 </pre>
77 <hr />
78
79 <pre class="mermaid">
80 classDiagram
81 class Class01~T~
82 Class01 : #size()
83 Class01 : -int chimp
84 Class01 : +int gorilla
85 Class01 : +abstractAttribute string*
86 class Class10~T~ {
87 &lt;&lt;service&gt;&gt;
88 int id
89 size()
90 }
91 </pre>
92 <hr />
93
94 <pre class="mermaid">
95 classDiagram
96 Class01~T~ <|-- AveryLongClass : Cool
97 &lt;&lt;interface&gt;&gt; Class01
98 Class03~T~ "0" *-- "0..n" Class04
99 Class05 "1" o-- "many" Class06
100 Class07~T~ .. Class08
101 Class09 "many" --> "1" C2 : Where am i?
102 Class09 "0" --* "1..n" C3
103 Class09 --|> Class07
104 Class07 : equals()
105 Class07 : Object[] elementData
106 Class01 : #size()
107 Class01 : -int chimp
108 Class01 : +int gorilla
109 Class08 <--> C2: Cool label
110 class Class10 {
111 &lt;&lt;service&gt;&gt;
112 int id
113 size()
114 }
115 </pre>
116 <hr />
117
118 <pre class="mermaid">
119 classDiagram
120 Interface1 ()-- Interface1Impl
121 </pre>
122 <hr />
123
124 <pre class="mermaid">
125 classDiagram
126 direction LR
127 Animal ()-- Dog
128 Animal ()-- Cat
129 note for Cat "should have no members area"
130 Dog : bark()
131 Dog : species()
132 </pre>
133 <hr />
134
135 <pre class="mermaid">
136 classDiagram
137 direction RL
138 Fruit ()-- Apple
139 Apple : color()
140 Apple : -int leafCount()
141 Fruit ()-- Pineapple
142 Pineapple : color()
143 Pineapple : -int leafCount()
144 Pineapple : -int spikeCount()
145 </pre>
146 <hr />
147
148 <pre class="mermaid">
149 classDiagram
150 class Person {
151 +ID : Guid
152 +FirstName : string
153 +LastName : string
154 -privateProperty : string
155 #ProtectedProperty : string
156 ~InternalProperty : string
157 ~AnotherInternalProperty : List~List~string~~
158 }
159 class People List~List~Person~~
160 </pre>
161 <hr />
162 <pre class="mermaid">
163 classDiagram
164 namespace Company.Project.Module {
165 class GenericClass~T~ {
166 +addItem(item: T)
167 +getItem() T
168 }
169 }
170 </pre>
171 <hr />
172 <pre class="mermaid">
173 classDiagram
174 namespace Company.Project.Module.SubModule {
175 class Report {
176 +generatePDF(data: List)
177 +generateCSV(data: List)
178 }
179 }
180 namespace Company.Project.Module {
181 class Admin {
182 +generateReport()
183 }
184 }
185 Admin --> Report : generates
186 </pre>
187 <hr />
188 <pre class="mermaid">
189 classDiagram
190 namespace Company.Project.Module {
191 class User {
192 +login(username: String, password: String)
193 +logout()
194 }
195 class Admin {
196 +addUser(user: User)
197 +removeUser(user: User)
198 +generateReport()
199 }
200 class Report {
201 +generatePDF(reportData: List)
202 +generateCSV(reportData: List)
203 }
204 }
205 Admin --> User : manages
206 Admin --> Report : generates
207 </pre>
208 <hr />
209 <pre class="mermaid">
210 classDiagram
211 namespace Shapes {
212 class Shape {
213 +calculateArea() double
214 }
215 class Circle {
216 +double radius
217 }
218 class Square {
219 +double side
220 }
221 }
222
223 Shape <|-- Circle
224 Shape <|-- Square
225
226 namespace Vehicles {
227 class Vehicle {
228 +String brand
229 }
230 class Car {
231 +int horsepower
232 }
233 class Bike {
234 +boolean hasGears
235 }
236 }
237
238 Vehicle <|-- Car
239 Vehicle <|-- Bike
240 Car --> Circle : "Logo Shape"
241 Bike --> Square : "Logo Shape"
242
243 </pre>
244 <hr />
245 <pre class="mermaid">
246 classDiagram
247 note "This is a outer note"
248 note for Class1 "This is a outer note for Class1"
249 namespace ns {
250 note "This is a inner note"
251 note for Class1 "This is a inner note for Class1"
252 class Class1
253 class Class2
254 }
255 </pre>
256 <hr />
257
258 <script type="module">
259 import mermaid from './mermaid.esm.mjs';
260 mermaid.initialize({
261 theme: 'default',
262 // themeCSS: '.node rect { fill: red; }',
263 logLevel: 3,
264 securityLevel: 'loose',
265 flowchart: { curve: 'basis' },
266 gantt: { axisFormat: '%m/%d/%Y' },
267 sequence: { actorMargin: 50 },
268 // sequenceDiagram: { actorMargin: 300 } // deprecated
269 });
270 </script>
271 </body>
272</html>
273