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

Merge branch 'develop' of https://github.com/mermaid-js/mermaid into xychart

Browse Source 
* 'develop' of https://github.com/mermaid-js/mermaid: (546 commits)
  rebuild
  chore: Use string templates
  chore: Update docs
  chore: Fix docs
  chore: Add argos token to cypress config.
  chore: Remove cy.get('svg') calls
  chore: fix Argos parallel
  chore: Support local screenshot testing without applitools or argos
  chore: Skip checking drupal links
  chore: Remove reference screenshot generation from E2E
  chore: Remove cytoscape patch.
  chore(argos): disable matchImageSnapshot
  chore(argos): put parallel mode only when necessary
  chore(argos): setup parallel mode
  chore: setup Argos Visual Testing on E2E
  Fixed linters
  Added more specs for elk detector
  Fixed wrong elk detector, check only beginning of the line for diagram keywords
  Removed unused patch
  Fix cytoscape patch
  ...
This commit is contained in:
Sidharth Vinod
2024-06-21 10:24:58 +05:30
parent 90be8dedf6 9f375139d5
commit 4f9cf4f9fc
474 changed files with 26979 additions and 18184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/syntax/block.md
View File

@@ -425,7 +425,7 @@ block-beta
ida space:3 idb idc
```
Note that you can set how many columns the spece block occupied using the number notaion `space:num` where num is a number indicating the num columns width. You can alsio use `space` which defaults to one column.
Note that you can set how many columns the space block occupied using the number notation `space:num` where num is a number indicating the num columns width. You can also use `space` which defaults to one column.
The variety of shapes and special blocks in Mermaid enhances the expressive power of block diagrams, allowing for more accurate and context-specific representations. These options give users the flexibility to create diagrams that are both informative and visually appealing. In the next sections, we will explore the ways to connect these blocks and customize their appearance.
@@ -636,11 +636,13 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
block-beta
A - B
```
block-beta
A - B
```
**Correction**:
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also rememeber that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
```mermaid-example
block-beta

8
docs/syntax/c4.md
View File

