Skip to content

Commit

Permalink
Merge branch 'master' of github.com:mermaid-js/mermaid
Browse files Browse the repository at this point in the history
# Conflicts:
#	docs/classDiagram.md
  • Loading branch information
knsv committed Jan 11, 2020
2 parents ce02d1d + d53e00f commit 0a5ee06
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 25 deletions.
27 changes: 14 additions & 13 deletions docs/classDiagram.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Mermaid can render class diagrams.
+bool is_wild
+run()
}
```
```mermaid
classDiagram
Expand All @@ -52,8 +52,8 @@ Mermaid can render class diagrams.
class Zebra{
+bool is_wild
+run()
}
}
```

## Syntax
Expand Down Expand Up @@ -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 :
- 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
Expand All @@ -118,14 +118,15 @@ There are two ways to define the members of a class, and regardless of whichever
BankAccount : +deposit(amount)
BankAccount : +withdrawl(amount)
```

``` mermaid
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(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:
```
Expand All @@ -137,7 +138,7 @@ class BankAccount{
}
```
```mermaid
classDiagram
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
Expand All @@ -161,7 +162,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes

## 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
```
Expand All @@ -174,7 +175,7 @@ Type | Description
*-- | Composition
o-- | Aggregation
--> | Association
-- | Link (Solid)
-- | Link (Solid)
..> | Dependency
..\|> | Realization
.. | Link (Dashed)
Expand Down Expand Up @@ -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:
```
Expand All @@ -252,7 +253,7 @@ classE o-- classF : association
## 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 notations are placed near the ends of an association.
Multiplicity notations are placed near the ends of an association.

The different cardinality options are :
- `0..1` Zero or one
Expand Down Expand Up @@ -280,7 +281,7 @@ classDiagram
Student "1" --> "1..*" Course
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:
- `<<Interface>>` To represent an Interface class
Expand Down Expand Up @@ -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'`.

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"
Expand Down Expand Up @@ -460,7 +461,7 @@ Class | Description
--- | ---
g.classGroup text | Styles for general class text
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
.classLabel .box | Styles for class label box
.classLabel .label | Styles for class label text
Expand Down
15 changes: 3 additions & 12 deletions docs/mermaidAPI.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ mermaid.initialize({
**Example 2:**

<pre>
<script>
var config = {
startOnLoad:true,
flowchart:{
Expand All @@ -38,6 +39,8 @@ mermaid.initialize({
securityLevel:'loose',
};
mermaid.initialize(config);
</script>

</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.

Expand Down Expand Up @@ -102,18 +105,6 @@ Flag for setting whether or not a html tag should be used for rendering labels
on the edges.
**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

How mermaid renders curves for flowcharts. Possible values are
Expand Down

0 comments on commit 0a5ee06

Please sign in to comment.