mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-24 09:49:46 +02:00
Merge branch 'next' into feat/948_packetDiagram
* next: (316 commits) Lint Remove echo RefTest Echo event Update cypress Fix applitools Fix applitools docs: fix lint docs: move community to Discord Swap condition blocks to avoid using negation Reposition const declaration to ideal place Change repetitive values into consts docs: fix swimm link Fix Update Browserslist Use pnpm/action-setup@v2 Fix lint Cleanup e2e.yml Ignore push events on merge queue Remove :: Remove :: ...
This commit is contained in:
Sidharth Vinod
@@ -143,9 +143,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
|
||||
@@ -304,9 +304,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:
|
||||
|
||||
@@ -518,9 +518,22 @@ 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
|
||||
```
|
||||
|
||||
#### 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>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Flowcharts Syntax
|
||||
outline: 'deep' # shows all h3 headings in outline in Vitepress
|
||||
---
|
||||
|
||||
# Flowcharts - Basic Syntax
|
||||
@@ -11,6 +10,14 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
|
||||
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
|
||||
@@ -306,17 +313,28 @@ 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
|
||||
```
|
||||
|
||||
### Multi directional arrows
|
||||
### Cross edge example
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A --x B
|
||||
```
|
||||
|
||||
## Multi directional arrows
|
||||
|
||||
There is the possibility to use multidirectional arrows.
|
||||
|
||||
@@ -757,7 +775,19 @@ flowchart TD
|
||||
B-->E(A fa:fa-camera-retro perhaps?)
|
||||
```
|
||||
|
||||
Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
|
||||
Mermaid supports Font Awesome if the CSS is included on the website.
|
||||
Mermaid does not have any restriction on the version of Font Awesome that can be used.
|
||||
|
||||
Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
|
||||
|
||||
Adding this snippet in the `<head>` would add support for Font Awesome v6.5.1
|
||||
|
||||
```html
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
```
|
||||
|
||||
## Graph declarations with spaces between vertices and link and without semicolon
|
||||
|
||||
|
||||
@@ -63,7 +63,30 @@ gantt
|
||||
Add another diagram to demo page :48h
|
||||
```
|
||||
|
||||
It is possible to set multiple dependencies separated by space:
|
||||
Tasks are by default sequential. A task start date defaults to the end date of the preceding task.
|
||||
|
||||
A colon, `:`, separates the task title from its metadata.
|
||||
Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
|
||||
After processing the tags, the remaining metadata items are interpreted as follows:
|
||||
|
||||
1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
|
||||
2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
|
||||
3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later <taskID>` syntax.
|
||||
|
||||
| Metadata syntax | Start date | End date | ID |
|
||||
| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- |
|
||||
| `<taskID>, <startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, <startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <endDate>` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` |
|
||||
| `<startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a |
|
||||
| `after <otherTaskID>, <endDate>` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `after <otherTaskID>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a |
|
||||
| `<endDate>` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<length>` | End date of preceding task | Start date + `length` | n/a |
|
||||
|
||||
For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
@@ -325,11 +348,21 @@ mermaid.ganttConfig can be set to a JSON string with config parameters or the co
|
||||
|
||||
```javascript
|
||||
mermaid.ganttConfig = {
|
||||
titleTopMargin: 25,
|
||||
barHeight: 20,
|
||||
barGap: 4,
|
||||
topPadding: 75,
|
||||
sidePadding: 75,
|
||||
titleTopMargin: 25, // Margin top for the text over the diagram
|
||||
barHeight: 20, // The height of the bars in the graph
|
||||
barGap: 4, // The margin between the different activities in the gantt diagram
|
||||
topPadding: 75, // Margin between title and gantt diagram and between axis and gantt diagram.
|
||||
rightPadding: 75, // The space allocated for the section name to the right of the activities
|
||||
leftPadding: 75, // The space allocated for the section name to the left of the activities
|
||||
gridLineStartPadding: 10, // Vertical starting position of the grid lines
|
||||
fontSize: 12, // Font size
|
||||
sectionFontSize: 24, // Font size for sections
|
||||
numberSectionStyles: 1, // The number of alternating section styles
|
||||
axisFormat: '%d/%m', // Date/time format of the axis
|
||||
tickInterval: '1 week', // Axis ticks
|
||||
topAxis: true, // When this flag is set, date labels will be added to the top of the chart
|
||||
displayMode: 'compact', // Turns compact mode on
|
||||
weekday: 'sunday', // On which day a week-based interval should start
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@@ -244,24 +244,29 @@ A few important rules to note here are:
|
||||
1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
|
||||
2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
|
||||
3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
|
||||
4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
|
||||
5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
|
||||
|
||||
Let see an example:
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
commit id:"TWO"
|
||||
cherry-pick id:"A"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
branch release
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
merge develop id:"MERGE"
|
||||
commit id:"TWO"
|
||||
checkout release
|
||||
cherry-pick id:"MERGE" parent:"B"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
```
|
||||
|
||||
## Gitgraph specific configuration options
|
||||
|
||||
@@ -83,6 +83,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