@@ -191,7 +191,7 @@ The following unfinished features are not supported in the short term.
- [x] Rel_L, Rel_Left
- [x] Rel_R, Rel_Right
- [x] Rel_Back
- [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
- [x] RelIndex \* Compatible with C4-PlantUML syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
- [ ] Custom tags/stereotypes support and skin param updates
- [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
@@ -320,7 +320,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
Container_Boundary(c1, "Internet Banking") {
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
@@ -360,7 +360,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
Container_Boundary(c1, "Internet Banking") {
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
@@ -621,3 +621,5 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
UpdateRelStyle(db, db2, $offsetY="-10")
```
<!--- cspell:ignore bigbank bigbankdb techn mbsfacade --->

36
docs/syntax/classDiagram.md
View File

@@ -8,7 +8,7 @@
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
>
> \-Wikipedia
> -Wikipedia
The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
@@ -240,7 +240,7 @@ class BankAccount{
#### Generic Types
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 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>>`)
> _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.
@@ -296,7 +296,9 @@ To describe the visibility (or encapsulation) of an attribute or method/function
A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
[classA][Arrow][ClassB]
```
[classA][Arrow][ClassB]
```
There are eight different types of relations defined for classes under UML which are currently supported:
@@ -369,7 +371,9 @@ classO .. classP : Link(Dashed)
It is possible to add label text to a relation:
[classA][Arrow][ClassB]:LabelText
```
[classA][Arrow][ClassB]:LabelText
```
```mermaid-example
classDiagram
@@ -401,7 +405,9 @@ classDiagram
Here is the syntax:
[Relation Type][Link][Relation Type]
```
[Relation Type][Link][Relation Type]
```
Where `Relation Type` can be one of:
@@ -465,7 +471,9 @@ The different cardinality options are :
Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
```
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
```
```mermaid-example
classDiagram
@@ -618,9 +626,11 @@ It is possible to bind a click event to a node. The click can lead to either a j
You would define these actions on a separate line after all classes have been declared.
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
```
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
```
- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
- _className_ is the id of the node that the action will be associated with
@@ -803,11 +813,15 @@ should have a different look. This is done by predefining classes in css styles
Then attaching that class to a specific node:
cssClass "nodeId1" styleClass;
```
cssClass "nodeId1" styleClass;
```
It is also possible to attach a class to a list of nodes in one statement:
cssClass "nodeId1,nodeId2" styleClass;
```
cssClass "nodeId1,nodeId2" styleClass;
```
A shorter form of adding a class is to attach the classname to the node using the `:::` operator:

16
docs/syntax/entityRelationshipDiagram.md
View File

@@ -6,7 +6,7 @@
# Entity Relationship Diagrams
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types) [Wikipedia](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model).
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.
@@ -86,7 +86,9 @@ When including attributes on ER diagrams, you must decide whether to include for
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
<first-entity> [<relationship> <second-entity> : <relationship-label>]
```
<first-entity> [<relationship> <second-entity> : <relationship-label>]
```
Where:
@@ -97,7 +99,9 @@ Where:
For example:
PROPERTY ||--|{ ROOM : contains
```
PROPERTY ||--|{ ROOM : contains
```
This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
@@ -107,7 +111,7 @@ Only the `first-entity` part of a statement is mandatory. This makes it possible
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
@@ -228,7 +232,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. 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
@@ -307,3 +311,5 @@ The following CSS class selectors are available for richer styling:
| `.er.relationshipLabel` | The label for a relationship |
| `.er.relationshipLabelBox` | The box surrounding a relationship label |
| `.er.relationshipLine` | The line representing a relationship between entities |
<!--- cspell:locale en,en-gb --->

6
docs/syntax/examples.md
View File

@@ -175,7 +175,7 @@ sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
@@ -189,7 +189,7 @@ sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
@@ -297,3 +297,5 @@ gitGraph:
branch b2
commit
```
<!--- cspell:ignore Ashish newbranch --->

100
docs/syntax/flowchart.md
View File

@@ -642,9 +642,11 @@ Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported
## Subgraphs
subgraph title
graph definition
end
```
subgraph title
graph definition
end
```
An example below:
@@ -850,6 +852,16 @@ Formatting:
This feature is applicable to node labels, edge labels, and subgraph labels.
The auto wrapping can be disabled by using
```
---
config:
markdownAutoWrap: false
---
graph LR
```
## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
@@ -857,8 +869,10 @@ It is possible to bind a click event to a node, the click can lead to either a j
> **Note**
> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
click nodeId callback
click nodeId call callback()
```
click nodeId callback
click nodeId call callback()
```
- nodeId is the id of the node
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
@@ -867,7 +881,7 @@ Examples of tooltip usage below:
```html
<script>
const callback = function () {
window.callback = function () {
alert('A callback was triggered');
};
</script>
@@ -899,7 +913,7 @@ flowchart LR
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/Ogglas/2o73vdez/7).
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/).
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
@@ -943,7 +957,7 @@ Beginner's tip—a full example using interactive links in a html context:
</pre>
<script>
const callback = function () {
window.callback = function () {
alert('A callback was triggered');
};
const config = {
@@ -981,11 +995,15 @@ have no ids in the same way as nodes, some other way of deciding what style the
Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links.
In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
```
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
```
It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
linkStyle 1,2,7 color:blue;
```
linkStyle 1,2,7 color:blue;
```
### Styling line curves
@@ -995,8 +1013,10 @@ Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRo
In this example, a left-to-right graph uses the `stepBefore` curve style:
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
```
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
```
For a full list of available curves, including an explanation of custom curves, refer to
the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
@@ -1027,19 +1047,27 @@ should have a different look.
A class definition looks like the example below:
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
```
Also, it is possible to define style to multiple classes in one statement:
classDef firstClassName,secondClassName font-size:12pt;
```
classDef firstClassName,secondClassName font-size:12pt;
```
Attachment of a class to a node is done as per below:
class nodeId1 className;
```
class nodeId1 className;
```
It is also possible to attach a class to a list of nodes in one statement:
class nodeId1,nodeId2 className;
```
class nodeId1,nodeId2 className;
```
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
@@ -1110,7 +1138,9 @@ flowchart LR
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;
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
## Basic support for fontawesome
@@ -1148,6 +1178,36 @@ Adding this snippet in the `<head>` would add support for Font Awesome v6.5.1
/>
```
### Custom icons
It is possible to use custom icons served from Font Awesome as long as the website imports the corresponding kit.
Note that this is currently a paid feature from Font Awesome.
For custom icons, you need to use the `fak` prefix.
**Example**
```
flowchart TD
B[fa:fa-twitter] %% standard icon
B-->E(fak:fa-custom-icon-name) %% custom icon
```
And trying to render it
```mermaid-example
flowchart TD
B["fa:fa-twitter for peace"]
B-->C["fab:fa-truck-bold a custom icon"]
```
```mermaid
flowchart TD
B["fa:fa-twitter for peace"]
B-->C["fab:fa-truck-bold a custom icon"]
```
## Graph declarations with spaces between vertices and link and without semicolon
- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
@@ -1183,7 +1243,9 @@ Starting with Mermaid version 9.4, you can use an alternate renderer named elk.
The _elk_ renderer is an experimental feature.
You can change the renderer to elk by adding this directive:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
```
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
```
> **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.
@@ -1200,3 +1262,5 @@ mermaid.flowchartConfig = {
width: 100%
}
```
<!--- cspell:ignore lagom --->

100
docs/syntax/gantt.md
View File

@@ -67,8 +67,8 @@ gantt
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
Functionality added :milestone, 2014-01-25, 0d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
@@ -100,8 +100,8 @@ gantt
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
Functionality added :milestone, 2014-01-25, 0d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
@@ -120,22 +120,30 @@ 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.
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 |
| 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` |
| `<taskID>, <startDate>, until <otherTaskId>` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | `taskID` |
| `<taskID>, after <otherTaskId>, until <otherTaskId>` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | `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 |
| `<startDate>, until <otherTaskId>` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | n/a |
| `after <otherTaskId>, until <otherTaskId>` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | 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 |
| `until <otherTaskId>` | End date of preceding task | Start date of previously specified task `otherTaskID` | n/a |
> **Note**
> Support for keyword `until` was added in (v10.9.0+). This can be used to define a task which is running until some other specific task or milestone starts.
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:
@@ -144,6 +152,7 @@ gantt
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2017-07-20, until b c
```
```mermaid
@@ -151,12 +160,45 @@ gantt
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2017-07-20, until b c
```
### Title
The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
### Excludes
The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
#### Weekend (v\<MERMAID_RELEASE_VERSION>+)
When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.
```mermaid-example
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat YYYY-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1, 20d
```
```mermaid
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat YYYY-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1, 20d
```
### Section statements
You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
@@ -294,11 +336,11 @@ gantt
weekday monday
```
> **Warning** > `millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
> **Warning** > `millisecond` and `second` support was added in v10.3.0
## Output in compact mode
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
```mermaid-example
---
@@ -426,11 +468,15 @@ Styling of the Gantt diagram is done by defining a number of CSS classes. During
You can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key.
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
```
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
```
To hide the marker, set `todayMarker` to `off`.
todayMarker off
```
todayMarker off
```
## Configuration
@@ -472,8 +518,10 @@ mermaid.ganttConfig = {
It is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
click taskId call callback(arguments)
click taskId href URL
```
click taskId call callback(arguments)
click taskId href URL
```
- taskId is the id of the task
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
@@ -549,3 +597,5 @@ gantt
section Issue1300
5 : 0, 5
```
<!--- cspell:ignore isadded --->

131
docs/syntax/gitgraph.md
View File

@@ -56,6 +56,8 @@ In Mermaid, we support the basic git operations like:
With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.
Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.
**NOTE**: `checkout` and `switch` can be used interchangeably.
## Syntax
Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
@@ -363,11 +365,11 @@ Here, a new commit representing the cherry-pick is created on the current branch
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.
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:
@@ -419,6 +421,7 @@ In Mermaid, you have the option to configure the gitgraph diagram. You can confi
- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
- `mainBranchName` : String, default is `main`. The name of the default/root branch.
- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.
- `parallelCommits`: Boolean, default is `false`. If set to `true`, commits x distance away from the parent are shown at the same level in the diagram.
Let's look at them one by one.
@@ -835,9 +838,9 @@ Here, we have changed the default main branch name to `MetroLine1`.
## Orientation (v10.3.0+)
Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**.
Mermaid supports three graph orientations: **Left-to-Right** (default), **Top-to-Bottom**, and **Bottom-to-Top**.
You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`.
You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)), `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) or `BT:` (for [**Bottom-to-Top**](#bottom-to-top-bt)) after `gitGraph`.
### Left to Right (default, `LR:`)
@@ -915,6 +918,116 @@ Usage example:
commit
```
### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+)
In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
To orient the graph this way, you need to add `BT:` after gitGraph.
Usage example:
```mermaid-example
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
```
```mermaid
gitGraph BT:
commit
commit
branch develop
commit
commit
checkout main
commit
commit
merge develop
commit
commit
```
## Parallel commits (v10.8.0+)
Commits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag.
### Temporal Commits (default, `parallelCommits: false`)
```mermaid-example
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
```
```mermaid
---
config:
gitGraph:
parallelCommits: false
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
```
### Parallel commits (`parallelCommits: true`)
```mermaid-example
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
```
```mermaid
---
config:
gitGraph:
parallelCommits: true
---
gitGraph:
commit
branch develop
commit
commit
checkout main
commit
commit
```
## Themes
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
@@ -1626,7 +1739,7 @@ See how the commit label color and background color are changed to the values sp
### Customizing Commit Label Font Size
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font size of the commit label .
Example:
Now let's override the default values for the `commitLabelFontSize` variable:
@@ -1677,7 +1790,7 @@ See how the commit label font size changed.
### Customizing Tag Label Font Size
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font size of the tag label .
Example:
Now let's override the default values for the `tagLabelFontSize` variable:

31
docs/syntax/mindmap.md
View File

@@ -60,11 +60,13 @@ The syntax for creating Mindmaps is simple and relies on indentation for setting
In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.
mindmap
Root
A
B
C
```
mindmap
Root
A
B
C
```
In summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
@@ -230,11 +232,13 @@ _These classes need to be supplied by the site administrator._
The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.
mindmap
Root
A
B
C
```
mindmap
Root
A
B
C
```
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
@@ -300,8 +304,13 @@ From version 9.4.0 you can simplify this code to:
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>
```
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
<!---
cspell:locale en,en-gb
cspell:ignore Buzan
--->

141
docs/syntax/packet.md Normal file
View File

@@ -0,0 +1,141 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
# Packet Diagram (v\<MERMAID_RELEASE_VERSION>+)
## Introduction
A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network.
## Usage
This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
## Syntax
```md
packet-beta
start: "Block name" %% Single-bit block
start-end: "Block name" %% Multi-bit blocks
... More Fields ...
```
## Examples
```mermaid-example
---
title: "TCP Packet"
---
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"
```
```mermaid
---
title: "TCP Packet"
---
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"
```
```mermaid-example
packet-beta
title UDP Packet
0-15: "Source Port"
16-31: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"
```
```mermaid
packet-beta
title UDP Packet
0-15: "Source Port"
16-31: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"
```
## Details of Syntax
- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet.
- **Field Description**: A brief description of what the field represents, enclosed in quotes.
## Configuration
Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details.
<!--
Theme variables are not currently working due to a mermaid bug. The passed values are not being propagated into styles function.
## Theme Variables
| Property | Description | Default Value |
| ---------------- | -------------------------- | ------------- |
| byteFontSize | Font size of the bytes | '10px' |
| startByteColor | Color of the starting byte | 'black' |
| endByteColor | Color of the ending byte | 'black' |
| labelColor | Color of the labels | 'black' |
| labelFontSize | Font size of the labels | '12px' |
| titleColor | Color of the title | 'black' |
| titleFontSize | Font size of the title | '14px' |
| blockStrokeColor | Color of the block stroke | 'black' |
| blockStrokeWidth | Width of the block stroke | '1' |
| blockFillColor | Fill color of the block | '#efefef' |
## Example on config and theme
```mermaid-example
---
config:
packet:
showBits: true
themeVariables:
packet:
startByteColor: red
---
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
```
-->

2
docs/syntax/pie.md
View File

@@ -7,7 +7,7 @@
# Pie chart diagrams
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
> \-Wikipedia
> -Wikipedia
Mermaid can render Pie Chart diagrams.

109
docs/syntax/quadrantChart.md
View File

@@ -59,8 +59,10 @@ The title is a short description of the chart and it will always render on top o
#### Example
quadrantChart
title This is a sample example
```
quadrantChart
title This is a sample example
```
### x-axis
@@ -68,8 +70,8 @@ The x-axis determines what text would be displayed in the x-axis. In x-axis ther
#### Example
1. `x-axis <text> --> <text>` both the left and right axis text will be rendered.
2. `x-axis <text>` only the left axis text will be rendered.
1. `x-axis <text> --> <text>` both the left and right axis text will be rendered.
2. `x-axis <text>` only the left axis text will be rendered.
### y-axis
@@ -77,8 +79,8 @@ The y-axis determines what text would be displayed in the y-axis. In y-axis ther
#### Example
1. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.
2. `y-axis <text>` only the bottom axis text will be rendered.
1. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.
2. `y-axis <text>` only the bottom axis text will be rendered.
### Quadrants text
@@ -86,10 +88,10 @@ The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadr
#### Example
1. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.
2. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.
3. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.
4. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.
1. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.
2. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.
3. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.
4. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.
### Points
@@ -97,8 +99,8 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
#### Example
1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
## Chart Configurations
@@ -166,3 +168,86 @@ quadrantChart
quadrant-3 Delegate
quadrant-4 Delete
```
### Point styling
Points can either be styled directly or with defined shared classes
1. Direct styling
```md
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
```
2. Classes styling
```md
Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
```
#### Available styles:
| Parameter | Description |
| ------------ | ---------------------------------------------------------------------- |
| color | Fill color of the point |
| radius | Radius of the point |
| stroke-width | Border width of the point |
| stroke-color | Border color of the point (useless when stroke-width is not specified) |
> **Note**
> Order of preference:
>
> 1. Direct styles
> 2. Class styles
> 3. Theme styles
## Example on styling
```mermaid-example
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
```
```mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
```

34
docs/syntax/requirementDiagram.md
View File

@@ -56,12 +56,14 @@ An important note on user text: all input can be surrounded in quotes or not. Fo
A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:
<type> user_defined_name {
id: user_defined_id
text: user_defined text
risk: <risk>
verifymethod: <method>
}
```
<type> user_defined_name {
id: user_defined_id
text: user_defined text
risk: <risk>
verifymethod: <method>
}
```
Type, risk, and method are enumerations defined in SysML.
@@ -75,10 +77,12 @@ Type, risk, and method are enumerations defined in SysML.
An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
element user_defined_name {
type: user_defined_type
docref: user_defined_ref
}
```
element user_defined_name {
type: user_defined_type
docref: user_defined_ref
}
```
### Relationship
@@ -86,11 +90,15 @@ Relationships are comprised of a source node, destination node, and relationship
Each follows the definition format of
{name of source} - <type> -> {name of destination}
```
{name of source} - <type> -> {name of destination}
```
or
{name of destination} <- <type> - {name of source}
```
{name of destination} <- <type> - {name of source}
```
"name of source" and "name of destination" should be names of requirement or element nodes defined elsewhere.
@@ -241,3 +249,5 @@ This example uses all features of the diagram.
test_entity3 - verifies -> test_req5
test_req <- copies - test_entity2
```
<!--- cspell:ignore reqs --->

2
docs/syntax/sankey.md
View File

@@ -301,3 +301,5 @@ Graph layout can be changed by setting `nodeAlignment` to:
- `center`
- `left`
- `right`
<!--- cspell:ignore Ngas bioenergy biofuel --->

230
docs/syntax/sequenceDiagram.md
View File

@@ -42,16 +42,16 @@ appearance by doing the following:
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
```
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
```
### Actors
@@ -98,8 +98,10 @@ sequenceDiagram
It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
create participant B
A --> B: Hello
```
create participant B
A --> B: Hello
```
Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
@@ -143,22 +145,26 @@ And fixing diagram code does not get rid of this error and rendering of all othe
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:
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
```
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
```
> **Note**
> If your group name is a color you can force the color to be transparent:
box transparent Aqua
... actors ...
end
```
box transparent Aqua
... actors ...
end
```
```mermaid-example
sequenceDiagram
@@ -172,8 +178,8 @@ The actor(s) can be grouped in vertical boxes. You can define a color (if not, i
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charly?
B->>C: Hello Charly, how are you?
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
```
```mermaid
@@ -188,28 +194,32 @@ The actor(s) can be grouped in vertical boxes. You can define a color (if not, i
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charly?
B->>C: Hello Charly, how are you?
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
```
## Messages
Messages can be of two displayed either solid or with a dotted line.
[Actor][Arrow][Actor]:Message text
```
[Actor][Arrow][Actor]:Message text
```
There are six types of arrows currently supported:
There are ten types of arrows currently supported:
| Type | Description |
| ------ | ------------------------------------------------ |
| `->` | Solid line without arrow |
| `-->` | Dotted line without arrow |
| `->>` | Solid line with arrowhead |
| `-->>` | Dotted line with arrowhead |
| `-x` | Solid line with a cross at the end |
| `--x` | Dotted line with a cross at the end. |
| `-)` | Solid line with an open arrow at the end (async) |
| `--)` | Dotted line with a open arrow at the end (async) |
| Type | Description |
| -------- | ------------------------------------------------------------------------ |
| `->` | Solid line without arrow |
| `-->` | Dotted line without arrow |
| `->>` | Solid line with arrowhead |
| `-->>` | Dotted line with arrowhead |
| `<<->>` | Solid line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
| `<<-->>` | Dotted line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
| `-x` | Solid line with a cross at the end |
| `--x` | Dotted line with a cross at the end. |
| `-)` | Solid line with an open arrow at the end (async) |
| `--)` | Dotted line with a open arrow at the end (async) |
## Activations
@@ -296,17 +306,35 @@ sequenceDiagram
Note over Alice,John: A typical interaction
```
It is also possible to add a line break (applies to text input in general):
## Line breaks
Line break can be added to Note and Message:
```mermaid-example
sequenceDiagram
Alice->John: Hello John, how are you?
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
Line breaks in Actor names requires aliases:
```mermaid-example
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
```mermaid
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
@@ -314,9 +342,11 @@ sequenceDiagram
It is possible to express loops in a sequence diagram. This is done by the notation
loop Loop text
... statements ...
end
```
loop Loop text
... statements ...
end
```
See the example below:
@@ -340,17 +370,21 @@ sequenceDiagram
It is possible to express alternative paths in a sequence diagram. This is done by the notation
alt Describing text
... statements ...
else
... statements ...
end
```
alt Describing text
... statements ...
else
... statements ...
end
```
or if there is sequence that is optional (if without else).
opt Describing text
... statements ...
end
```
opt Describing text
... statements ...
end
```
See the example below:
@@ -386,13 +420,15 @@ It is possible to show actions that are happening in parallel.
This is done by the notation
par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end
```
par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end
```
See the example below:
@@ -454,13 +490,15 @@ It is possible to show actions that must happen automatically with conditional h
This is done by the notation
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
```
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
```
See the example below:
@@ -510,9 +548,11 @@ It is possible to indicate a stop of the sequence within the flow (usually used
This is done by the notation
break [something happened]
... statements ...
end
```
break [something happened]
... statements ...
end
```
See the example below:
@@ -542,15 +582,17 @@ It is possible to highlight flows by providing colored background rects. This is
The colors are defined using rgb and rgba syntax.
rect rgb(0, 255, 0)
... content ...
end
```
rect rgb(0, 255, 0)
... content ...
end
```
<!---->
rect rgba(0, 0, 255, .1)
... content ...
end
```
rect rgba(0, 0, 255, .1)
... content ...
end
```
See the examples below:
@@ -646,7 +688,7 @@ It can also be turned on via the diagram code as in the diagram:
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
@@ -659,7 +701,7 @@ sequenceDiagram
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
@@ -674,7 +716,9 @@ Actors can have popup-menus containing individualized links to external pages. F
This can be configured by adding one or more link lines with the format:
link <actor>: <link-label> @ <link-url>
```
link <actor>: <link-label> @ <link-url>
```
```mermaid-example
sequenceDiagram
@@ -708,7 +752,9 @@ There is an advanced syntax that relies on JSON formatting. If you are comfortab
This can be configured by adding the links lines with the format:
links <actor>: <json-formatted link-name link-url pairs>
```
links <actor>: <json-formatted link-name link-url pairs>
```
An example is below:
@@ -740,22 +786,24 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
### Classes used
| Class | Description |
| ------------ | -------------------------------------------------------------- |
| actor | Styles for the actor box. |
| actor-top | Styles for the actor figure/ box at the top of the diagram. |
| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. |
| text.actor | Styles for text in the actor box. |
| actor-line | The vertical line for an actor. |
| messageLine0 | Styles for the solid message line. |
| messageLine1 | Styles for the dotted message line. |
| messageText | Defines styles for the text on the message arrows. |
| labelBox | Defines styles label to left in a loop. |
| labelText | Styles for the text in label for loops. |
| loopText | Styles for the text in the loop box. |
| loopLine | Defines styles for the lines in the loop box. |
| note | Styles for the note box. |
| noteText | Styles for the text on in the note boxes. |
| Class | Description |
| -------------- | -------------------------------------------------------------- |
| actor | Styles for the actor box. |
| actor-top | Styles for the actor figure/ box at the top of the diagram. |
| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. |
| text.actor | Styles for text of all of the actors. |
| text.actor-box | Styles for text of the actor box. |
| text.actor-man | Styles for text of the actor figure. |
| actor-line | The vertical line for an actor. |
| messageLine0 | Styles for the solid message line. |
| messageLine1 | Styles for the dotted message line. |
| messageText | Defines styles for the text on the message arrows. |
| labelBox | Defines styles label to left in a loop. |
| labelText | Styles for the text in label for loops. |
| loopText | Styles for the text in the loop box. |
| loopLine | Defines styles for the lines in the loop box. |
| note | Styles for the note box. |
| noteText | Styles for the text on in the note boxes. |
### Sample stylesheet

40
docs/syntax/stateDiagram.md
View File

@@ -160,7 +160,7 @@ In a real world use of state diagrams you often end up with diagrams that are mu
have several internal states. These are called composite states in this terminology.
In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
state between {}. See the example below:
state between {}. You can name a composite state on a separate line just like a simple state. See the example below:
```mermaid-example
stateDiagram-v2
@@ -169,6 +169,14 @@ stateDiagram-v2
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
```
```mermaid
@@ -178,6 +186,14 @@ stateDiagram-v2
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
```
You can do this in several layers:
@@ -454,8 +470,8 @@ state or states in the diagram.
**These are the current limitations with state diagram classDefs:**
1. Cannot be applied to start or end states
2. Cannot be applied to or within composite states
1. Cannot be applied to start or end states
2. Cannot be applied to or within composite states
_These are in development and will be available in a future version._
@@ -467,7 +483,9 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
Here is an example of a classDef with just one property-value pair:
classDef movement font-style:italic;
```
classDef movement font-style:italic;
```
where
@@ -478,7 +496,9 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
Here is an example with three property-value pairs:
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
```
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
```
where
@@ -493,9 +513,9 @@ where
There are two ways to apply a `classDef` style to a state:
1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or
2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
to/from another state)
1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or
2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
to/from another state)
#### 1. `class` statement
@@ -622,7 +642,7 @@ Spaces can be added to a state by first defining the state with an id and then r
In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).\
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
(**yswsii** has been styled so that it is different from the other states.)
```mermaid-example
@@ -648,3 +668,5 @@ stateDiagram
yswsii --> YetAnotherState
YetAnotherState --> [*]
```
<!--- cspell:ignore yswsii --->

22
docs/syntax/timeline.md
View File

@@ -8,9 +8,9 @@
> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline).
### An example of a timeline.
### An example of a timeline
```mermaid-example
timeline
@@ -58,7 +58,7 @@ or
: {event}
```
NOTE: Both time period and event are simple text, and not limited to numbers.
**NOTE**: Both time period and event are simple text, and not limited to numbers.
Let us look at the syntax for the example above.
@@ -104,7 +104,7 @@ timeline
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data,3D printing
Industry 5.0 : Artificial intelligence, Big data, 3D printing
```
```mermaid
@@ -116,7 +116,7 @@ timeline
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data,3D printing
Industry 5.0 : Artificial intelligence, Big data, 3D printing
```
As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
@@ -191,7 +191,7 @@ As explained earlier, each section has a color scheme, and each time period and
However, if there is no section defined, then we have two possibilities:
1. Style time periods individually, i.e. each time period(and its coressponding events) will have its own color scheme. This is the DEFAULT behavior.
1. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
```mermaid-example
timeline
@@ -213,9 +213,9 @@ However, if there is no section defined, then we have two possibilities:
```
Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
You will need to add this option either via mermaid.initialize function or directives.
@@ -262,7 +262,7 @@ In case you have more than 12 sections, the color scheme will start to repeat.
If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
Example:
@@ -461,7 +461,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
2010 : Pinterest
```
## Integrating with your library/website.
## Integrating with your library/website
Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
@@ -469,7 +469,7 @@ You can use this method to add mermaid including the timeline diagram to a web p
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>
```

36
docs/syntax/xyChart.md
View File

@@ -81,8 +81,10 @@ xychart-beta
The chart can be drawn horizontal or vertical, default value is vertical.
xychart-beta horizontal
...
```
xychart-beta horizontal
...
```
### Title
@@ -90,9 +92,11 @@ The title is a short description of the chart and it will always render on top o
#### Example
xychart-beta
title "This is a simple example"
...
```
xychart-beta
title "This is a simple example"
...
```
> **Note**
> If the title is a single word one no need to use `"`, but if it has space `"` is needed
@@ -103,8 +107,8 @@ The x-axis primarily serves as a categorical value, although it can also functio
#### Example
1. `x-axis title min --> max` x-axis will function as numeric with the given range
2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
1. `x-axis title min --> max` x-axis will function as numeric with the given range
2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
### y-axis
@@ -112,8 +116,8 @@ The y-axis is employed to represent numerical range values, it cannot have categ
#### Example
1. `y-axis title min --> max`
2. `y-axis title` it will only add the title, the range will be auto generated from data.
1. `y-axis title min --> max`
2. `y-axis title` it will only add the title, the range will be auto generated from data.
> **Note**
> Both x and y axis are optional if not provided we will try to create the range
@@ -124,7 +128,7 @@ A line chart offers the capability to graphically depict lines.
#### Example
1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
### Bar chart
@@ -132,14 +136,16 @@ A bar chart offers the capability to graphically depict bars.
#### Example
1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
#### Simplest example
The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
xychart-beta
line [+1.3, .6, 2.4, -.34]
```
xychart-beta
line [+1.3, .6, 2.4, -.34]
```
## Chart Configurations
@@ -181,11 +187,11 @@ The only two things required are the chart name (`xychart-beta`) and one data se
| ---------------- | --------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels |
| xAxisLabelColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisLabelColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |

32
docs/syntax/zenuml.md
View File

@@ -105,10 +105,10 @@ zenuml
Messages can be one of:
1. Sync message
2. Async message
3. Creation message
4. Reply message
1. Sync message
2. Async message
3. Creation message
4. Reply message
### Sync message
@@ -290,10 +290,10 @@ zenuml
It is possible to express loops in a ZenUML diagram. This is done by any of the
following notations:
1. while
2. for
3. forEach, foreach
4. loop
1. while
2. for
3. forEach, foreach
4. loop
```zenuml
while(condition) {
@@ -423,13 +423,15 @@ It is possible to indicate a stop of the sequence within the flow (usually used
This is done by the notation
try {
...statements...
} catch {
...statements...
} finally {
...statements...
}
```
try {
...statements...
} catch {
...statements...
} finally {
...statements...
}
```
See the example below: