classDiagram.md

23.6 KB1025 lines

1	> Warning
2	>
3	> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4	>
5	> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/classDiagram.md](../../packages/mermaid/src/docs/syntax/classDiagram.md).
6
7	# Class diagrams
8
9	> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
10	>
11	> -Wikipedia
12
13	The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
14
15	Mermaid can render class diagrams.
16
17	```mermaid-example
18	---
19	title: Animal example
20	---
21	classDiagram
22	note "From Duck till Zebra"
23	Animal <\|-- Duck
24	note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
25	Animal <\|-- Fish
26	Animal <\|-- Zebra
27	Animal : +int age
28	Animal : +String gender
29	Animal: +isMammal()
30	Animal: +mate()
31	class Duck{
32	+String beakColor
33	+swim()
34	+quack()
35	}
36	class Fish{
37	-int sizeInFeet
38	-canEat()
39	}
40	class Zebra{
41	+bool is_wild
42	+run()
43	}
44	```
45
46	```mermaid
47	---
48	title: Animal example
49	---
50	classDiagram
51	note "From Duck till Zebra"
52	Animal <\|-- Duck
53	note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
54	Animal <\|-- Fish
55	Animal <\|-- Zebra
56	Animal : +int age
57	Animal : +String gender
58	Animal: +isMammal()
59	Animal: +mate()
60	class Duck{
61	+String beakColor
62	+swim()
63	+quack()
64	}
65	class Fish{
66	-int sizeInFeet
67	-canEat()
68	}
69	class Zebra{
70	+bool is_wild
71	+run()
72	}
73	```
74
75	## Syntax
76
77	### Class
78
79	UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
80	A single instance of a class in the diagram contains three compartments:
81
82	- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.
83	- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
84	- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
85
86	```mermaid-example
87	---
88	title: Bank example
89	---
90	classDiagram
91	class BankAccount
92	BankAccount : +String owner
93	BankAccount : +Bigdecimal balance
94	BankAccount : +deposit(amount)
95	BankAccount : +withdrawal(amount)
96
97	```
98
99	```mermaid
100	---
101	title: Bank example
102	---
103	classDiagram
104	class BankAccount
105	BankAccount : +String owner
106	BankAccount : +Bigdecimal balance
107	BankAccount : +deposit(amount)
108	BankAccount : +withdrawal(amount)
109
110	```
111
112	## Define a class
113
114	There are two ways to define a class:
115
116	- Explicitly using keyword class like `class Animal` which would define the Animal class.
117	- Via a relationship which defines two classes at a time along with their relationship. For instance, `Vehicle <\|-- Car`.
118
119	```mermaid-example
120	classDiagram
121	class Animal
122	Vehicle <\|-- Car
123	```
124
125	```mermaid
126	classDiagram
127	class Animal
128	Vehicle <\|-- Car
129	```
130
131	Naming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-).
132
133	### Class labels
134
135	In case you need to provide a label for a class, you can use the following syntax:
136
137	```mermaid-example
138	classDiagram
139	class Animal["Animal with a label"]
140	class Car["Car with *! symbols"]
141	Animal --> Car
142	```
143
144	```mermaid
145	classDiagram
146	class Animal["Animal with a label"]
147	class Car["Car with *! symbols"]
148	Animal --> Car
149	```
150
151	You can also use backticks to escape special characters in the label:
152
153	```mermaid-example
154	classDiagram
155	class `Animal Class!`
156	class `Car Class`
157	`Animal Class!` --> `Car Class`
158	```
159
160	```mermaid
161	classDiagram
162	class `Animal Class!`
163	class `Car Class`
164	`Animal Class!` --> `Car Class`
165	```
166
167	## Defining Members of a class
168
169	UML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them.
170
171	Mermaid distinguishes between attributes and functions/methods based on if the parenthesis `()` are present or not. The ones with `()` are treated as functions/methods, and all others as attributes.
172
173	There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :
174
175	- Associate a member of a class using : (colon) followed by member name, useful to define one member at a time. For example:
176
177	```mermaid-example
178	classDiagram
179	class BankAccount
180	BankAccount : +String owner
181	BankAccount : +BigDecimal balance
182	BankAccount : +deposit(amount)
183	BankAccount : +withdrawal(amount)
184	```
185
186	```mermaid
187	classDiagram
188	class BankAccount
189	BankAccount : +String owner
190	BankAccount : +BigDecimal balance
191	BankAccount : +deposit(amount)
192	BankAccount : +withdrawal(amount)
193	```
194
195	- Associate members of a class using {} brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
196
197	```mermaid-example
198	classDiagram
199	class BankAccount{
200	+String owner
201	+BigDecimal balance
202	+deposit(amount)
203	+withdrawal(amount)
204	}
205	```
206
207	```mermaid
208	classDiagram
209	class BankAccount{
210	+String owner
211	+BigDecimal balance
212	+deposit(amount)
213	+withdrawal(amount)
214	}
215	```
216
217	#### Return Type
218
219	Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:
220
221	```mermaid-example
222	classDiagram
223	class BankAccount{
224	+String owner
225	+BigDecimal balance
226	+deposit(amount) bool
227	+withdrawal(amount) int
228	}
229	```
230
231	```mermaid
232	classDiagram
233	class BankAccount{
234	+String owner
235	+BigDecimal balance
236	+deposit(amount) bool
237	+withdrawal(amount) int
238	}
239	```
240
241	#### Generic Types
242
243	Generics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (tilde). Nested type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
244
245	> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
246
247	```mermaid-example
248	classDiagram
249	class Square~Shape~{
250	int id
251	List~int~ position
252	setPoints(List~int~ points)
253	getPoints() List~int~
254	}
255
256	Square : -List~string~ messages
257	Square : +setMessages(List~string~ messages)
258	Square : +getMessages() List~string~
259	Square : +getDistanceMatrix() List~List~int~~
260	```
261
262	```mermaid
263	classDiagram
264	class Square~Shape~{
265	int id
266	List~int~ position
267	setPoints(List~int~ points)
268	getPoints() List~int~
269	}
270
271	Square : -List~string~ messages
272	Square : +setMessages(List~string~ messages)
273	Square : +getMessages() List~string~
274	Square : +getDistanceMatrix() List~List~int~~
275	```
276
277	#### Visibility
278
279	To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name:
280
281	- `+` Public
282	- `-` Private
283	- `#` Protected
284	- `~` Package/Internal
285
286	> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()` or after the return type:
287	>
288	> - `` Abstract e.g.: `someAbstractMethod()` or `someAbstractMethod() int*`
289	> - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$`
290
291	> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end:
292	>
293	> - `$` Static e.g.: `String someField$`
294
295	## Defining Relationship
296
297	A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
298
299	```
300	[classA][Arrow][ClassB]
301	```
302
303	There are eight different types of relations defined for classes under UML which are currently supported:
304
305	\| Type \| Description \|
306	\| ------- \| ------------- \|
307	\| `<\\|--` \| Inheritance \|
308	\| `*--` \| Composition \|
309	\| `o--` \| Aggregation \|
310	\| `-->` \| Association \|
311	\| `--` \| Link (Solid) \|
312	\| `..>` \| Dependency \|
313	\| `..\\|>` \| Realization \|
314	\| `..` \| Link (Dashed) \|
315
316	```mermaid-example
317	classDiagram
318	classA <\|-- classB
319	classC *-- classD
320	classE o-- classF
321	classG <-- classH
322	classI -- classJ
323	classK <.. classL
324	classM <\|.. classN
325	classO .. classP
326
327	```
328
329	```mermaid
330	classDiagram
331	classA <\|-- classB
332	classC *-- classD
333	classE o-- classF
334	classG <-- classH
335	classI -- classJ
336	classK <.. classL
337	classM <\|.. classN
338	classO .. classP
339
340	```
341
342	We can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well:
343
344	```mermaid-example
345	classDiagram
346	classA --\|> classB : Inheritance
347	classC --* classD : Composition
348	classE --o classF : Aggregation
349	classG --> classH : Association
350	classI -- classJ : Link(Solid)
351	classK ..> classL : Dependency
352	classM ..\|> classN : Realization
353	classO .. classP : Link(Dashed)
354
355	```
356
357	```mermaid
358	classDiagram
359	classA --\|> classB : Inheritance
360	classC --* classD : Composition
361	classE --o classF : Aggregation
362	classG --> classH : Association
363	classI -- classJ : Link(Solid)
364	classK ..> classL : Dependency
365	classM ..\|> classN : Realization
366	classO .. classP : Link(Dashed)
367
368	```
369
370	### Labels on Relations
371
372	It is possible to add label text to a relation:
373
374	```
375	[classA][Arrow][ClassB]:LabelText
376	```
377
378	```mermaid-example
379	classDiagram
380	classA <\|-- classB : implements
381	classC *-- classD : composition
382	classE o-- classF : aggregation
383	```
384
385	```mermaid
386	classDiagram
387	classA <\|-- classB : implements
388	classC *-- classD : composition
389	classE o-- classF : aggregation
390	```
391
392	### Two-way relations
393
394	Relations can logically represent an N:M association:
395
396	```mermaid-example
397	classDiagram
398	Animal <\|--\|> Zebra
399	```
400
401	```mermaid
402	classDiagram
403	Animal <\|--\|> Zebra
404	```
405
406	Here is the syntax:
407
408	```
409	[Relation Type][Link][Relation Type]
410	```
411
412	Where `Relation Type` can be one of:
413
414	\| Type \| Description \|
415	\| ----- \| ----------- \|
416	\| `<\\|` \| Inheritance \|
417	\| `\*` \| Composition \|
418	\| `o` \| Aggregation \|
419	\| `>` \| Association \|
420	\| `<` \| Association \|
421	\| `\\|>` \| Realization \|
422
423	And `Link` can be one of:
424
425	\| Type \| Description \|
426	\| ---- \| ----------- \|
427	\| -- \| Solid \|
428	\| .. \| Dashed \|
429
430	### Lollipop Interfaces
431
432	Classes can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax:
433
434	- `bar ()-- foo`
435	- `foo --() bar`
436
437	The interface (bar) with the lollipop connects to the class (foo).
438
439	Note: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it.
440
441	```mermaid-example
442	classDiagram
443	bar ()-- foo
444	```
445
446	```mermaid
447	classDiagram
448	bar ()-- foo
449	```
450
451	```mermaid-example
452	classDiagram
453	class Class01 {
454	int amount
455	draw()
456	}
457	Class01 --() bar
458	Class02 --() bar
459
460	foo ()-- Class01
461	```
462
463	```mermaid
464	classDiagram
465	class Class01 {
466	int amount
467	draw()
468	}
469	Class01 --() bar
470	Class02 --() bar
471
472	foo ()-- Class01
473	```
474
475	## Define Namespace
476
477	A namespace groups classes.
478
479	```mermaid-example
480	classDiagram
481	namespace BaseShapes {
482	class Triangle
483	class Rectangle {
484	double width
485	double height
486	}
487	}
488	```
489
490	```mermaid
491	classDiagram
492	namespace BaseShapes {
493	class Triangle
494	class Rectangle {
495	double width
496	double height
497	}
498	}
499	```
500
501	## Cardinality / Multiplicity on relations
502
503	Multiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies.
504
505	Multiplicity notations are placed near the end of an association.
506
507	The different cardinality options are :
508
509	- `1` Only 1
510	- `0..1` Zero or One
511	- `1..*` One or more
512	- `*` Many
513	- `n` n (where n>1)
514	- `0..n` zero to n (where n>1)
515	- `1..n` one to n (where n>1)
516
517	Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
518
519	```
520	[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
521	```
522
523	```mermaid-example
524	classDiagram
525	Customer "1" --> "*" Ticket
526	Student "1" --> "1..*" Course
527	Galaxy --> "many" Star : Contains
528	```
529
530	```mermaid
531	classDiagram
532	Customer "1" --> "*" Ticket
533	Student "1" --> "1..*" Course
534	Galaxy --> "many" Star : Contains
535	```
536
537	## Annotations on classes
538
539	It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:
540
541	- `<<Interface>>` To represent an Interface class
542	- `<<Abstract>>` To represent an abstract class
543	- `<<Service>>` To represent a service class
544	- `<<Enumeration>>` To represent an enum
545
546	Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:
547
548	> Tip:\
549	> In Mermaid class diagrams, annotations like `<<interface>>` can be attached in two ways:
550	>
551	> - Inline with the class definition (Recommended for consistency):
552	>
553	> ```mermaid-example
554	> classDiagram
555	> class Shape <<interface>>
556	> ```
557	>
558	> ```mermaid
559	> classDiagram
560	> class Shape <<interface>>
561	> ```
562	>
563	> - Separate line after the class definition:
564	>
565	> ```mermaid-example
566	> classDiagram
567	> class Shape
568	> <<interface>> Shape
569	> ```
570	>
571	> ```mermaid
572	> classDiagram
573	> class Shape
574	> <<interface>> Shape
575	> ```
576	>
577	> Both methods are fully supported and produce identical diagrams.\
578	> However, it is recommended to use the inline style for better readability and consistent formatting across diagrams.
579
580	- In a _separate line_ after a class is defined:
581
582	```mermaid-example
583	classDiagram
584	class Shape
585	<<interface>> Shape
586	Shape : noOfVertices
587	Shape : draw()
588	```
589
590	```mermaid
591	classDiagram
592	class Shape
593	<<interface>> Shape
594	Shape : noOfVertices
595	Shape : draw()
596	```
597
598	- In a _nested structure_ along with the class definition:
599
600	```mermaid-example
601	classDiagram
602	class Shape{
603	<<interface>>
604	noOfVertices
605	draw()
606	}
607	class Color{
608	<<enumeration>>
609	RED
610	BLUE
611	GREEN
612	WHITE
613	BLACK
614	}
615
616	```
617
618	```mermaid
619	classDiagram
620	class Shape{
621	<<interface>>
622	noOfVertices
623	draw()
624	}
625	class Color{
626	<<enumeration>>
627	RED
628	BLUE
629	GREEN
630	WHITE
631	BLACK
632	}
633
634	```
635
636	## Comments
637
638	Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.
639
640	```mermaid-example
641	classDiagram
642	%% This whole line is a comment classDiagram class Shape <<interface>>
643	class Shape{
644	<<interface>>
645	noOfVertices
646	draw()
647	}
648	```
649
650	```mermaid
651	classDiagram
652	%% This whole line is a comment classDiagram class Shape <<interface>>
653	class Shape{
654	<<interface>>
655	noOfVertices
656	draw()
657	}
658	```
659
660	## Setting the direction of the diagram
661
662	With class diagrams you can use the direction statement to set the direction in which the diagram will render:
663
664	```mermaid-example
665	classDiagram
666	direction RL
667	class Student {
668	-idCard : IdCard
669	}
670	class IdCard{
671	-id : int
672	-name : string
673	}
674	class Bike{
675	-id : int
676	-name : string
677	}
678	Student "1" --o "1" IdCard : carries
679	Student "1" --o "1" Bike : rides
680	```
681
682	```mermaid
683	classDiagram
684	direction RL
685	class Student {
686	-idCard : IdCard
687	}
688	class IdCard{
689	-id : int
690	-name : string
691	}
692	class Bike{
693	-id : int
694	-name : string
695	}
696	Student "1" --o "1" IdCard : carries
697	Student "1" --o "1" Bike : rides
698	```
699
700	## Interaction
701
702	It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. Note: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
703
704	You would define these actions on a separate line after all classes have been declared.
705
706	```
707	action className "reference" "tooltip"
708	click className call callback() "tooltip"
709	click className href "url" "tooltip"
710	```
711
712	- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
713	- _className_ is the id of the node that the action will be associated with
714	- _reference_ is either the url link, or the function name for callback.
715	- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
716	- note: callback function will be called with the nodeId as parameter.
717
718	## Notes
719
720	It is possible to add notes on the diagram using `note "line1\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\nline2"`.
721
722	### Examples
723
724	```mermaid-example
725	classDiagram
726	note "This is a general note"
727	note for MyClass "This is a note for a class"
728	class MyClass{
729	}
730	```
731
732	```mermaid
733	classDiagram
734	note "This is a general note"
735	note for MyClass "This is a note for a class"
736	class MyClass{
737	}
738	```
739
740	_URL Link:_
741
742	```mermaid-example
743	classDiagram
744	class Shape
745	link Shape "https://www.github.com" "This is a tooltip for a link"
746	class Shape2
747	click Shape2 href "https://www.github.com" "This is a tooltip for a link"
748	```
749
750	```mermaid
751	classDiagram
752	class Shape
753	link Shape "https://www.github.com" "This is a tooltip for a link"
754	class Shape2
755	click Shape2 href "https://www.github.com" "This is a tooltip for a link"
756	```
757
758	_Callback:_
759
760	```mermaid-example
761	classDiagram
762	class Shape
763	callback Shape "callbackFunction" "This is a tooltip for a callback"
764	class Shape2
765	click Shape2 call callbackFunction() "This is a tooltip for a callback"
766	```
767
768	```mermaid
769	classDiagram
770	class Shape
771	callback Shape "callbackFunction" "This is a tooltip for a callback"
772	class Shape2
773	click Shape2 call callbackFunction() "This is a tooltip for a callback"
774	```
775
776	```html
777	<script>
778	const callbackFunction = function () {
779	alert('A callback was triggered');
780	};
781	</script>
782	```
783
784	```mermaid-example
785	classDiagram
786	class Class01
787	class Class02
788	callback Class01 "callbackFunction" "Callback tooltip"
789	link Class02 "https://www.github.com" "This is a link"
790	class Class03
791	class Class04
792	click Class03 call callbackFunction() "Callback tooltip"
793	click Class04 href "https://www.github.com" "This is a link"
794	```
795
796	```mermaid
797	classDiagram
798	class Class01
799	class Class02
800	callback Class01 "callbackFunction" "Callback tooltip"
801	link Class02 "https://www.github.com" "This is a link"
802	class Class03
803	class Class04
804	click Class03 call callbackFunction() "Callback tooltip"
805	click Class04 href "https://www.github.com" "This is a link"
806	```
807
808	> Success The tooltip functionality and the ability to link to urls are available from version 0.5.2.
809
810	Beginner's tip—a full example using interactive links in an HTML page:
811
812	```html
813	<body>
814	<pre class="mermaid">
815	classDiagram
816	Animal <\|-- Duck
817	Animal <\|-- Fish
818	Animal <\|-- Zebra
819	Animal : +int age
820	Animal : +String gender
821	Animal: +isMammal()
822	Animal: +mate()
823	class Duck{
824	+String beakColor
825	+swim()
826	+quack()
827	}
828	class Fish{
829	-int sizeInFeet
830	-canEat()
831	}
832	class Zebra{
833	+bool is_wild
834	+run()
835	}
836
837	callback Duck "callback" "Tooltip"
838	link Zebra "https://www.github.com" "This is a link"
839	</pre>
840
841	<script>
842	const callback = function () {
843	alert('A callback was triggered');
844	};
845	const config = {
846	startOnLoad: true,
847	securityLevel: 'loose',
848	};
849	mermaid.initialize(config);
850	</script>
851	</body>
852	```
853
854	## Styling
855
856	### Styling a node
857
858	It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
859
860	Note that notes and namespaces cannot be styled individually but do support themes.
861
862	```mermaid-example
863	classDiagram
864	class Animal
865	class Mineral
866	style Animal fill:#f9f,stroke:#333,stroke-width:4px
867	style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
868	```
869
870	```mermaid
871	classDiagram
872	class Animal
873	class Mineral
874	style Animal fill:#f9f,stroke:#333,stroke-width:4px
875	style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
876	```
877
878	#### Classes
879
880	More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
881	should have a different look.
882
883	A class definition looks like the example below:
884
885	```
886	classDef className fill:#f9f,stroke:#333,stroke-width:4px;
887	```
888
889	Also, it is possible to define style to multiple classes in one statement:
890
891	```
892	classDef firstClassName,secondClassName font-size:12pt;
893	```
894
895	Attachment of a class to a node is done as per below:
896
897	```
898	cssClass "nodeId1" className;
899	```
900
901	It is also possible to attach a class to a list of nodes in one statement:
902
903	```
904	cssClass "nodeId1,nodeId2" className;
905	```
906
907	A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
908
909	```mermaid-example
910	classDiagram
911	class Animal:::someclass
912	classDef someclass fill:#f96
913	```
914
915	```mermaid
916	classDiagram
917	class Animal:::someclass
918	classDef someclass fill:#f96
919	```
920
921	Or:
922
923	```mermaid-example
924	classDiagram
925	class Animal:::someclass {
926	-int sizeInFeet
927	-canEat()
928	}
929	classDef someclass fill:#f96
930	```
931
932	```mermaid
933	classDiagram
934	class Animal:::someclass {
935	-int sizeInFeet
936	-canEat()
937	}
938	classDef someclass fill:#f96
939	```
940
941	### Default class
942
943	If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.
944
945	```
946	classDef default fill:#f9f,stroke:#333,stroke-width:4px;
947	```
948
949	```mermaid-example
950	classDiagram
951	class Animal:::pink
952	class Mineral
953
954	classDef default fill:#f96,color:red
955	classDef pink color:#f9f
956	```
957
958	```mermaid
959	classDiagram
960	class Animal:::pink
961	class Mineral
962
963	classDef default fill:#f96,color:red
964	classDef pink color:#f9f
965	```
966
967	### CSS Classes
968
969	It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example
970	below:
971
972	Example style
973
974	```html
975	<style>
976	.styleClass > * > g {
977	fill: #ff0000;
978	stroke: #ffff00;
979	stroke-width: 4px;
980	}
981	</style>
982	```
983
984	Example definition
985
986	```mermaid-example
987	classDiagram
988	class Animal:::styleClass
989	```
990
991	```mermaid
992	classDiagram
993	class Animal:::styleClass
994	```
995
996	> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
997
998	## Configuration
999
1000	### Members Box
1001
1002	It is possible to hide the empty members box of a class node.
1003
1004	This is done by changing the hideEmptyMembersBox value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html)
1005
1006	```mermaid-example
1007	---
1008	config:
1009	class:
1010	hideEmptyMembersBox: true
1011	---
1012	classDiagram
1013	class Duck
1014	```
1015
1016	```mermaid
1017	---
1018	config:
1019	class:
1020	hideEmptyMembersBox: true
1021	---
1022	classDiagram
1023	class Duck
1024	```
1025