mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-01 10:06:25 +01:00
sync last changes
This commit is contained in:
@@ -15,7 +15,9 @@ Mermaid can render class diagrams.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
note "From Duck till Zebra"
|
||||
Animal <|-- Duck
|
||||
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
@@ -39,7 +41,9 @@ classDiagram
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
note "From Duck till Zebra"
|
||||
Animal <|-- Duck
|
||||
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
@@ -553,6 +557,10 @@ You would define these actions on a separate line after all classes have been de
|
||||
- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
|
||||
- note: callback function will be called with the nodeId as parameter.
|
||||
|
||||
## Notes
|
||||
|
||||
It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
|
||||
|
||||
### Examples
|
||||
|
||||
_URL Link:_
|
||||
|
||||
@@ -114,10 +114,34 @@ Cardinality is a property that describes how many elements of another entity can
|
||||
| `}o` | `o{` | Zero or more (no upper limit) |
|
||||
| `}\|` | `\|{` | One or more (no upper limit) |
|
||||
|
||||
**Aliases**
|
||||
|
||||
| Value (left) | Value (right) | Alias for |
|
||||
| :----------: | :-----------: | ------------ |
|
||||
| one or zero | one or zero | Zero or one |
|
||||
| zero or one | zero or one | Zero or one |
|
||||
| one or more | one or more | One or more |
|
||||
| one or many | one or many | One or more |
|
||||
| many(1) | many(1) | One or more |
|
||||
| 1+ | 1+ | One or more |
|
||||
| zero or more | zero or more | Zero or more |
|
||||
| zero or many | zero or many | Zero or more |
|
||||
| many(0) | many(1) | Zero or more |
|
||||
| 0+ | 0+ | Zero or more |
|
||||
| only one | only one | Exactly one |
|
||||
| 1 | 1 | Exactly one |
|
||||
|
||||
### Identification
|
||||
|
||||
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
|
||||
|
||||
**Aliases**
|
||||
|
||||
| Value | Alias for |
|
||||
| :-----------: | :---------------: |
|
||||
| to | _identifying_ |
|
||||
| optionally to | _non-identifying_ |
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
@@ -222,6 +246,7 @@ erDiagram
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
MANUFACTURER only one to zero or more CAR
|
||||
```
|
||||
|
||||
```mermaid
|
||||
@@ -240,6 +265,7 @@ erDiagram
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
MANUFACTURER only one to zero or more CAR
|
||||
```
|
||||
|
||||
### Other Things
|
||||
|
||||
@@ -10,7 +10,7 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
|
||||
|
||||
It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
|
||||
|
||||
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
|
||||
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).
|
||||
|
||||
### A node (default)
|
||||
|
||||
@@ -787,10 +787,10 @@ Beginner's tip—a full example using interactive links in a html context:
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
var callback = function () {
|
||||
const callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
var config = {
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
|
||||
securityLevel: 'loose',
|
||||
@@ -882,13 +882,13 @@ A shorter form of adding a class is to attach the classname to the node using th
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A:::someclass --> B
|
||||
classDef someclass fill:#f96;
|
||||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A:::someclass --> B
|
||||
classDef someclass fill:#f96;
|
||||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
### Css classes
|
||||
|
||||
@@ -32,7 +32,7 @@ Drawing a pie chart is really simple in mermaid.
|
||||
- Start with `pie` keyword to begin the diagram
|
||||
- `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
|
||||
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
|
||||
- Followed by dataSet
|
||||
- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
|
||||
- `label` for a section in the pie diagram within `" "` quotes.
|
||||
- Followed by `:` colon as separator
|
||||
- Followed by `positive numeric value` (supported upto two decimal places)
|
||||
|
||||
@@ -24,12 +24,11 @@ sequenceDiagram
|
||||
Alice-)John: See you later!
|
||||
```
|
||||
|
||||
> **Note**\
|
||||
> A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
|
||||
```note
|
||||
A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
|
||||
|
||||
If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\[], to enclose the word "end". i.e : (end), \[end], {end}.
|
||||
|
||||
>
|
||||
If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
|
||||
Reference in New Issue
Block a user