mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-22 00:40:22 +02:00
merge MERMAID/develop into branch; fix ts/es lint errors
This commit is contained in:
@@ -11,7 +11,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
|
||||
@@ -35,7 +37,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
|
||||
@@ -549,6 +553,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:_
|
||||
|
@@ -110,10 +110,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
|
||||
@@ -218,6 +242,7 @@ erDiagram
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
MANUFACTURER only one to zero or more CAR
|
||||
```
|
||||
|
||||
```mermaid
|
||||
@@ -236,6 +261,7 @@ erDiagram
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
MANUFACTURER only one to zero or more CAR
|
||||
```
|
||||
|
||||
### Other Things
|
||||
|
@@ -40,20 +40,20 @@
|
||||
};
|
||||
</script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"
|
||||
integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.nls.min.js"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.min.js"
|
||||
integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.min.js"
|
||||
integrity="sha512-iVHvVf6TQEoF5oQrocjP88wstImQHQZCxGsa5nKYOs6gXWzsV7QZHyk80HrXhrEWRJ1ADoIV6Uji3UUXtCmBMg=="
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.js"
|
||||
integrity="sha512-u4eMtetNbBJvHXdLXs2kWZvJiVlg3cmkVcxrLzSPa1eNFuHygPYvyMWyK9PsD6Eq2MZSo+mTyjds8uuhPzVxHA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
@@ -151,8 +151,9 @@
|
||||
hook.afterEach(function (html, next) {
|
||||
next(html);
|
||||
(async () => {
|
||||
while (!window.hasOwnProperty('monaco'))
|
||||
while (!window.hasOwnProperty('monaco')) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
}
|
||||
colorizeEverything(html).then(
|
||||
(newHTML) =>
|
||||
(document.querySelector('article.markdown-section').innerHTML = newHTML)
|
||||
@@ -170,7 +171,9 @@
|
||||
startOnLoad: false,
|
||||
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
|
||||
};
|
||||
if (isDarkMode) conf.theme = 'dark';
|
||||
if (isDarkMode) {
|
||||
conf.theme = 'dark';
|
||||
}
|
||||
mermaid.initialize(conf);
|
||||
</script>
|
||||
<script>
|
||||
|
@@ -28,7 +28,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)
|
||||
|
@@ -97,7 +97,7 @@ Messages can be of two displayed either solid or with a dotted line.
|
||||
|
||||
[Actor][Arrow][Actor]:Message text
|
||||
|
||||
There are six types of arrows currently supported:
|
||||
There are eight types of arrows currently supported:
|
||||
|
||||
| Type | Description |
|
||||
| ---- | ------------------------------------------------ |
|
||||
|
Reference in New Issue
Block a user