marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: Prettier

Browse Source
This commit is contained in:
Sidharth Vinod
2024-03-23 11:39:02 +05:30
parent 3278899787
commit 16f1dccd22
76 changed files with 508 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/syntax/classDiagram.md
View File

@@ -8,7 +8,7 @@
> "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."
>
> \-Wikipedia
> -Wikipedia
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.
@@ -296,7 +296,9 @@ To describe the visibility (or encapsulation) of an attribute or method/function
A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
[classA][Arrow][ClassB]
```
[classA][Arrow][ClassB]
```
There are eight different types of relations defined for classes under UML which are currently supported:
@@ -369,7 +371,9 @@ classO .. classP : Link(Dashed)
It is possible to add label text to a relation:
[classA][Arrow][ClassB]:LabelText
```
[classA][Arrow][ClassB]:LabelText
```
```mermaid-example
classDiagram
@@ -401,7 +405,9 @@ classDiagram
Here is the syntax:
[Relation Type][Link][Relation Type]
```
[Relation Type][Link][Relation Type]
```
Where `Relation Type` can be one of:
@@ -465,7 +471,9 @@ The different cardinality options are :
Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
```
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
```
```mermaid-example
classDiagram
@@ -618,9 +626,11 @@ It is possible to bind a click event to a node. The click can lead to either a j
You would define these actions on a separate line after all classes have been declared.
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
```
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
```
- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
- _className_ is the id of the node that the action will be associated with
@@ -803,11 +813,15 @@ should have a different look. This is done by predefining classes in css styles
Then attaching that class to a specific node:
cssClass "nodeId1" styleClass;
```
cssClass "nodeId1" styleClass;
```
It is also possible to attach a class to a list of nodes in one statement:
cssClass "nodeId1,nodeId2" styleClass;
```
cssClass "nodeId1,nodeId2" styleClass;
```
A shorter form of adding a class is to attach the classname to the node using the `:::` operator: