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

Merge branch 'develop' into release/8.6.0

Browse Source
This commit is contained in:
Neil Cuzon
2020-07-20 20:01:32 -07:00
committed by GitHub
parent dc8c27b1f9 a6ec038189
commit 575c34467f
54 changed files with 316878 additions and 24865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
docs/Setup.md
View File

@@ -89,14 +89,15 @@ theme , the CSS style sheet
## securityLevel
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
\*\*Notes:
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
## startOnLoad
@@ -128,6 +129,15 @@ overriding a site's default security.
The object containing configurations specific for flowcharts
### diagramPadding
| Parameter | Description | Type | Required | Values |
| -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
**Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
**Default value: 8**.
### htmlLabels
| Parameter | Description | Type | Required | Values |
@@ -711,9 +721,21 @@ T = top, B = bottom, L = left, and R = right.
| --------- | ------------------- | ------- | -------- | ------------------ |
| fontSize | Font Size in pixels | Integer | | Any Positive Value |
**Notes:**Font size (expressed as an integer representing a number of pixels)
**Notes:**Font size (expressed as an integer representing a number of pixels)
**Default value: 12 **
### useMaxWidth
| Parameter | Description | Type | Required | Values |
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See Notes | Boolean | Required | true, false |
**Notes:**
When this flag is set to true, the diagram width is locked to 100% and
scaled based on available space. If set to false, the diagram reserves its
absolute width.
**Default value: true**.
## render
Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -754,7 +776,19 @@ mermaidAPI.initialize({
startOnLoad:true,
arrowMarkerAbsolute:false,
er:{
diagramPadding:20,
layoutDirection:'TB',
minEntityWidth:100,
minEntityHeight:75,
entityPadding:15,
stroke:'gray',
fill:'honeydew',
fontSize:12,
useMaxWidth:true,
},
flowchart:{
diagramPadding:8,
htmlLabels:true,
curve:'linear',
},
@@ -794,11 +828,20 @@ mermaidAPI.initialize({
## setSiteConfig
## setSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes:**
Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
to the defaultConfig
Note: currentConfig is set in this function
\*Default value: At default, will mirror Global Config\*\*
### Parameters
- `conf` the base currentConfig to use as siteConfig
@@ -807,13 +850,27 @@ Returns **any** the siteConfig
## getSiteConfig
Obtains the current siteConfig base configuration
## getSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------------------- | ----------- | --------------------------------- |
| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
**Notes**:
Returns **any** values in siteConfig.
Returns **any**
## setConfig
Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
## setConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes**:
Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
values found in conf with key found in siteConfig.secure will be replaced with the corresponding
siteConfig value.
@@ -825,12 +882,25 @@ Returns **any** the currentConfig merged with the sanitized conf
## getConfig
Obtains the currentConfig
## getConfig
| Function | Description | Type | Return Values |
| --------- | ------------------------- | ----------- | ----------------------------- |
| getConfig | Obtains the currentConfig | Get Request | Any Values from currentConfig |
**Notes**:
Returns **any** the currentConfig
Returns **any** the currentConfig
## sanitize
## sanitize
| Function | Description | Type | Values |
| -------- | -------------------------------------- | ----------- | ------ |
| sanitize | Sets the siteConfig to desired values. | Put Request | None |
Ensures options parameter does not attempt to override siteConfig secure keys
Note: modifies options in-place
@@ -840,7 +910,18 @@ Note: modifies options in-place
## reset
Resets this currentConfig to conf
## reset
| Function | Description | Type | Required | Values |
| -------- | ---------------------------- | ----------- | -------- | ------ |
| reset | Resets currentConfig to conf | Put Request | Required | None |
| Parameter | Description | Type | Required | Values |
| --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
| conf | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
\*Notes :
(default: current siteConfig ) (optional, default `getSiteConfig()`)
### Parameters

54
docs/entityRelationshipDiagram.md
View File

@@ -5,17 +5,19 @@
Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
Mermaid can render ER diagrams
```
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
@@ -31,9 +33,11 @@ ER diagrams are a new feature in Mermaid and are **experimental**. There are li
### Entities and Relationships
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts, all of which are mandatory:
```
```mermaid
<first-entity> <relationship> <second-entity> : <relationship-label>
```
Where:
- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits and hyphens
@@ -43,7 +47,7 @@ Where:
For example:
```
```mermaid
PROPERTY ||--|{ ROOM : contains
```
@@ -51,9 +55,9 @@ This statement can be read as *a property contains one or more rooms, and a room
### Relationship Syntax
The `relationship` part of each statement can be broken down into three sub-components:
The `relationship` part of each statement can be broken down into three sub-components:
- the cardinality of the first entity with respect to the second,
- the cardinality of the first entity with respect to the second,
- whether the relationship confers identity on a 'child' entity
- the cardinality of the second entity with respect to the first
@@ -68,13 +72,37 @@ Cardinality is a property that describes how many elements of another entity can
### 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:
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:
```
```mermaid
CAR ||--o{ NAMED-DRIVER : allows
PERSON ||--o{ NAMED-DRIVER : is
```
### Other Things
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
- If you don't want a label at all on a relationship, you must use an empty double-quoted string
## Styling
### Config options
For simple color customization:
| Name | Used as |
| :------- | :------------------------------------------------------ |
| `fill` | Background color of an entity |
| `stroke` | Border color of an entity, line color of a relationship |
### Classes used
The following CSS class selectors are available for richer styling:
| Selector | Description |
| :------------------------- | :---------------------------------------------------- |
| `.er.entityBox` | The box representing an entity |
| `.er.entityLabel` | The label for an entity |
| `.er.relationshipLabel` | The label for a relationship |
| `.er.relationshipLabelBox` | The box surrounding a relationship label |
| `.er.relationshipLine` | The line representing a relationship between entities |