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

Merge branch 'master' of github.com:mermaid-js/mermaid

Browse Source 
# Conflicts:
#	docs/classDiagram.md
This commit is contained in:
Knut Sveidqvist
2020-01-11 09:47:51 +01:00
parent ce02d1dc98 d53e00ffe0
commit 0a5ee0634f
2 changed files with 17 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/classDiagram.md
View File

@@ -29,7 +29,7 @@ Mermaid can render class diagrams.
+bool is_wild +bool is_wild
+run() +run()
} }
``` ```
```mermaid ```mermaid
classDiagram classDiagram
@@ -52,8 +52,8 @@ Mermaid can render class diagrams.
class Zebra{ class Zebra{
+bool is_wild +bool is_wild
+run() +run()
} }
``` ```
## Syntax ## Syntax
@@ -109,7 +109,7 @@ Mermaid distinguishes between attributes and functions/methods based on if the *
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 : 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 :
- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
``` ```
class BankAccount class BankAccount
@@ -118,6 +118,7 @@ There are two ways to define the members of a class, and regardless of whichever
BankAccount : +deposit(amount) BankAccount : +deposit(amount)
BankAccount : +withdrawl(amount) BankAccount : +withdrawl(amount)
``` ```
``` mermaid ``` mermaid
classDiagram classDiagram
class BankAccount class BankAccount
@@ -125,7 +126,7 @@ There are two ways to define the members of a class, and regardless of whichever
BankAccount : +BigDecimal balance BankAccount : +BigDecimal balance
BankAccount : +deposit(amount) BankAccount : +deposit(amount)
BankAccount : +withdrawl(amount) BankAccount : +withdrawl(amount)
``` ```
- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example: - Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
``` ```
@@ -137,7 +138,7 @@ class BankAccount{
} }
``` ```
```mermaid ```mermaid
classDiagram classDiagram
class BankAccount{ class BankAccount{
+String owner +String owner
+BigDecimal balance +BigDecimal balance
@@ -161,7 +162,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes
## Defining Relationship ## Defining Relationship
A relationship is a general term covering the specific types of logical connections found on class and object diagrams. A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
``` ```
[classA][Arrow][ClassB]:LabelText [classA][Arrow][ClassB]:LabelText
``` ```
@@ -174,7 +175,7 @@ Type | Description
*-- | Composition *-- | Composition
o-- | Aggregation o-- | Aggregation
--> | Association --> | Association
-- | Link (Solid) -- | Link (Solid)
..> | Dependency ..> | Dependency
..\|> | Realization ..\|> | Realization
.. | Link (Dashed) .. | Link (Dashed)
@@ -231,7 +232,7 @@ classO .. classP : Link(Dashed)
``` ```
## Labels on Relations ## Labels on Relations
It is possible to add a label text to a relation: It is possible to add a label text to a relation:
``` ```
@@ -252,7 +253,7 @@ classE o-- classF : association
## Cardinality / Multiplicity on relations ## Cardinality / Multiplicity on relations
Multiplicity or cardinality in class diagrams indicates the number of instances of one class linked to one instance of the other class. For example, one company will have one or more employees, but each employee works for just one company. Multiplicity or cardinality in class diagrams indicates the number of instances of one class linked to one instance of the other class. For example, one company will have one or more employees, but each employee works for just one company.
Multiplicity notations are placed near the ends of an association. Multiplicity notations are placed near the ends of an association.
The different cardinality options are : The different cardinality options are :
- `0..1` Zero or one - `0..1` Zero or one
@@ -280,7 +281,7 @@ classDiagram
Student "1" --> "1..*" Course Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains Galaxy --> "many" Star : Contains
``` ```
## Annotations on classes ## Annotations on classes
It is possible to annotate classes with a specific marker text which is like meta-data for the class, giving a clear indication about its nature. Some common annotations examples could be: It is possible to annotate classes with a specific marker text which is like meta-data for the class, giving a clear indication about its nature. Some common annotations examples could be:
- `<<Interface>>` To represent an Interface class - `<<Interface>>` To represent an Interface class
@@ -359,7 +360,7 @@ class Shape{
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'`. 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'`.
You would define these actions on a separate line after all classes have been declared. You would define these actions on a separate line after all classes have been declared.
``` ```
action className "reference" "tooltip" action className "reference" "tooltip"
@@ -460,7 +461,7 @@ Class | Description
--- | --- --- | ---
g.classGroup text | Styles for general class text g.classGroup text | Styles for general class text
classGroup .title | Styles for general class title classGroup .title | Styles for general class title
g.classGroup rect | Styles for class diagram rectangle g.classGroup rect | Styles for class diagram rectangle
g.classGroup line | Styles for class diagram line g.classGroup line | Styles for class diagram line
.classLabel .box | Styles for class label box .classLabel .box | Styles for class label box
.classLabel .label | Styles for class label text .classLabel .label | Styles for class label text

15
docs/mermaidAPI.md
View File

@@ -27,6 +27,7 @@ mermaid.initialize({
**Example 2:** **Example 2:**
<pre> <pre>
<script>
var config = { var config = {
startOnLoad:true, startOnLoad:true,
flowchart:{ flowchart:{
@@ -38,6 +39,8 @@ mermaid.initialize({
securityLevel:'loose', securityLevel:'loose',
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script>
</pre> </pre>
A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). A description of each option follows below. A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). A description of each option follows below.
@@ -102,18 +105,6 @@ Flag for setting whether or not a html tag should be used for rendering labels
on the edges. on the edges.
**Default value true**. **Default value true**.
### nodeSpacing
Defines the spacing between nodes on the same level (meaning horizontal spacing for
TB or BT graphs, and the vertical spacing for LR as well as RL graphs).
**Default value 50**.
### rankSpacing
Defines the spacing between nodes on different levels (meaning vertical spacing for
TB or BT graphs, and the horizontal spacing for LR as well as RL graphs).
**Default value 50**.
### curve ### curve
How mermaid renders curves for flowcharts. Possible values are How mermaid renders curves for flowcharts. Possible values are