mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-14 09:44:51 +01:00
Merge branch 'develop' into saurabh/refactor-fontawesome-icon-usage
This commit is contained in:
Sidharth Vinod
@@ -92,7 +92,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
|
||||
|
||||
Where:
|
||||
|
||||
- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens.
|
||||
- `first-entity` is the name of an entity. Names support any unicode characters and can include spaces if surrounded by double quotes (e.g. "name with space").
|
||||
- `relationship` describes the way that both entities inter-relate. See below.
|
||||
- `second-entity` is the name of the other entity.
|
||||
- `relationship-label` describes the relationship from the perspective of the first entity.
|
||||
@@ -107,6 +107,34 @@ This statement can be read as _a property contains one or more rooms, and a room
|
||||
|
||||
Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
|
||||
|
||||
#### Unicode text
|
||||
|
||||
Entity names, relationships, and attributes all support unicode text.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
"This ❤ Unicode"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
"This ❤ Unicode"
|
||||
```
|
||||
|
||||
#### Markdown formatting
|
||||
|
||||
Markdown formatting and text is also supported.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
"This **is** _Markdown_"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
"This **is** _Markdown_"
|
||||
```
|
||||
|
||||
### Relationship Syntax
|
||||
|
||||
The `relationship` part of each statement can be broken down into three sub-components:
|
||||
@@ -145,6 +173,11 @@ Cardinality is a property that describes how many elements of another entity can
|
||||
|
||||
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:
|
||||
|
||||
| Value | Alias for |
|
||||
| :---: | :---------------: |
|
||||
| -- | _identifying_ |
|
||||
| .. | _non-identifying_ |
|
||||
|
||||
**Aliases**
|
||||
|
||||
| Value | Alias for |
|
||||
@@ -155,13 +188,25 @@ Relationships may be classified as either _identifying_ or _non-identifying_ and
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON }o..o{ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON }o..o{ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR 1 to zero or more NAMED-DRIVER : allows
|
||||
PERSON many(0) optionally to 0+ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR 1 to zero or more NAMED-DRIVER : allows
|
||||
PERSON many(0) optionally to 0+ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
### Attributes
|
||||
@@ -202,9 +247,9 @@ erDiagram
|
||||
|
||||
The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
||||
|
||||
### Entity Name Aliases (v10.5.0+)
|
||||
### Entity Name Aliases
|
||||
|
||||
An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.
|
||||
An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. Alias names follow all of the same rules as entity names.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
@@ -232,7 +277,7 @@ erDiagram
|
||||
|
||||
#### Attribute Keys and Comments
|
||||
|
||||
Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key. To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`). A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
|
||||
Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key (markdown formatting and unicode is not supported for keys). To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`). A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
@@ -282,35 +327,344 @@ erDiagram
|
||||
MANUFACTURER only one to zero or more CAR : makes
|
||||
```
|
||||
|
||||
### Other Things
|
||||
### Direction
|
||||
|
||||
- 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
|
||||
- (v11.1.0+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
|
||||
The direction statement declares the direction of the diagram.
|
||||
|
||||
## Styling
|
||||
This declares that the diagram is oriented from top to bottom (`TB`). This can be reversed to be oriented from bottom to top (`BT`).
|
||||
|
||||
### Config options
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
direction TB
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
For simple color customization:
|
||||
```mermaid
|
||||
erDiagram
|
||||
direction TB
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
| Name | Used as |
|
||||
| :------- | :------------------------------------------------------------------- |
|
||||
| `fill` | Background color of an entity or attribute |
|
||||
| `stroke` | Border color of an entity or attribute, line color of a relationship |
|
||||
This declares that the diagram is oriented from left to right (`LR`). This can be reversed to be oriented from right to left (`RL`).
|
||||
|
||||
### Classes used
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
direction LR
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
The following CSS class selectors are available for richer styling:
|
||||
```mermaid
|
||||
erDiagram
|
||||
direction LR
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
| Selector | Description |
|
||||
| :------------------------- | :---------------------------------------------------- |
|
||||
| `.er.attributeBoxEven` | The box containing attributes on even-numbered rows |
|
||||
| `.er.attributeBoxOdd` | The box containing attributes on odd-numbered rows |
|
||||
| `.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 |
|
||||
Possible diagram orientations are:
|
||||
|
||||
- TB - Top to bottom
|
||||
- BT - Bottom to top
|
||||
- RL - Right to left
|
||||
- LR - Left to right
|
||||
|
||||
### Styling a node
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to a node.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
id1||--||id2 : label
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
id1||--||id2 : label
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
It is also possible to attach styles to a list of nodes in one statement:
|
||||
|
||||
```
|
||||
style nodeId1,nodeId2 styleList
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look.
|
||||
|
||||
A class definition looks like the example below:
|
||||
|
||||
```
|
||||
classDef className fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
It is also possible to define multiple classes in one statement:
|
||||
|
||||
```
|
||||
classDef firstClassName,secondClassName font-size:12pt
|
||||
```
|
||||
|
||||
Attachment of a class to a node is done as per below:
|
||||
|
||||
```
|
||||
class nodeId1 className
|
||||
```
|
||||
|
||||
It is also possible to attach a class to a list of nodes in one statement:
|
||||
|
||||
```
|
||||
class nodeId1,nodeId2 className
|
||||
```
|
||||
|
||||
Multiple classes can be attached at the same time as well:
|
||||
|
||||
```
|
||||
class nodeId1,nodeId2 className1,className2
|
||||
```
|
||||
|
||||
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
direction TB
|
||||
CAR:::someclass {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON:::someclass {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
HOUSE:::someclass
|
||||
|
||||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
direction TB
|
||||
CAR:::someclass {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON:::someclass {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
HOUSE:::someclass
|
||||
|
||||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
This form can be used when declaring relationships between entities:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
PERSON:::foo ||--|| CAR : owns
|
||||
PERSON o{--|| HOUSE:::bar : has
|
||||
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
PERSON:::foo ||--|| CAR : owns
|
||||
PERSON o{--|| HOUSE:::bar : has
|
||||
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
Similar to the class statement, the shorthand syntax can also apply multiple classes at once:
|
||||
|
||||
```
|
||||
nodeId:::className1,className2
|
||||
```
|
||||
|
||||
### Default class
|
||||
|
||||
If a class is named default it will be assigned to all classes without specific class definitions.
|
||||
|
||||
```
|
||||
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
> **Note:** Custom styles from style or other class statements take priority and will overwrite the default styles. (e.g. The `default` class gives nodes a background color of pink but the `blue` class will give that node a background color of blue if applied.)
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
PERSON:::foo ||--|| CAR : owns
|
||||
PERSON o{--|| HOUSE:::bar : has
|
||||
|
||||
classDef default fill:#f9f,stroke-width:4px
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
PERSON:::foo ||--|| CAR : owns
|
||||
PERSON o{--|| HOUSE:::bar : has
|
||||
|
||||
classDef default fill:#f9f,stroke-width:4px
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### Layout
|
||||
|
||||
The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
|
||||
|
||||
For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
|
||||
|
||||
```yaml
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
```
|
||||
|
||||
Your Mermaid code should be similar to the following:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: Order example
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Order example
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
```
|
||||
|
||||
> **Note**
|
||||
> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
|
||||
|
||||
<!--- cspell:locale en,en-gb --->
|
||||
|
||||
@@ -1193,12 +1193,12 @@ To give an edge an ID, prepend the edge syntax with the ID followed by an `@` ch
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
```
|
||||
|
||||
In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
|
||||
@@ -1229,13 +1229,13 @@ In the initial version, two animation speeds are supported: `fast` and `slow`. S
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
e1@{ animation: fast }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
e1@{ animation: fast }
|
||||
```
|
||||
|
||||
@@ -1247,14 +1247,14 @@ You can also animate edges by assigning a class to them and then defining animat
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
|
||||
class e1 animate
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A e1@–> B
|
||||
A e1@--> B
|
||||
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
|
||||
class e1 animate
|
||||
```
|
||||
|
||||
253
docs/syntax/radar.md
Normal file
253
docs/syntax/radar.md
Normal file
@@ -0,0 +1,253 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/radar.md](../../packages/mermaid/src/docs/syntax/radar.md).
|
||||
|
||||
# Radar Diagram (v11.6.0+)
|
||||
|
||||
## Introduction
|
||||
|
||||
A radar diagram is a simple way to plot low-dimensional data in a circular format.
|
||||
|
||||
It is also known as a **radar chart**, **spider chart**, **star chart**, **cobweb chart**, **polar chart**, or **Kiviat diagram**.
|
||||
|
||||
## Usage
|
||||
|
||||
This diagram type is particularly useful for developers, data scientists, and engineers who require a clear and concise way to represent data in a circular format.
|
||||
|
||||
It is commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions.
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
radar-beta
|
||||
axis A, B, C, D, E
|
||||
curve c1{1,2,3,4,5}
|
||||
curve c2{5,4,3,2,1}
|
||||
... More Fields ...
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: "Grades"
|
||||
---
|
||||
radar-beta
|
||||
axis m["Math"], s["Science"], e["English"]
|
||||
axis h["History"], g["Geography"], a["Art"]
|
||||
curve a["Alice"]{85, 90, 80, 70, 75, 90}
|
||||
curve b["Bob"]{70, 75, 85, 80, 90, 85}
|
||||
|
||||
max 100
|
||||
min 0
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: "Grades"
|
||||
---
|
||||
radar-beta
|
||||
axis m["Math"], s["Science"], e["English"]
|
||||
axis h["History"], g["Geography"], a["Art"]
|
||||
curve a["Alice"]{85, 90, 80, 70, 75, 90}
|
||||
curve b["Bob"]{70, 75, 85, 80, 90, 85}
|
||||
|
||||
max 100
|
||||
min 0
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
radar-beta
|
||||
title Restaurant Comparison
|
||||
axis food["Food Quality"], service["Service"], price["Price"]
|
||||
axis ambiance["Ambiance"],
|
||||
|
||||
curve a["Restaurant A"]{4, 3, 2, 4}
|
||||
curve b["Restaurant B"]{3, 4, 3, 3}
|
||||
curve c["Restaurant C"]{2, 3, 4, 2}
|
||||
curve d["Restaurant D"]{2, 2, 4, 3}
|
||||
|
||||
graticule polygon
|
||||
max 5
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
radar-beta
|
||||
title Restaurant Comparison
|
||||
axis food["Food Quality"], service["Service"], price["Price"]
|
||||
axis ambiance["Ambiance"],
|
||||
|
||||
curve a["Restaurant A"]{4, 3, 2, 4}
|
||||
curve b["Restaurant B"]{3, 4, 3, 3}
|
||||
curve c["Restaurant C"]{2, 3, 4, 2}
|
||||
curve d["Restaurant D"]{2, 2, 4, 3}
|
||||
|
||||
graticule polygon
|
||||
max 5
|
||||
|
||||
```
|
||||
|
||||
## Details of Syntax
|
||||
|
||||
### Title
|
||||
|
||||
`title`: The title is an optional field that allows to render a title at the top of the radar diagram.
|
||||
|
||||
```
|
||||
radar-beta
|
||||
title Title of the Radar Diagram
|
||||
...
|
||||
```
|
||||
|
||||
### Axis
|
||||
|
||||
`axis`: The axis keyword is used to define the axes of the radar diagram.
|
||||
|
||||
Each axis is represented by an ID and an optional label.
|
||||
|
||||
Multiple axes can be defined in a single line.
|
||||
|
||||
```
|
||||
radar-beta
|
||||
axis id1["Label1"]
|
||||
axis id2["Label2"], id3["Label3"]
|
||||
...
|
||||
```
|
||||
|
||||
### Curve
|
||||
|
||||
`curve`: The curve keyword is used to define the data points for a curve in the radar diagram.
|
||||
|
||||
Each curve is represented by an ID, an optional label, and a list of values.
|
||||
|
||||
Values can be defined by a list of numbers or a list of key-value pairs. If key-value pairs are used, the key represents the axis ID and the value represents the data point. Else, the data points are assumed to be in the order of the axes defined.
|
||||
|
||||
Multiple curves can be defined in a single line.
|
||||
|
||||
```
|
||||
radar-beta
|
||||
axis axis1, axis2, axis3
|
||||
curve id1["Label1"]{1, 2, 3}
|
||||
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
|
||||
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
|
||||
...
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
- `showLegend`: The showLegend keyword is used to show or hide the legend in the radar diagram. The legend is shown by default.
|
||||
- `max`: The maximum value for the radar diagram. This is used to scale the radar diagram. If not provided, the maximum value is calculated from the data points.
|
||||
- `min`: The minimum value for the radar diagram. This is used to scale the radar diagram. If not provided, the minimum value is `0`.
|
||||
- `graticule`: The graticule keyword is used to define the type of graticule to be rendered in the radar diagram. The graticule can be `circle` or `polygon`. If not provided, the default graticule is `circle`.
|
||||
- `ticks`: The ticks keyword is used to define the number of ticks on the graticule. It is the number of concentric circles or polygons drawn to indicate the scale of the radar diagram. If not provided, the default number of ticks is `5`.
|
||||
|
||||
```
|
||||
radar-beta
|
||||
...
|
||||
showLegend true
|
||||
max 100
|
||||
min 0
|
||||
graticule circle
|
||||
ticks 5
|
||||
...
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagram-config.html) guide for details.
|
||||
|
||||
| Parameter | Description | Default Value |
|
||||
| --------------- | ---------------------------------------- | ------------- |
|
||||
| width | Width of the radar diagram | `600` |
|
||||
| height | Height of the radar diagram | `600` |
|
||||
| marginTop | Top margin of the radar diagram | `50` |
|
||||
| marginBottom | Bottom margin of the radar diagram | `50` |
|
||||
| marginLeft | Left margin of the radar diagram | `50` |
|
||||
| marginRight | Right margin of the radar diagram | `50` |
|
||||
| axisScaleFactor | Scale factor for the axis | `1` |
|
||||
| axisLabelFactor | Factor to adjust the axis label position | `1.05` |
|
||||
| curveTension | Tension for the rounded curves | `0.17` |
|
||||
|
||||
## Theme Variables
|
||||
|
||||
### Global Theme Variables
|
||||
|
||||
> **Note**
|
||||
> The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:
|
||||
> %%{init: {"themeVariables": {"cScale0": "#FF0000", "cScale1": "#00FF00"}} }%%
|
||||
|
||||
Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.
|
||||
|
||||
| Property | Description |
|
||||
| ---------- | ------------------------------ |
|
||||
| fontSize | Font size of the title |
|
||||
| titleColor | Color of the title |
|
||||
| cScale${i} | Color scale for the i-th curve |
|
||||
|
||||
### Radar Style Options
|
||||
|
||||
> **Note**
|
||||
> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.
|
||||
> %%{init: {"themeVariables": {"radar": {"axisColor": "#FF0000"}} } }%%
|
||||
|
||||
| Property | Description | Default Value |
|
||||
| -------------------- | ---------------------------- | ------------- |
|
||||
| axisColor | Color of the axis lines | `black` |
|
||||
| axisStrokeWidth | Width of the axis lines | `1` |
|
||||
| axisLabelFontSize | Font size of the axis labels | `12px` |
|
||||
| curveOpacity | Opacity of the curves | `0.7` |
|
||||
| curveStrokeWidth | Width of the curves | `2` |
|
||||
| graticuleColor | Color of the graticule | `black` |
|
||||
| graticuleOpacity | Opacity of the graticule | `0.5` |
|
||||
| graticuleStrokeWidth | Width of the graticule | `1` |
|
||||
| legendBoxSize | Size of the legend box | `10` |
|
||||
| legendFontSize | Font size of the legend | `14px` |
|
||||
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
radar:
|
||||
axisScaleFactor: 0.25
|
||||
curveTension: 0.1
|
||||
theme: base
|
||||
themeVariables:
|
||||
cScale0: "#FF0000"
|
||||
cScale1: "#00FF00"
|
||||
cScale2: "#0000FF"
|
||||
radar:
|
||||
curveOpacity: 0
|
||||
---
|
||||
radar-beta
|
||||
axis A, B, C, D, E
|
||||
curve c1{1,2,3,4,5}
|
||||
curve c2{5,4,3,2,1}
|
||||
curve c3{3,3,3,3,3}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
radar:
|
||||
axisScaleFactor: 0.25
|
||||
curveTension: 0.1
|
||||
theme: base
|
||||
themeVariables:
|
||||
cScale0: "#FF0000"
|
||||
cScale1: "#00FF00"
|
||||
cScale2: "#0000FF"
|
||||
radar:
|
||||
curveOpacity: 0
|
||||
---
|
||||
radar-beta
|
||||
axis A, B, C, D, E
|
||||
curve c1{1,2,3,4,5}
|
||||
curve c2{5,4,3,2,1}
|
||||
curve c3{3,3,3,3,3}
|
||||
```
|
||||
|
||||
<!--- cspell:ignore Kiviat --->
|
||||
@@ -84,6 +84,37 @@ element user_defined_name {
|
||||
}
|
||||
```
|
||||
|
||||
### Markdown Formatting
|
||||
|
||||
In places where user defined text is possible (like names, requirement text, element docref, etc.), you can:
|
||||
|
||||
- Surround the text in quotes: `"example text"`
|
||||
- Use markdown formatting inside quotes: `"**bold text** and *italics*"`
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement "__test_req__" {
|
||||
id: 1
|
||||
text: "*italicized text* **bold text**"
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement "__test_req__" {
|
||||
id: 1
|
||||
text: "*italicized text* **bold text**"
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
```
|
||||
|
||||
### Relationship
|
||||
|
||||
Relationships are comprised of a source node, destination node, and relationship type.
|
||||
@@ -250,4 +281,215 @@ This example uses all features of the diagram.
|
||||
test_req <- copies - test_entity2
|
||||
```
|
||||
|
||||
## Direction
|
||||
|
||||
The diagram can be rendered in different directions using the `direction` statement. Valid values are:
|
||||
|
||||
- `TB` - Top to Bottom (default)
|
||||
- `BT` - Bottom to Top
|
||||
- `LR` - Left to Right
|
||||
- `RL` - Right to Left
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
direction LR
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
direction LR
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
Requirements and elements can be styled using direct styling or classes. As a rule of thumb, when applying styles or classes, it accepts a list of requirement or element names and a list of class names allowing multiple assignments at a time (The only exception is the shorthand syntax `:::` which can assign multiple classes but only to one requirement or element at a time).
|
||||
|
||||
### Direct Styling
|
||||
|
||||
Use the `style` keyword to apply CSS styles directly:
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: styling example
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
style test_req fill:#ffa,stroke:#000, color: green
|
||||
style test_entity fill:#f9f,stroke:#333, color: blue
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: styling example
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
style test_req fill:#ffa,stroke:#000, color: green
|
||||
style test_entity fill:#f9f,stroke:#333, color: blue
|
||||
```
|
||||
|
||||
### Class Definitions
|
||||
|
||||
Define reusable styles using `classDef`:
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: "class styling example"
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
classDef important fill:#f96,stroke:#333,stroke-width:4px
|
||||
classDef test fill:#ffa,stroke:#000
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: "class styling example"
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
classDef important fill:#f96,stroke:#333,stroke-width:4px
|
||||
classDef test fill:#ffa,stroke:#000
|
||||
```
|
||||
|
||||
### Default class
|
||||
|
||||
If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.
|
||||
|
||||
```
|
||||
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
### Applying Classes
|
||||
|
||||
Classes can be applied in two ways:
|
||||
|
||||
1. Using the `class` keyword:
|
||||
|
||||
```
|
||||
class test_req,test_entity important
|
||||
```
|
||||
|
||||
2. Using the shorthand syntax with `:::` either during the definition or afterwards:
|
||||
|
||||
```
|
||||
requirement test_req:::important {
|
||||
id: 1
|
||||
text: class styling example
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
element test_elem {
|
||||
}
|
||||
|
||||
test_elem:::myClass
|
||||
```
|
||||
|
||||
### Combined Example
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::important {
|
||||
id: 1
|
||||
text: "class styling example"
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
classDef important font-weight:bold
|
||||
|
||||
class test_entity important
|
||||
style test_entity fill:#f9f,stroke:#333
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::important {
|
||||
id: 1
|
||||
text: "class styling example"
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
classDef important font-weight:bold
|
||||
|
||||
class test_entity important
|
||||
style test_entity fill:#f9f,stroke:#333
|
||||
```
|
||||
|
||||
<!--- cspell:ignore reqs --->
|
||||
|
||||
Reference in New Issue
Block a user