mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-08 00:29:39 +02:00
Merge branch 'develop' into next
* develop: (62 commits) Draft release on master docs: Add release version Revert "fix: render the participants in same order as they are created" Revert "Feature/4935 subgraph title margin config option" Fix typo add inadvertent tracking removal update announcement bar Update integrations-community.md (Add Codemia to the list of productivity tools using Mermaid.) v10.7.0 10.6.2-rc.3 docs: Remove broken integration chore: Minor cleanup of imperativeState chore(deps): update all minor dependencies adds corresponding change in docs/ecosystem Adds Unison programming language to community integrations list update verbiage update verbiage add jetbrains blog post additional updates Fixed parser/tests ...
This commit is contained in:
@@ -240,9 +240,9 @@ class BankAccount{
|
||||
|
||||
#### Generic Types
|
||||
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
|
||||
Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
|
||||
> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
@@ -459,9 +459,9 @@ The different cardinality options are :
|
||||
- `0..1` Zero or One
|
||||
- `1..*` One or more
|
||||
- `*` Many
|
||||
- `n` n {where n>1}
|
||||
- `0..n` zero to n {where n>1}
|
||||
- `1..n` one to n {where n>1}
|
||||
- `n` n (where n>1)
|
||||
- `0..n` zero to n (where n>1)
|
||||
- `1..n` one to n (where n>1)
|
||||
|
||||
Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
|
||||
|
||||
@@ -766,9 +766,30 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
||||
|
||||
## Styling
|
||||
|
||||
### Styling a node
|
||||
### Styling a node (v10.7.0+)
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
class Animal
|
||||
class Mineral
|
||||
style Animal fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Animal
|
||||
class Mineral
|
||||
style Animal fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
#### 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. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
@@ -11,6 +11,13 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
|
||||
> **Warning**
|
||||
> If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
|
||||
|
||||
> **Warning**
|
||||
> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
|
||||
>
|
||||
> Typing "A---oB" will create a [circle edge](#circle-edge-example).
|
||||
>
|
||||
> Typing "A---xB" will create a [cross edge](#cross-edge-example).
|
||||
|
||||
### A node (default)
|
||||
|
||||
```mermaid-example
|
||||
@@ -488,23 +495,38 @@ flowchart TB
|
||||
B --> D
|
||||
```
|
||||
|
||||
### New arrow types
|
||||
## New arrow types
|
||||
|
||||
There are new types of arrows supported as per below:
|
||||
There are new types of arrows supported:
|
||||
|
||||
- circle edge
|
||||
- cross edge
|
||||
|
||||
### Circle edge example
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A --o B
|
||||
B --x C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A --o B
|
||||
B --x C
|
||||
```
|
||||
|
||||
### Multi directional arrows
|
||||
### Cross edge example
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A --x B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A --x B
|
||||
```
|
||||
|
||||
## Multi directional arrows
|
||||
|
||||
There is the possibility to use multidirectional arrows.
|
||||
|
||||
|
@@ -131,6 +131,14 @@ sequenceDiagram
|
||||
Bob->>Alice: I agree
|
||||
```
|
||||
|
||||
#### Unfixable actor/participant creation/deletion error
|
||||
|
||||
If an error of the following type occurs when creating or deleting an actor/participant:
|
||||
|
||||
> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
|
||||
|
||||
And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
|
||||
|
||||
### Grouping / Box
|
||||
|
||||
The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
|
||||
|
Reference in New Issue
Block a user