mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into minmaps

This commit is contained in:
Knut Sveidqvist 2022-09-05 20:14:23 +02:00
parent 47490e9820 5a44b7341c
commit 1ccd3183c4
132 changed files with 18201 additions and 1174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.json
View File

@ -30,6 +30,10 @@
"jsdoc/multiline-blocks": "off",
"jsdoc/newline-after-description": "off",
"jsdoc/tag-lines": "off",
"jsdoc/require-param-description": "off",
"jsdoc/require-param-type": "off",
"jsdoc/require-returns": "off",
"jsdoc/require-returns-description": "off",
"cypress/no-async-tests": "off",
"json/*": ["error", "allowComments"],
"no-empty": ["error", { "allowEmptyCatch": true }]

3
.github/workflows/lint.yml vendored
View File

@ -37,3 +37,6 @@ jobs:
- name: Run Linting
run: yarn lint
- name: Verify Docs
run: yarn docs:verify

1
.lintstagedrc.json
View File

@ -1,3 +1,4 @@
{
"src/docs/**": ["yarn docs:build --git"],
"*.{ts,js,json,html,md}": ["eslint --fix", "prettier --write"]
}

6
docs/8.6.0_docs.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Version 8.6.0 Changes
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
@ -36,9 +38,9 @@ The modifiable parts of the Configuration are limited by the secure array, which
# Secure Arrays
Site owners can add to the **secure** array using this command:
mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } );
mermaidAPI.initialize( { startOnLoad: true, secure: \['parameter1', 'parameter2'] } );
Default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
Default values for the `secure array` consists of: \['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
Implementors can only modify configurations using directives, and cannot change the `secure` array.

1070
docs/CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

4
docs/Configuration.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Configuration
Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
@ -11,7 +13,7 @@ The Following are the most commonly used methods, and are all tied to Mermaid [D
## [Directives](./directives.md),
allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
Directives allows limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
## Theme Creation:

36
docs/README.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# About Mermaid
**Mermaid lets you create diagrams and visualizations using text and code.**
@ -8,8 +10,6 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
<img src="img/header.png" alt="" />
<!-- **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) -->
[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
<!-- Mermaid book banner -->
@ -24,8 +24,7 @@ Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-i
Diagramming and documentation costs precious developer time and gets outdated quickly.
But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
<br/>
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/>
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
[Tutorials](./Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
@ -131,6 +130,19 @@ Class08 <--> C2: Cool label
commit
```
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
```mmd
@ -167,25 +179,23 @@ journey
### CDN
```
https://unpkg.com/mermaid@<version>/dist/
```
https://unpkg.com/mermaid@<version>/dist/
To select a version:
Replace `<version>` with the desired version number.
Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
Latest Version: <https://unpkg.com/browse/mermaid@8.8.0/>
## Deploying Mermaid
To Deploy Mermaid:
1. You will need to install node v16, which would have npm
2. Download yarn using npm
3. Enter the following command: `yarn add mermaid`
4. You can then add mermaid as a dev dependency using this command:
`yarn add --dev mermaid`
1. You will need to install node v16, which would have npm
2. Download yarn using npm
3. Enter the following command: `yarn add mermaid`
4. You can then add mermaid as a dev dependency using this command:
`yarn add --dev mermaid`
### [Mermaid API](./Setup.md):

2
docs/SUMMARY.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Summary
- [mermaid](README.md)

10
docs/Setup.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
## mermaidAPI
@ -58,9 +60,9 @@ Theme , the CSS style sheet
## logLevel
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
| logLevel | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------------------------------------- | ------ | -------- | -------- | --------------------------------------------- |
| logLevel | This option decides the amount of logging to be used. | string | number | Required | 'trace','debug','info','warn','error','fatal' |
**Notes:**
@ -116,7 +118,7 @@ overriding a site's default security.
**Notes**:
Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
Default value: \['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
## deterministicIds

2
docs/Tutorials.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Tutorials
This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.

2
docs/_navbar.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
- Getting started
- [Quick start](quickstart.md)

2
docs/_sidebar.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
- 📔 Introduction
- [About Mermaid](README.md)

156
docs/accessibility.md
View File

@ -1,12 +1,12 @@
# Accessibility Options
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)
# Accessibility Options
## Accessibility
Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.
Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
TO begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
@ -33,13 +33,23 @@ Let us take a look at the following example with a flowchart diagram:
```
```mermaid
graph LR
accTitle: Big decisions
accDescr: Flow chart of the decision making process
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
### Multi-line Accessibility title/description
You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.
You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.
`accTitle: My single line title value` (**_single line format_**)
@ -64,6 +74,21 @@ Let us look at it in the following example, with same flowchart:
```
```mermaid
graph LR
accTitle: Big decisions
accDescr {
My multi-line description
of the diagram
}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
@ -82,6 +107,16 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
Alice-)John: See you later!
```
```mermaid
sequenceDiagram
accTitle: My Sequence Diagram
accDescr: My Sequence Diagram Description
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
#### Class Diagram
```mermaid-example
@ -92,6 +127,14 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
Vehicle <|-- Car
```
```mermaid
classDiagram
accTitle: My Class Diagram
accDescr: My Class Diagram Description
Vehicle <|-- Car
```
#### State Diagram
```mermaid-example
@ -103,6 +146,15 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
```mermaid
stateDiagram
accTitle: My State Diagram
accDescr: My State Diagram Description
s1 --> s2
```
#### Entity Relationship Diagram
```mermaid-example
@ -116,6 +168,17 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
```mermaid
erDiagram
accTitle: My Entity Relationship Diagram
accDescr: My Entity Relationship Diagram Description
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
#### User Journey Diagram
```mermaid-example
@ -134,6 +197,22 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
```mermaid
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
#### Gantt Chart
```mermaid-example
@ -152,6 +231,22 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
```mermaid
gantt
accTitle: My Gantt Chart Accessibility Title
accDescr: My Gantt Chart Accessibility Description
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
#### Pie Chart
```mermaid-example
@ -167,6 +262,19 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
```mermaid
pie
accTitle: My Pie Chart Accessibility Title
accDescr: My Pie Chart Accessibility Description
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
#### Requirement Diagram
```mermaid-example
@ -189,6 +297,26 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
```
```mermaid
requirementDiagram
accTitle: My Requirement Diagram
accDescr: My Requirement Diagram Description
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
#### Gitgraph
```mermaid-example
@ -208,3 +336,21 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
commit
```
```mermaid
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```

2
docs/breakingChanges.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Breaking changes
### Breaking changes from history version to latest version:

415
docs/c4c.md
View File

@ -1,6 +1,6 @@
# C4 Diagrams
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
# C4 Diagrams
> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
@ -51,6 +51,53 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
```mermaid
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
For an example, see the source code demos/index.html
@ -79,71 +126,121 @@ The number of shapes per row and the number of boundaries can be adjusted using
The following unfinished features are not supported in the short term.
- [ ] sprite
- [ ] tags
- [ ] link
- [ ] Legend
- \[ ] sprite
- [x] System Context
- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] Person_Ext
- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] SystemDb
- - [x] SystemQueue
- - [x] System_Ext
- - [x] SystemDb_Ext
- - [x] SystemQueue_Ext
- - [x] Boundary(alias, label, ?type, ?tags, $link)
- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
- - [x] System_Boundary
- \[ ] tags
- [x] Container diagram
- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ContainerDb
- - [x] ContainerQueue
- - [x] Container_Ext
- - [x] ContainerDb_Ext
- - [x] ContainerQueue_Ext
- - [x] Container_Boundary(alias, label, ?tags, $link)
- \[ ] link
- [x] Component diagram
- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ComponentDb
- - [x] ComponentQueue
- - [x] Component_Ext
- - [x] ComponentDb_Ext
- - [x] ComponentQueue_Ext
- \[ ] Legend
- [x] Dynamic diagram
- - [x] RelIndex(index, from, to, label, ?tags, $link)
- \[x] System Context
- [x] Deployment diagram
- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- - \[x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- [x] Relationship Types
- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] BiRel (bidirectional relationship)
- - [x] Rel_U, Rel_Up
- - [x] Rel_D, Rel_Down
- - [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] Person_Ext
- [ ] Custom tags/stereotypes support and skinparam 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.
- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
- - \[x] System(alias, label, ?descr, ?sprite, ?tags, $link)
- - \[x] SystemDb
- - \[x] SystemQueue
- - \[x] System_Ext
- - \[x] SystemDb_Ext
- - \[x] SystemQueue_Ext
- - \[x] Boundary(alias, label, ?type, ?tags, $link)
- - \[x] Enterprise_Boundary(alias, label, ?tags, $link)
- - \[x] System_Boundary
- \[x] Container diagram
- - \[x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - \[x] ContainerDb
- - \[x] ContainerQueue
- - \[x] Container_Ext
- - \[x] ContainerDb_Ext
- - \[x] ContainerQueue_Ext
- - \[x] Container_Boundary(alias, label, ?tags, $link)
- \[x] Component diagram
- - \[x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - \[x] ComponentDb
- - \[x] ComponentQueue
- - \[x] Component_Ext
- - \[x] ComponentDb_Ext
- - \[x] ComponentQueue_Ext
- \[x] Dynamic diagram
- - \[x] RelIndex(index, from, to, label, ?tags, $link)
- \[x] Deployment diagram
- - \[x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - \[x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - \[x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - \[x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- \[x] Relationship Types
- - \[x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - \[x] BiRel (bidirectional relationship)
- - \[x] Rel_U, Rel_Up
- - \[x] Rel_D, Rel_Down
- - \[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.
- \[ ] Custom tags/stereotypes support and skinparam 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.
- - \[ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - \[x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - \[x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
- - \[ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
- - \[ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
- - \[ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
- - \[ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
- - \[ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - \[x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
@ -204,6 +301,52 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
```
```mermaid
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
## C4 Container diagram (C4Container)
```mermaid-example
@ -246,6 +389,46 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
```
```mermaid
C4Container
title Container diagram for Internet Banking System
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
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_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.")
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, web_app, "Uses", "HTTPS")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "Uses", "HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "Uses")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
Rel(email_system, customer, "Sends e-mails to")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
```
## C4 Component diagram (C4Component)
```mermaid-example
@ -288,6 +471,46 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
```
```mermaid
C4Component
title Component diagram for Internet Banking System - API Application
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
Rel(sign, security, "Uses")
Rel(accounts, mbsfacade, "Uses")
Rel(security, db, "Read & write to", "JDBC")
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
}
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
Rel(spa, accounts, "Uses", "JSON/HTTPS")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
UpdateRelStyle(ma, accounts, $offsetY="-40")
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
```
## C4 Dynamic diagram (C4Dynamic)
```mermaid-example
@ -310,6 +533,26 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
```
```mermaid
C4Dynamic
title Dynamic diagram for Internet Banking System - API Application
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
Container_Boundary(b, "API Application") {
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
}
Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
Rel(c2, c3, "Calls isAuthenticated() on")
Rel(c3, c4, "select * from users where username = ?", "JDBC")
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
```
## C4 Deployment diagram (C4Deployment)
```mermaid-example
@ -363,3 +606,55 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
UpdateRelStyle(db, db2, $offsetY="-10")
```
```mermaid
C4Deployment
title Deployment Diagram for Internet Banking System - Live
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
}
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
}
}
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
}
}
Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
}
}
Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
}
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
Rel(spa, api, "Makes API calls to", "json/HTTPS")
Rel_U(web, spa, "Delivers to the customer's web browser")
Rel(api, db, "Reads from and writes to", "JDBC")
Rel(api, db2, "Reads from and writes to", "JDBC")
Rel_R(db, db2, "Replicates data to")
UpdateRelStyle(spa, api, $offsetY="-40")
UpdateRelStyle(web, spa, $offsetY="-40")
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
UpdateRelStyle(db, db2, $offsetY="-10")
```

239
docs/classDiagram.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Class diagrams
> "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."
@ -31,6 +33,30 @@ classDiagram
}
```
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
## Syntax
### Class
@ -52,6 +78,16 @@ classDiagram
```
```mermaid
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```
## Define a class
There are two ways to define a class:
@ -65,6 +101,12 @@ classDiagram
Vehicle <|-- Car
```
```mermaid
classDiagram
class Animal
Vehicle <|-- Car
```
Naming convention: a class name should be composed only of alphanumeric characters (including unicode), and underscores.
## Defining Members of a class
@ -86,6 +128,15 @@ BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```
```mermaid
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```
- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
```mermaid-example
@ -98,6 +149,16 @@ class BankAccount{
}
```
```mermaid
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount)
}
```
#### Return Type
Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:
@ -112,6 +173,16 @@ class BankAccount{
}
```
```mermaid
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawal(amount) int
}
```
#### 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**). Note: **nested** type declarations such as `List<List<int>>` are not currently supported.
@ -132,6 +203,20 @@ Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
```
```mermaid
classDiagram
class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
```
#### Return Type
Optionally you can end the method/function definition with the data type that will be returned.
@ -158,22 +243,20 @@ 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:
| Type | Description |
| ----- | ------------- |
| <\|-- | Inheritance |
| \*-- | Composition |
| o-- | Aggregation |
| --> | Association |
| -- | Link (Solid) |
| ..> | Dependency |
| ..\|> | Realization |
| .. | Link (Dashed) |
| Type | Description |
| ---- | ------------- | ----------- |
| < | -- | Inheritance |
| \*-- | Composition |
| o-- | Aggregation |
| --> | Association |
| -- | Link (Solid) |
| ..> | Dependency |
| .. | > | Realization |
| .. | Link (Dashed) |
```mermaid-example
classDiagram
@ -188,6 +271,19 @@ classO .. classP
```
```mermaid
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
```
We can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well:
```mermaid-example
@ -203,13 +299,24 @@ classO .. classP : Link(Dashed)
```
```mermaid
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
```
### Labels on Relations
It is possible to add label text to a relation:
```
[classA][Arrow][ClassB]:LabelText
```
[classA][Arrow][ClassB]:LabelText
```mermaid-example
classDiagram
@ -218,6 +325,13 @@ classC *-- classD : composition
classE o-- classF : aggregation
```
```mermaid
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
```
### Two-way relations
Relations can logically represent an N:M association:
@ -229,20 +343,18 @@ classDiagram
Here is the syntax:
```
[Relation Type][Link][Relation Type]
```
[Relation Type][Link][Relation Type]
Where `Relation Type` can be one of:
| Type | Description |
| ---- | ----------- |
| <\| | Inheritance |
| ---- | ----------- | ----------- |
| < | | Inheritance |
| \* | Composition |
| o | Aggregation |
| > | Association |
| < | Association |
| \|> | Realization |
| | > | Realization |
And `Link` can be one of:
@ -269,9 +381,7 @@ 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
@ -280,6 +390,13 @@ classDiagram
Galaxy --> "many" Star : Contains
```
```mermaid
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
```
## Annotations on classes
It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:
@ -301,6 +418,14 @@ Shape : noOfVertices
Shape : draw()
```
```mermaid
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()
```
- In a **_nested structure_** along with the class definition:
```mermaid-example
@ -321,6 +446,24 @@ class Color{
```
```mermaid
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
```
## Comments
Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.
@ -357,17 +500,33 @@ classDiagram
Student "1" --o "1" Bike : rides
```
```mermaid
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
```
## 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. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
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
@ -405,6 +564,18 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
</script>
```
```mermaid-example
classDiagram
class Class01
class Class02
callback Class01 "callbackFunction" "Callback tooltip"
link Class02 "https://www.github.com" "This is a link"
class Class03
class Class04
click Class03 call callbackFunction() "Callback tooltip"
click Class04 href "https://www.github.com" "This is a link"
```
```mermaid
classDiagram
class Class01
@ -481,15 +652,11 @@ It is possible to apply specific styles such as a thicker border or a different
Then attaching that class to a specific node:
```
cssClass "nodeId1" cssClass;
```
cssClass "nodeId1" cssClass;
It is also possible to attach a class to a list of nodes in one statement:
```
cssClass "nodeId1,nodeId2" cssClass;
```
cssClass "nodeId1,nodeId2" cssClass;
A shorter form of adding a class is to attach the classname to the node using the `:::` operator:

9
docs/developer-docs/configuration.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Configuration
When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:
@ -12,6 +14,13 @@ When mermaid starts, configuration is extracted to determine a configuration to
## Starting mermaid
```mermaid-example
sequenceDiagram
Site->>mermaid: initialize
Site->>mermaid: content loaded
mermaid->>mermaidAPI: init
```
```mermaid
sequenceDiagram
Site->>mermaid: initialize

42
docs/development.md
View File

@ -1,10 +1,12 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Development and Contribution 🙌
So you want to help? That's great!
![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
Here are a few things to know to get you started on the right path.
Here are a few things to get you started on the right path.
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
@ -26,7 +28,7 @@ We make all changes via Pull Requests. As we have many Pull Requests from develo
- Large changes reviewed by knsv or other developer asked to review by knsv
- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits)
When you commit code, create a branch with the following naming convention:
@ -44,17 +46,19 @@ Start with the type, such as **feature** or **bug**, followed by the issue numbe
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the `docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
## How to Contribute to Documentation
We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
The documentation is located in the `docs` directory and organized according to relevant subfolder.
The documentation is located in the `src/docs` directory and organized according to relevant subfolder.
The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
@ -68,9 +72,9 @@ This tests the rendering and visual appearance of the diagrams. This ensures tha
To start working with the e2e tests:
1. Run `yarn dev` to start the dev server
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
1. Run `yarn dev` to start the dev server
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.\
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
@ -110,20 +114,20 @@ Markdown is used to format the text, for more information about Markdown [see th
To edit Docs on your computer:
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
2. Create a fork of the develop branch.
3. Make changes or add new documentation.
4. Commit changes to your fork and push it to GitHub.
5. Create a Pull Request of your fork.
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
2. Create a fork of the develop branch.
3. Make changes or add new documentation.
4. Commit changes to your fork and push it to GitHub.
5. Create a Pull Request of your fork.
To edit Docs on GitHub:
1. Login to [GitHub.com](https://www.github.com).
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
1. Login to [GitHub.com](https://www.github.com).
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
## Last Words

336
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@ -1,6 +1,10 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
---
sort: 3
title: Flowchart
---
# Flowcharts - Basic Syntax
@ -14,6 +18,11 @@ graph TD
Start --> Stop
```
```mermaid
graph TD
Start --> Stop
```
or left to right (`LR`):
```mermaid-example
@ -21,6 +30,11 @@ graph LR
Start --> Stop
```
```mermaid
graph LR
Start --> Stop
```
## Flowchart Orientation
Possible FlowChart orientations are:
@ -48,6 +62,11 @@ graph LR
id
```
```mermaid
graph LR
id
```
> **Note** The id is what is displayed in the box.
### A node with text
@ -61,6 +80,11 @@ graph LR
id1[This is the text in the box]
```
```mermaid
graph LR
id1[This is the text in the box]
```
## Node Shapes
### A node with round edges
@ -70,6 +94,11 @@ graph LR
id1(This is the text in the box)
```
```mermaid
graph LR
id1(This is the text in the box)
```
### A stadium-shaped node
```mermaid-example
@ -77,6 +106,11 @@ graph LR
id1([This is the text in the box])
```
```mermaid
graph LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```mermaid-example
@ -84,6 +118,11 @@ graph LR
id1[[This is the text in the box]]
```
```mermaid
graph LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```mermaid-example
@ -91,6 +130,11 @@ graph LR
id1[(Database)]
```
```mermaid
graph LR
id1[(Database)]
```
### A node in the form of a circle
```mermaid-example
@ -98,6 +142,11 @@ graph LR
id1((This is the text in the circle))
```
```mermaid
graph LR
id1((This is the text in the circle))
```
### A node in an asymmetric shape
```mermaid-example
@ -105,6 +154,11 @@ graph LR
id1>This is the text in the box]
```
```mermaid
graph LR
id1>This is the text in the box]
```
Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
### A node (rhombus)
@ -114,6 +168,11 @@ graph LR
id1{This is the text in the box}
```
```mermaid
graph LR
id1{This is the text in the box}
```
### A hexagonal node
```mermaid-example
@ -121,6 +180,11 @@ graph LR
id1{{This is the text in the box}}
```
```mermaid
graph LR
id1{{This is the text in the box}}
```
### Parallelogram
```mermaid-example
@ -128,6 +192,11 @@ graph TD
id1[/This is the text in the box/]
```
```mermaid
graph TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```mermaid-example
@ -135,6 +204,11 @@ graph TD
id1[\This is the text in the box\]
```
```mermaid
graph TD
id1[\This is the text in the box\]
```
### Trapezoid
```mermaid-example
@ -142,6 +216,11 @@ graph TD
A[/Christmas\]
```
```mermaid
graph TD
A[/Christmas\]
```
### Trapezoid alt
```mermaid-example
@ -149,6 +228,11 @@ graph TD
B[\Go shopping/]
```
```mermaid
graph TD
B[\Go shopping/]
```
## Links between nodes
Nodes can be connected with links/edges. It is possible to have different types of links, or attach a text string on a link.
@ -160,6 +244,11 @@ graph LR
A-->B
```
```mermaid
graph LR
A-->B
```
### Open link
```mermaid-example
@ -167,6 +256,11 @@ graph LR
A --- B
```
```mermaid
graph LR
A --- B
```
### Text on links
```mermaid-example
@ -174,6 +268,11 @@ graph LR
A-- This is the text! ---B
```
```mermaid
graph LR
A-- This is the text! ---B
```
or
```mermaid-example
@ -181,6 +280,11 @@ graph LR
A---|This is the text|B
```
```mermaid
graph LR
A---|This is the text|B
```
### Link with arrow head and text
```mermaid-example
@ -188,6 +292,11 @@ graph LR
A-->|text|B
```
```mermaid
graph LR
A-->|text|B
```
or
```mermaid-example
@ -195,6 +304,11 @@ graph LR
A-- text -->B
```
```mermaid
graph LR
A-- text -->B
```
### Dotted link
```mermaid-example
@ -202,6 +316,11 @@ graph LR;
A-.->B;
```
```mermaid
graph LR;
A-.->B;
```
### Dotted link with text
```mermaid-example
@ -209,6 +328,11 @@ graph LR
A-. text .-> B
```
```mermaid
graph LR
A-. text .-> B
```
### Thick link
```mermaid-example
@ -216,6 +340,11 @@ graph LR
A ==> B
```
```mermaid
graph LR
A ==> B
```
### Thick link with text
```mermaid-example
@ -223,6 +352,11 @@ graph LR
A == text ==> B
```
```mermaid
graph LR
A == text ==> B
```
### Chaining of links
It is possible to declare many links on the same line as per below:
@ -232,6 +366,11 @@ graph LR
A -- text --> B -- text2 --> C
```
```mermaid
graph LR
A -- text --> B -- text2 --> C
```
It is also possible to declare multiple nodes links in the same line as per below:
```mermaid-example
@ -239,6 +378,11 @@ graph LR
a --> b & c--> d
```
```mermaid
graph LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example
@ -246,6 +390,11 @@ graph TB
A & B--> C & D
```
```mermaid
graph TB
A & B--> C & D
```
If you describe the same diagram using the the basic syntax, it will take four lines:
```mmd
@ -270,6 +419,12 @@ flowchart LR
B --x C
```
```mermaid
flowchart LR
A --o B
B --x C
```
### Multi directional arrows
When using flowchart instead of graph there is the possibility to use multidirectional arrows.
@ -281,6 +436,13 @@ flowchart LR
C x--x D
```
```mermaid
flowchart LR
A o--o B
B <--> C
C x--x D
```
### Minimum length of a link
Each node in the flowchart is ultimately assigned to a rank in the rendered
@ -301,6 +463,15 @@ graph TD
B ---->|No| E[End];
```
```mermaid
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
```
> **Note** The rendering engine may cause some links to be longer than
> the number of ranks requested in order to accommodate the overall topology.
@ -317,6 +488,15 @@ graph TD
B -- No ----> E[End];
```
```mermaid
graph TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
```
For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table:
@ -338,6 +518,11 @@ graph LR
id1["This is the (text) in the box"]
```
```mermaid
graph LR
id1["This is the (text) in the box"]
```
### Entity codes to escape characters
Special characters (including Unicode) can be included by using HTML escaping syntax:
@ -347,13 +532,16 @@ Special characters (including Unicode) can be included by using HTML escaping sy
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
```mermaid
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
## Subgraphs
```
subgraph title
graph definition
end
```
subgraph title
graph definition
end
An example:
@ -371,6 +559,20 @@ graph TB
end
```
```mermaid
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
You can also set an explicit id for the subgraph:
```mermaid-example
@ -381,6 +583,14 @@ graph TB
end
```
```mermaid
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
## Flowcharts
With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
@ -402,14 +612,29 @@ flowchart TB
two --> c2
```
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
## Interaction
A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **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 an incoming parameter.
@ -437,6 +662,17 @@ graph LR;
click B href "https://www.github.com" "This is a tooltip for a link"
```
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link"
```
> **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/s37cjoau/3/).
@ -455,6 +691,18 @@ graph LR;
click D href "https://www.github.com" "Open this in a new tab" _blank
```
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
```
Beginner's tip—here's a full example of using interactive links in HTML:
```html
@ -506,30 +754,22 @@ It is possible to style links. For instance, you might want to style a link that
have no ids in the same way as nodes, some other way of attaching style is required.
So instead of ids, the order number of when the link was defined in the graph is used, starting with zero. Here's a linkStyle statement that would apply style 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;
You can specify a `default` to apply to all links, or you can give a comma-separated list of link order numbers.
Instead of giving a styles option, you can also use custom d3 curve types with the following syntax:
```
linkStyle default|numList|num interpolate curveType
```
linkStyle default|numList|num interpolate curveType
If you want to add both D3 and style options, instead of writing:
```
linkStyle default interpolate cardinal
linkStyle default stroke:#ff3,stroke-width:4px,color:red;
```
linkStyle default interpolate cardinal
linkStyle default stroke:#ff3,stroke-width:4px,color:red;
You can combine them:
```
linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;
```
linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;
### Styling a node
@ -542,27 +782,28 @@ graph LR
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 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 reference to multiple nodes.
here's a class definition:
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
and then attaching this class to a node is simply:
```
class nodeId1 className;
```
class nodeId1 className;
It is also possible to attach a class to multiple nodes in one statement:
```
class nodeId1,nodeId2 className;
```
class nodeId1,nodeId2 className;
An even shorter form of adding a class is to attach the classname to the node using the `:::`operator:
@ -572,6 +813,12 @@ graph LR
classDef someclass fill:#f96;
```
```mermaid
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
```
### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition:
@ -595,13 +842,18 @@ graph LR;
class A cssClass;
```
```mermaid
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
### Default class
If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
## Basic support for fontawesome
@ -615,6 +867,14 @@ graph TD
B-->E(A fa:fa-camera-retro perhaps?);
```
```mermaid
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
```
## Graph declarations with spaces between vertices and link and without semicolon
- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
@ -631,6 +891,14 @@ graph LR
C -->|Two| E[Result two]
```
```mermaid
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
## Configuration...
Is it possible to adjust the width of the rendered flowchart.

127
docs/directives.md
View File

@ -1,6 +1,6 @@
# Directives
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)
# Directives
## Directives
@ -14,7 +14,7 @@ While directives allow you to change most of the default configuration settings,
Mermaid basically supports two types of configuration options to be overridden by directives.
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
- theme
- fontFamily
@ -23,15 +23,12 @@ Mermaid basically supports two types of configuration options to be overridden b
- startOnLoad
- secure
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
```
Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations,
with their possible values in the docs
```
Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs
## Declaring directives
@ -42,34 +39,28 @@ Here the structure of a directive text is like a nested key-value pair map or a
Following code snippet shows the structure of a directive:
```
%%{
init: {
"theme": "dark",
"fontFamily": "monospace",
"logLevel": "info",
"flowchart": {
"htmlLabels": true,
"curve": "linear"
},
"sequence": {
"mirrorActors": true
}
}
}%%
```
%%{
init: {
"theme": "dark",
"fontFamily": "monospace",
"logLevel": "info",
"flowchart": {
"htmlLabels": true,
"curve": "linear"
},
"sequence": {
"mirrorActors": true
}
}
}%%
You can also define the directives in a single line, like this:
```
%%{init: { **insert argument here**}}%%
```
%%{init: { **insert argument here**}}%%
For example, the following code snippet:
```
%%{init: { "sequence": { "mirrorActors":false }}}%%
```
%%{init: { "sequence": { "mirrorActors":false }}}%%
**Notes:**
The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
@ -83,6 +74,12 @@ graph LR
A-->B
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
graph LR
A-->B
```
Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
@ -133,9 +130,21 @@ A --> C[End]
```
```mermaid
%%{init: { "theme": "forest" } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing fontFamily via directive
The following code snippet changes theme to forest:
The following code snippet changes fontFamily to rebuchet MS, Verdana, Arial, Sans-Serif:
`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
@ -153,9 +162,21 @@ A --> C[End]
```
```mermaid
%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing logLevel via directive
The following code snippet changes theme to forest:
The following code snippet changes logLevel to 2:
`%%{init: { "logLevel": 2 } }%%`
@ -182,6 +203,17 @@ A --> C[End]
end
```
```mermaid
%%{init: { "logLevel": 2 } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing flowchart config via directive
Some common flowchart configurations are:
@ -211,6 +243,17 @@ A --> C[End]
end
```
```mermaid
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing Sequence diagram config via directive
Some common sequence configurations are:
@ -240,6 +283,15 @@ Alice->Bob: Good.
Bob->Alice: Cool
```
```mermaid
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```
Now let us enable wrap for sequence diagrams.
The following code snippet changes sequence diagram config for `wrap` to `true`:
@ -256,3 +308,12 @@ Bob->Alice: Fine, How did you mother like the book I suggested? And did you catc
Alice->Bob: Good.
Bob->Alice: Cool
```
```mermaid
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```

89
docs/entityRelationshipDiagram.md
View File

@ -1,6 +1,6 @@
# Entity Relationship Diagrams
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md)
# 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.
@ -15,6 +15,13 @@ erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
@ -41,6 +48,26 @@ erDiagram
}
```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string name
string custNumber
string sector
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int orderNumber
string deliveryAddress
}
LINE-ITEM {
string productCode
int quantity
float pricePerUnit
}
```
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
## Syntax
@ -49,9 +76,7 @@ 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:
@ -62,9 +87,7 @@ 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).
@ -117,6 +140,22 @@ erDiagram
}
```
```mermaid
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
int age
}
```
The attributes are rendered inside the entity boxes:
```mermaid-example
@ -135,6 +174,22 @@ erDiagram
}
```
```mermaid
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
int age
}
```
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
#### Attribute Keys and Comments
@ -159,6 +214,24 @@ erDiagram
}
```
```mermaid
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string allowedDriver FK "The license of the allowed driver"
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string driversLicense PK "The license #"
string firstName
string lastName
int age
}
```
### Other Things
- If you want the relationship label to be more than one word, you must use double quotes around the phrase

137
docs/examples.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Examples
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
@ -14,6 +16,12 @@ pie title NETFLIX
"Time spent watching it" : 10
```
```mermaid
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```
```mermaid-example
pie title What Voldemort doesn't have?
"FRIENDS" : 2
@ -21,6 +29,13 @@ pie title What Voldemort doesn't have?
"NOSE" : 45
```
```mermaid
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
```
## Basic sequence diagram
```mermaid-example
@ -35,6 +50,18 @@ sequenceDiagram
Alice->John: Yes... John, how are you?
```
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
## Basic flowchart
```mermaid-example
@ -45,6 +72,14 @@ graph LR
C --> D
```
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
## Larger flowchart with some styling
```mermaid-example
@ -71,6 +106,30 @@ graph TB
class di orange
```
```mermaid
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```
## SequenceDiagram: Loops, alt and opt
```mermaid-example
@ -89,6 +148,22 @@ sequenceDiagram
end
```
```mermaid
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```
## SequenceDiagram: Message to self in loop
```mermaid-example
@ -105,6 +180,20 @@ sequenceDiagram
Bob-->>John: Jolly good!
```
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
## Sequence Diagram: Blogging app service communication
```mermaid-example
@ -139,8 +228,56 @@ sequenceDiagram
```
```mermaid
sequenceDiagram
participant web as Web Browser
participant blog as Blog Service
participant account as Account Service
participant mail as Mail Service
participant db as Storage
Note over web,db: The user must be logged in to submit blog posts
web->>+account: Logs in using credentials
account->>db: Query stored accounts
db->>account: Respond with query result
alt Credentials not found
account->>web: Invalid credentials
else Credentials found
account->>-web: Successfully logged in
Note over web,db: When the user is authenticated, they can now submit new posts
web->>+blog: Submit new post
blog->>db: Store post data
par Notifications
blog--)mail: Send mail to blog subscribers
blog--)db: Store in-site notifications
and Response
blog-->>-web: Successfully posted
end
end
```
## A commit flow diagram.
```mermaid-example
gitGraph:
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
```
```mermaid
gitGraph:
commit "Ashish"

20
docs/faq.md
View File

@ -1,11 +1,13 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Frequently Asked Questions
1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
1. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
1. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
1. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
1. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
1. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
1. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
8. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
9. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)

350
docs/flowchart.md
View File

@ -1,6 +1,6 @@
# Flowcharts - Basic Syntax
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
# Flowcharts - Basic Syntax
All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
@ -15,6 +15,11 @@ flowchart LR
id
```
```mermaid
flowchart LR
id
```
> **Note** The id is what is displayed in the box.
### A node with text
@ -28,6 +33,11 @@ flowchart LR
id1[This is the text in the box]
```
```mermaid
flowchart LR
id1[This is the text in the box]
```
## Graph
This statement declares the direction of the Flowchart.
@ -39,6 +49,11 @@ flowchart TD
Start --> Stop
```
```mermaid
flowchart TD
Start --> Stop
```
This declares the flowchart is oriented from left to right (`LR`).
```mermaid-example
@ -46,6 +61,11 @@ flowchart LR
Start --> Stop
```
```mermaid
flowchart LR
Start --> Stop
```
## Flowchart Orientation
Possible FlowChart orientations are:
@ -65,6 +85,11 @@ flowchart LR
id1(This is the text in the box)
```
```mermaid
flowchart LR
id1(This is the text in the box)
```
### A stadium-shaped node
```mermaid-example
@ -72,6 +97,11 @@ flowchart LR
id1([This is the text in the box])
```
```mermaid
flowchart LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```mermaid-example
@ -79,6 +109,11 @@ flowchart LR
id1[[This is the text in the box]]
```
```mermaid
flowchart LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```mermaid-example
@ -86,6 +121,11 @@ flowchart LR
id1[(Database)]
```
```mermaid
flowchart LR
id1[(Database)]
```
### A node in the form of a circle
```mermaid-example
@ -93,6 +133,11 @@ flowchart LR
id1((This is the text in the circle))
```
```mermaid
flowchart LR
id1((This is the text in the circle))
```
### A node in an asymmetric shape
```mermaid-example
@ -100,6 +145,11 @@ flowchart LR
id1>This is the text in the box]
```
```mermaid
flowchart LR
id1>This is the text in the box]
```
Currently only the shape above is possible and not its mirror. _This might change with future releases._
### A node (rhombus)
@ -109,6 +159,11 @@ flowchart LR
id1{This is the text in the box}
```
```mermaid
flowchart LR
id1{This is the text in the box}
```
### A hexagon node
```mermaid-example
@ -116,6 +171,11 @@ flowchart LR
id1{{This is the text in the box}}
```
```mermaid
flowchart LR
id1{{This is the text in the box}}
```
### Parallelogram
```mermaid-example
@ -123,6 +183,11 @@ flowchart TD
id1[/This is the text in the box/]
```
```mermaid
flowchart TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```mermaid-example
@ -130,6 +195,11 @@ flowchart TD
id1[\This is the text in the box\]
```
```mermaid
flowchart TD
id1[\This is the text in the box\]
```
### Trapezoid
```mermaid-example
@ -137,6 +207,11 @@ flowchart TD
A[/Christmas\]
```
```mermaid
flowchart TD
A[/Christmas\]
```
### Trapezoid alt
```mermaid-example
@ -144,6 +219,11 @@ flowchart TD
B[\Go shopping/]
```
```mermaid
flowchart TD
B[\Go shopping/]
```
### Double circle
```mermaid-example
@ -151,6 +231,11 @@ flowchart TD
id1(((This is the text in the circle)))
```
```mermaid
flowchart TD
id1(((This is the text in the circle)))
```
## Links between nodes
Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
@ -162,6 +247,11 @@ flowchart LR
A-->B
```
```mermaid
flowchart LR
A-->B
```
### An open link
```mermaid-example
@ -169,6 +259,11 @@ flowchart LR
A --- B
```
```mermaid
flowchart LR
A --- B
```
### Text on links
```mermaid-example
@ -176,6 +271,11 @@ flowchart LR
A-- This is the text! ---B
```
```mermaid
flowchart LR
A-- This is the text! ---B
```
or
```mermaid-example
@ -183,6 +283,11 @@ flowchart LR
A---|This is the text|B
```
```mermaid
flowchart LR
A---|This is the text|B
```
### A link with arrow head and text
```mermaid-example
@ -190,6 +295,11 @@ flowchart LR
A-->|text|B
```
```mermaid
flowchart LR
A-->|text|B
```
or
```mermaid-example
@ -197,6 +307,11 @@ flowchart LR
A-- text -->B
```
```mermaid
flowchart LR
A-- text -->B
```
### Dotted link
```mermaid-example
@ -204,6 +319,11 @@ flowchart LR;
A-.->B;
```
```mermaid
flowchart LR;
A-.->B;
```
### Dotted link with text
```mermaid-example
@ -211,6 +331,11 @@ flowchart LR
A-. text .-> B
```
```mermaid
flowchart LR
A-. text .-> B
```
### Thick link
```mermaid-example
@ -218,6 +343,11 @@ flowchart LR
A ==> B
```
```mermaid
flowchart LR
A ==> B
```
### Thick link with text
```mermaid-example
@ -225,6 +355,11 @@ flowchart LR
A == text ==> B
```
```mermaid
flowchart LR
A == text ==> B
```
### Chaining of links
It is possible declare many links in the same line as per below:
@ -234,6 +369,11 @@ flowchart LR
A -- text --> B -- text2 --> C
```
```mermaid
flowchart LR
A -- text --> B -- text2 --> C
```
It is also possible to declare multiple nodes links in the same line as per below:
```mermaid-example
@ -241,6 +381,11 @@ flowchart LR
a --> b & c--> d
```
```mermaid
flowchart LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example
@ -248,6 +393,11 @@ flowchart TB
A & B--> C & D
```
```mermaid
flowchart TB
A & B--> C & D
```
If you describe the same diagram using the the basic syntax, it will take four lines. A
word of warning, one could go overboard with this making the flowchart harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
@ -271,6 +421,12 @@ flowchart LR
B --x C
```
```mermaid
flowchart LR
A --o B
B --x C
```
### Multi directional arrows
There is the possibility to use multidirectional arrows.
@ -282,6 +438,13 @@ flowchart LR
C x--x D
```
```mermaid
flowchart LR
A o--o B
B <--> C
C x--x D
```
### Minimum length of a link
Each node in the flowchart is ultimately assigned to a rank in the rendered
@ -302,6 +465,15 @@ flowchart TD
B ---->|No| E[End]
```
```mermaid
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
```
> **Note** Links may still be made longer than the requested number of ranks
> by the rendering engine to accommodate other requests.
@ -318,6 +490,15 @@ flowchart TD
B -- No ----> E[End]
```
```mermaid
flowchart TD
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
```
For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table:
@ -339,6 +520,11 @@ flowchart LR
id1["This is the (text) in the box"]
```
```mermaid
flowchart LR
id1["This is the (text) in the box"]
```
### Entity codes to escape characters
It is possible to escape characters using the syntax exemplified here.
@ -348,15 +534,18 @@ It is possible to escape characters using the syntax exemplified here.
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
```mermaid
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
## Subgraphs
```
subgraph title
graph definition
end
```
subgraph title
graph definition
end
An example below:
@ -374,6 +563,20 @@ flowchart TB
end
```
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
You can also set an explicit id for the subgraph.
```mermaid-example
@ -384,6 +587,14 @@ flowchart TB
end
```
```mermaid
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
## flowcharts
With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
@ -405,6 +616,23 @@ flowchart TB
two --> c2
```
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
## Direction in subgraphs
With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
@ -426,14 +654,29 @@ flowchart LR
B1 --> B2
```
```mermaid
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
```
## 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. **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.
@ -461,6 +704,17 @@ flowchart LR
click B href "https://www.github.com" "This is a tooltip for a link"
```
```mermaid
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link"
```
> **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/s37cjoau/3/).
@ -479,6 +733,18 @@ flowchart LR
click D href "https://www.github.com" "Open this in a new tab" _blank
```
```mermaid
flowchart LR
A-->B
B-->C
C-->D
D-->E
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
```
Beginner's tip—a full example using interactive links in a html context:
```html
@ -527,9 +793,7 @@ 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;
### Styling line curves
@ -539,10 +803,8 @@ and `stepBefore`.
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
@ -559,6 +821,13 @@ flowchart LR
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 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
@ -566,21 +835,15 @@ 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;
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:
@ -590,6 +853,12 @@ flowchart LR
classDef someclass fill:#f96;
```
```mermaid
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96;
```
### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
@ -616,13 +885,18 @@ flowchart LR;
class A cssClass
```
```mermaid
flowchart LR;
A-->B[AAA<span>BBB</span>]
B-->D
class A cssClass
```
### Default class
If a class is named default it will be assigned to all classes without specific class definitions.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
## Basic support for fontawesome
@ -638,6 +912,14 @@ flowchart TD
B-->E(A fa:fa-camera-retro perhaps?)
```
```mermaid
flowchart TD
B["fab:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?)
```
?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
## Graph declarations with spaces between vertices and link and without semicolon
@ -656,6 +938,14 @@ flowchart LR
C -->|Two| E[Result two]
```
```mermaid
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
## Configuration...
Is it possible to adjust the width of the rendered flowchart.

178
docs/gantt.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Gantt diagrams
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
@ -28,6 +30,18 @@ gantt
another task : 24d
```
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
## Syntax
```mermaid-example
@ -63,6 +77,39 @@ gantt
Add another diagram to demo page :48h
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
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
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
It is possible to set multiple dependencies separated by space:
```mermaid-example
@ -72,6 +119,13 @@ It is possible to set multiple dependencies separated by space:
cherry :active, c, after b a, 1d
```
```mermaid
gantt
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```
### Title
The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
@ -96,6 +150,16 @@ taska3 : 5min
Final milestone : milestone, m2, 18:14, 2min
```
```mermaid
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min
taska2 : 10min
taska3 : 5min
Final milestone : milestone, m2, 18:14, 2min
```
## Setting dates
`dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
@ -104,34 +168,30 @@ Final milestone : milestone, m2, 18:14, 2min
The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.
```
dateFormat YYYY-MM-DD
```
dateFormat YYYY-MM-DD
The following formatting options are supported:
```
Input Example Description:
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
```
Input Example Description:
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
More info in: https://momentjs.com/docs/#/parsing/string-format/
@ -139,38 +199,34 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/
The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
```
axisFormat %Y-%m-%d
```
axisFormat %Y-%m-%d
The following formatting strings are supported:
```
%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.
```
%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.
More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
@ -260,15 +316,11 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri
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
@ -300,10 +352,8 @@ 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.

717
docs/gitgraph.md
View File

@ -1,6 +1,6 @@
# Gitgraph Diagrams
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
# Gitgraph Diagrams
> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
@ -22,6 +22,20 @@ Mermaid can render Git diagrams
commit
```
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
In Mermaid, we support the basic git operations like:
- _commit_ : Representing a new commit on the current branch.
@ -51,6 +65,13 @@ A simple gitgraph showing three commits on the default (**_main_**) branch:
commit
```
```mermaid
gitGraph
commit
commit
commit
```
If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
### Adding custom commit id
@ -66,6 +87,13 @@ Let us see how this works with the help of the following diagram:
commit id: "Gamma"
```
```mermaid
gitGraph
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
```
In this example, we have given our custom IDs to the commits.
### Modifying commit type
@ -92,6 +120,16 @@ Let us see how these different commit type look with the help of the following d
commit
```
```mermaid
gitGraph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
```
In this example, we have specified different types to each commit. Also, see how we have included both `id` and `type` together at the time of declaring our commits.
### Adding Tags
@ -112,6 +150,17 @@ Let us see how this works with the help of the following diagram:
commit
```
```mermaid
gitGraph
commit
commit id: "Normal" tag: "v1.0.0"
commit
commit id: "Reverse" type: REVERSE tag: "RC_1"
commit
commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
commit
```
In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.
### Create a new branch
@ -132,6 +181,16 @@ Let see this in an example:
commit
```
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.
@ -156,6 +215,19 @@ Let see modify our previous example:
commit
```
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
@ -186,6 +258,22 @@ Let us modify our previous example to merge our two branches:
commit
```
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.
@ -228,6 +316,31 @@ Let us see how this works with the help of the following diagram:
commit id: "9"
```
```mermaid
gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "customID" tag: "customTag" type: REVERSE
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
```
### Cherry Pick commit from another branch
Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.
@ -240,9 +353,9 @@ 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.
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.
Let see an example:
@ -263,6 +376,23 @@ Let see an example:
commit id:"C"
```
```mermaid
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"
```
## Gitgraph specific configuration options
In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
@ -326,6 +456,52 @@ Usage example:
merge release
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
## Commit labels Layout: Rotated or Horizontal
Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.
@ -355,6 +531,25 @@ gitGraph
commit
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
```
Usage example: Horizontal commit labels
```mermaid-example
@ -376,6 +571,25 @@ gitGraph
commit
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
```
## Hiding commit labels
Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
@ -428,6 +642,52 @@ Usage example:
merge release
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
## Customizing main branch name
Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.
@ -458,6 +718,30 @@ Usage example:
commit type:REVERSE id:"SanFrancisco"
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
gitGraph
commit id:"NewYork"
commit id:"Dallas"
branch MetroLine2
commit id:"LosAngeles"
commit id:"Chicago"
commit id:"Houston"
branch MetroLine3
commit id:"Phoenix"
commit type: HIGHLIGHT id:"Denver"
commit id:"Boston"
checkout MetroLine1
commit id:"Atlanta"
merge MetroLine3
commit id:"Miami"
commit id:"Washington"
merge MetroLine2 tag:"MY JUNCTION"
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
```
Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
## Customizing branch ordering
@ -486,6 +770,16 @@ Usage example:
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
```
Look at the diagram, all the branches are following the order defined.
Usage example:
@ -501,6 +795,17 @@ Usage example:
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
gitGraph
commit
branch test1 order: 3
branch test2
branch test3
branch test4 order: 1
```
Look at the diagram, here, all the branches without a specified order are drawn in their order of definition.
Then, `test4` branch is drawn because the order of `1`.
Then, `main` branch is drawn because the order of `2`.
@ -573,6 +878,52 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
### Forest Theme
```mermaid-example
@ -621,6 +972,52 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
### Default Theme
```mermaid-example
@ -669,6 +1066,52 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
gitGraph
commit type:HIGHLIGHT
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
### Dark Theme
```mermaid-example
@ -717,6 +1160,52 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
### Neutral Theme
```mermaid-example
@ -765,6 +1254,52 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
## Customize using Theme Variables
Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram.
@ -789,6 +1324,22 @@ See how the default theme is used to set the colors for the branches:
commit
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
> #### IMPORTANT:
>
> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
@ -830,6 +1381,32 @@ Now let's override the default values for the `git0` to `git3` variables:
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'git0': '#ff0000',
'git1': '#00ff00',
'git2': '#0000ff',
'git3': '#ff00ff',
'git4': '#00ffff',
'git5': '#ffff00',
'git6': '#ff00ff',
'git7': '#00ffff'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the branch colors are changed to the values specified in the theme variables.
### Customizing branch label colors
@ -868,6 +1445,34 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
commit
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'gitBranchLabel0': '#ffffff',
'gitBranchLabel1': '#ffffff',
'gitBranchLabel2': '#ffffff',
'gitBranchLabel3': '#ffffff',
'gitBranchLabel4': '#ffffff',
'gitBranchLabel5': '#ffffff',
'gitBranchLabel6': '#ffffff',
'gitBranchLabel7': '#ffffff',
'gitBranchLabel8': '#ffffff',
'gitBranchLabel9': '#ffffff'
} } }%%
gitGraph
checkout main
branch branch1
branch branch2
branch branch3
branch branch4
branch branch5
branch branch6
branch branch7
branch branch8
branch branch9
checkout branch1
commit
```
Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**.
### Customizing Commit colors
@ -897,6 +1502,26 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the commit label color and background color are changed to the values specified in the theme variables.
### Customizing Commit Label Font Size
@ -927,6 +1552,27 @@ Now let's override the default values for the `commitLabelFontSize` variable:
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00',
'commitLabelFontSize': '16px'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the commit label font size changed.
### Customizing Tag Label Font Size
@ -957,6 +1603,27 @@ Now let's override the default values for the `tagLabelFontSize` variable:
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00',
'tagLabelFontSize': '16px'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the tag label font size changed.
### Customizing Tag colors
@ -986,6 +1653,27 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'tagLabelColor': '#ff0000',
'tagLabelBackground': '#00ff00',
'tagLabelBorder': '#0000ff'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the tag colors are changed to the values specified in the theme variables.
### Customizing Highlight commit colors
@ -1015,4 +1703,23 @@ Now let's override the default values for the `git0` to `git3` variables:
```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'gitInv0': '#ff0000'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.

44
docs/index.html
View File

@ -25,10 +25,12 @@
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script>
// prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-153180559-1', 'auto');
if (location) {
@ -67,6 +69,7 @@
}
</style>
</head>
<body>
<div id="app"></div>
<script>
@ -113,32 +116,29 @@
markdown: {
renderer: {
code: function (code, lang) {
if (lang && (lang.startsWith('mermaid') || lang === 'mmd')) {
var resultingHTML = '';
if (lang === 'mmd' || lang === 'mermaid-example') {
currentCodeExample++;
colorize.push(currentCodeExample);
resultingHTML +=
'<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
}
if (lang === 'mermaid' || lang === 'mermaid-example') {
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>';
}
if (resultingHTML !== '') {
return resultingHTML;
}
if (lang === 'mermaid-example') {
currentCodeExample++;
colorize.push(currentCodeExample);
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') {
return (
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
);
}
return this.origin.code.apply(this, arguments);
},
heading: function (text) {
if (text.includes('THIS IS AN AUTOGENERATED FILE. DO NOT EDIT')) {
return '';
}
return this.origin.heading.apply(this, arguments);
},
},
},
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file;
url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
var editHtml = '[:memo: Edit this Page](' + url + ')\n';
return editHtml + html;
});

2
docs/integrations.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Integrations
The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.

1
docs/introduction.md
View File

@ -0,0 +1 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.

2
docs/mermaidCLI.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# mermaid CLI
mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead.

16
docs/n00b-advanced.md
View File

@ -1,21 +1,19 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Advanced n00b mermaid (Coming soon..)
## splitting mermaid code from html
A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
```
stuff stuff
</div>
</body>
</html>
```
stuff stuff
</div>
</body>
</html>
The actual mermaid file could for example look like this:
```
mermaid content...
```
mermaid content...
---

24
docs/n00b-gettingStarted.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# A Mermaid User-Guide for Beginners
Mermaid is composed of three parts: Deployment, Syntax and Configuration.
@ -10,10 +12,10 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
## Four ways of using mermaid:
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
2. Using [mermaid plugins](./integrations.md) with programs you are familiar with.
3. Calling the Mermaid JavaScript API.
4. Deploying Mermaid as a dependency.
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
2. Using [mermaid plugins](./integrations.md) with programs you are familiar with.
3. Calling the Mermaid JavaScript API.
4. Deploying Mermaid as a dependency.
**Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.**
@ -191,16 +193,16 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
## 4. Adding Mermaid as a dependency.
1. install node v16, which would have npm
1. install node v16, which would have npm
2. download yarn using npm by entering the command below:
npm install -g yarn
2. download yarn using npm by entering the command below:
npm install -g yarn
3. After yarn installs, enter the following command:
yarn add mermaid
3. After yarn installs, enter the following command:
yarn add mermaid
4. To add Mermaid as a Dev Dependency
yarn add --dev mermaid
4. To add Mermaid as a Dev Dependency
yarn add --dev mermaid
**Comments from Knut Sveidqvist, creator of mermaid:**

2
docs/n00b-overview.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Overview for Beginners
**Explaining with a Diagram**

14
docs/n00b-syntaxReference.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Diagram Syntax
Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.
@ -24,6 +26,18 @@ erDiagram
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
## Diagram Breaking

34
docs/newDiagram.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Adding a New Diagram/Chart 📊
### Step 1: Grammar & Parsing
@ -167,15 +169,13 @@ It is probably a good idea to keep the handling similar to this in your new diag
The syntax for adding title and description looks like this:
```
accTitle: The title
accDescr: The description
accTitle: The title
accDescr: The description
accDescr {
Syntax for a description text
written on multiple lines.
}
```
accDescr {
Syntax for a description text
written on multiple lines.
}
In a similar way to the directives the jison syntax are quite similar between the diagrams.
@ -203,15 +203,13 @@ statement
The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
```
import {
setAccTitle,
getAccTitle,
getAccDescription,
setAccDescription,
clear as commonClear,
} from '../../commonDb';
```
import {
setAccTitle,
getAccTitle,
getAccDescription,
setAccDescription,
clear as commonClear,
} from '../../commonDb';
For rendering the accessibility tags you have again an existing function you can use.
@ -260,4 +258,4 @@ const themes = {
};
```
The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.

30
docs/pie.md
View File

@ -1,7 +1,9 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# 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.
@ -12,6 +14,13 @@ pie title Pets adopted by volunteers
"Rats" : 15
```
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
## Syntax
Drawing a pie chart is really simple in mermaid.
@ -24,11 +33,11 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported upto two decimal places)
[pie] [showData] (OPTIONAL)
[title] [titlevalue] (OPTIONAL)
"[datakey1]" : [dataValue1]
"[datakey2]" : [dataValue2]
"[datakey3]" : [dataValue3]
\[pie] \[showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL)
"\[datakey1]" : \[dataValue1]
"\[datakey2]" : \[dataValue2]
"\[datakey3]" : \[dataValue3]
.
.
@ -42,3 +51,12 @@ pie showData
"Magnesium" : 10.01
"Iron" : 5
```
```mermaid
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```

121
docs/requirementDiagram.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Requirement Diagram
> A Requirement diagram provides a visualization for requirements and their connections, to each other and other documented elements. The modeling specs follow those defined by SysML v1.6.
@ -21,6 +23,23 @@ Rendering requirements is straightforward.
test_entity - satisfies -> test_req
```
```mermaid
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
## Syntax
There are three types of components to a requirement diagram: requirement, element, and relationship.
@ -33,14 +52,12 @@ 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.
@ -54,12 +71,10 @@ 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
@ -67,15 +82,11 @@ 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.
@ -147,6 +158,76 @@ This example uses all features of the diagram.
}
test_entity - satisfies -> test_req2
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req3 - contains -> test_req4
test_req4 - derives -> test_req5
test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5
test_req <- copies - test_entity2
```
```mermaid
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
functionalRequirement test_req2 {
id: 1.1
text: the second test text.
risk: low
verifymethod: inspection
}
performanceRequirement test_req3 {
id: 1.2
text: the third test text.
risk: medium
verifymethod: demonstration
}
interfaceRequirement test_req4 {
id: 1.2.1
text: the fourth test text.
risk: medium
verifymethod: analysis
}
physicalRequirement test_req5 {
id: 1.2.2
text: the fifth test text.
risk: medium
verifymethod: analysis
}
designConstraint test_req6 {
id: 1.2.3
text: the sixth test text.
risk: medium
verifymethod: analysis
}
element test_entity {
type: simulation
}
element test_entity2 {
type: word doc
docRef: reqs/test_entity
}
element test_entity3 {
type: "test suite"
docRef: github.com/all_the_tests
}
test_entity - satisfies -> test_req2
test_req - traces -> test_req2
test_req - contains -> test_req3

48
docs/security.md
View File

@ -1,23 +1,25 @@
# Security
The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.
## Reporting vulnerabilities
To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
We aim to reply within three working days, probably much sooner.
You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to security@mermaid.live again if you do not receive prompt attention and regular updates.
You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail security@mernaid.live when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
## Best practices
Keep current with the latest Mermaid releases. We regularly update Mermaid, and these updates may fix security defects discovered in previous versions. Check the Mermaid release notes for security-related updates.
Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly.
## Configuring DomPurify
By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Security
The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.
## Reporting vulnerabilities
To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
We aim to reply within three working days, probably much sooner.
You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to security@mermaid.live again if you do not receive prompt attention and regular updates.
You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail security@mernaid.live when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
## Best practices
Keep current with the latest Mermaid releases. We regularly update Mermaid, and these updates may fix security defects discovered in previous versions. Check the Mermaid release notes for security-related updates.
Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly.
## Configuring DomPurify
By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.

292
docs/sequenceDiagram.md
View File

@ -1,6 +1,6 @@
# Sequence diagrams
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
# Sequence diagrams
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
@ -13,6 +13,13 @@ sequenceDiagram
Alice-)John: See you later!
```
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
```note
A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
@ -36,6 +43,14 @@ sequenceDiagram
Bob->>Alice: Hi Alice
```
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
### Actors
If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
@ -48,6 +63,14 @@ sequenceDiagram
Bob->>Alice: Hi Alice
```
```mermaid
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
### Aliases
The actor can have a convenient identifier and a descriptive label.
@ -60,13 +83,19 @@ sequenceDiagram
J->>A: Great!
```
```mermaid
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
```
## 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:
@ -93,6 +122,14 @@ sequenceDiagram
deactivate John
```
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
```
There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
```mermaid-example
@ -101,6 +138,12 @@ sequenceDiagram
John-->>-Alice: Great!
```
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
```
Activations can be stacked for same actor:
```mermaid-example
@ -111,10 +154,18 @@ sequenceDiagram
John-->>-Alice: I feel great!
```
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
## Notes
It is possible to add notes to a sequence diagram. This is done by the notation
Note [ right of | left of | over ] [Actor]: Text in note content
Note \[ right of | left of | over ] \[Actor]: Text in note content
See the example below:
@ -124,6 +175,12 @@ sequenceDiagram
Note right of John: Text in note
```
```mermaid
sequenceDiagram
participant John
Note right of John: Text in note
```
It is also possible to create notes spanning two participants:
```mermaid-example
@ -132,15 +189,19 @@ sequenceDiagram
Note over Alice,John: A typical interaction
```
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```
## Loops
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:
@ -152,25 +213,29 @@ sequenceDiagram
end
```
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
```
## Alt
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:
@ -187,21 +252,32 @@ sequenceDiagram
end
```
```mermaid
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
```
## Parallel
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:
@ -216,6 +292,17 @@ sequenceDiagram
John-->>Alice: Hi Alice!
```
```mermaid
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
```
It is also possible to nest parallel blocks.
```mermaid-example
@ -232,21 +319,33 @@ sequenceDiagram
end
```
```mermaid
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
```
## Critical Region
It is possible to show actions that must happen automatically with conditional handling of circumstances.
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:
@ -261,6 +360,17 @@ sequenceDiagram
end
```
```mermaid
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
option Network timeout
Service-->Service: Log error
option Credentials rejected
Service-->Service: Log different error
end
```
It is also possible to have no options at all
```mermaid-example
@ -270,6 +380,13 @@ sequenceDiagram
end
```
```mermaid
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
end
```
This critical block can also be nested, equivalently to the `par` statement as seen above.
## Break
@ -278,11 +395,9 @@ 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:
@ -296,23 +411,31 @@ sequenceDiagram
API-->BillingService: Start billing process
```
```mermaid
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
```
## Background Highlighting
It is possible to highlight flows by providing colored background rects. This is done by the notation
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:
@ -335,6 +458,25 @@ sequenceDiagram
```
```mermaid
sequenceDiagram
participant Alice
participant John
rect rgb(191, 223, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(200, 150, 255)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
```
## Comments
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
@ -356,6 +498,12 @@ sequenceDiagram
B->>A: I #9829; you #infin; times more!
```
```mermaid
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
```
Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
Because semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.
@ -385,15 +533,26 @@ sequenceDiagram
Bob-->>John: Jolly good!
```
```mermaid
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
## Actor Menus
Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
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>
```mmd
sequenceDiagram
@ -414,9 +573,7 @@ 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:
@ -431,6 +588,17 @@ sequenceDiagram
Alice-)John: See you later!
```
```mermaid
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
## Styling
Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss

185
docs/stateDiagram.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# State diagrams
> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
@ -15,6 +17,17 @@ stateDiagram-v2
Crash --> [*]
```
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
Older renderer:
```mermaid-example
@ -28,6 +41,17 @@ stateDiagram
Crash --> [*]
```
```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
## States
@ -39,6 +63,11 @@ stateDiagram-v2
s1
```
```mermaid
stateDiagram-v2
s1
```
Another way is by using the state keyword with a description as per below:
```mermaid-example
@ -46,6 +75,11 @@ stateDiagram-v2
state "This is a state description" as s2
```
```mermaid
stateDiagram-v2
state "This is a state description" as s2
```
Another way to define a state with a description is to define the state id followed by a colon and the description:
```mermaid-example
@ -53,9 +87,14 @@ stateDiagram-v2
s2 : This is a state description
```
```mermaid
stateDiagram-v2
s2 : This is a state description
```
## Transitions
Transitions are path/edges when one state passes into another. This is represented using text arrow, "\-\-\>".
Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->".
When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
@ -64,6 +103,11 @@ stateDiagram-v2
s1 --> s2
```
```mermaid
stateDiagram-v2
s1 --> s2
```
It is possible to add text to a transition. To describe what it represents.
```mermaid-example
@ -71,9 +115,14 @@ stateDiagram-v2
s1 --> s2: A transition
```
```mermaid
stateDiagram-v2
s1 --> s2: A transition
```
## Start and End
There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
```mermaid-example
stateDiagram-v2
@ -81,12 +130,18 @@ stateDiagram-v2
s1 --> [*]
```
```mermaid
stateDiagram-v2
[*] --> s1
s1 --> [*]
```
## Composite states
In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
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:
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:
```mermaid-example
stateDiagram-v2
@ -97,6 +152,15 @@ stateDiagram-v2
}
```
```mermaid
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
```
You can do this in several layers:
```mermaid-example
@ -118,6 +182,25 @@ stateDiagram-v2
}
```
```mermaid
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
```
You can also define transitions also between composite states:
```mermaid-example
@ -140,11 +223,31 @@ stateDiagram-v2
}
```
```mermaid
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
```
_You can not define transitions between internal states belonging to different composite states_
## Choice
Sometimes you need to model a choice between two or more paths, you can do so using &lt;&lt;choice&gt;&gt;.
Sometimes you need to model a choice between two or more paths, you can do so using <\<choice>>.
```mermaid-example
stateDiagram-v2
@ -155,9 +258,18 @@ stateDiagram-v2
if_state --> True : if n >= 0
```
```mermaid
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
```
## Forks
It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;.
It is possible to specify a fork in the diagram using <\<fork>> <\<join>>.
```mermaid-example
stateDiagram-v2
@ -173,6 +285,20 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&
State4 --> [*]
```
```mermaid
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
```
## Notes
Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
@ -190,6 +316,17 @@ Here you can choose to put the note to the _right of_ or to the _left of_ a node
note left of State2 : This is the note to the left.
```
```mermaid
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
```
## Concurrency
As in plantUml you can specify concurrency using the -- symbol.
@ -213,6 +350,25 @@ stateDiagram-v2
}
```
```mermaid
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
```
## Setting the direction of the diagram
With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
@ -230,6 +386,19 @@ stateDiagram
B --> D
```
```mermaid
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
```
## Comments
Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
@ -258,3 +427,9 @@ stateDiagram-v2
Yswsii: Your state with spaces in it
[*] --> Yswsii
```
```mermaid
stateDiagram-v2
Yswsii: Your state with spaces in it
[*] --> Yswsii
```

280
docs/theming.md
View File

@ -1,6 +1,6 @@
# Theme Configuration
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)
# Theme Configuration
With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
@ -12,15 +12,15 @@ Themes follow and build upon the Levels of Configuration, and employ `directives
The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
2. **forest**- A theme full of light greens that is easy on the eyes.
2. **forest**- A theme full of light greens that is easy on the eyes.
3. **dark**- A theme that would go well with other dark-colored elements.
3. **dark**- A theme that would go well with other dark-colored elements.
4. **default**- The default theme for all diagrams.
4. **default**- The default theme for all diagrams.
5. **neutral**- The theme to be used for black and white printing.
5. **neutral**- The theme to be used for black and white printing.
## Site-wide Themes
@ -67,6 +67,24 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
end
```
```mermaid
%%{init: {'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
# List of Themes
# Customizing Themes with `themeVariables`
@ -97,6 +115,24 @@ The easiest way to make a custom theme is to start with the base theme, and just
end
```
```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
**Notes:**
Leaving it empty will set all variable values to default.
@ -220,6 +256,24 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
end
```
```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
- Make the primary color a little lighter
@ -244,6 +298,24 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
end
```
```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
# Common theming activities
@ -275,6 +347,24 @@ In the following examples, the directive `init` is used, with the `theme` being
end
```
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
@ -313,6 +403,24 @@ In the following examples, the directive `init` is used, with the `theme` being
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
C ==>|One| D[Laptop]
C x--x|Two| E[iPhone]
C o--o|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
### Sequence diagram
```mermaid-example
@ -334,6 +442,25 @@ In the following examples, the directive `init` is used, with the `theme` being
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
```
### Class diagram
```mermaid-example
@ -362,6 +489,32 @@ classDiagram
}
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
### Gantt
```mermaid-example
@ -394,6 +547,36 @@ gantt
Add another diagram to demo page :48h
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
### State diagram
```mermaid-example
@ -426,6 +609,36 @@ gantt
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse
note right of SomethingElse : This is the note to the right.
SomethingElse --> [*]
```
### State diagram (beta)
```mermaid-example
@ -457,6 +670,35 @@ stateDiagram-v2
SomethingElse2 --> [*]
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*]
```
### Entity Relations diagram
```mermaid-example
@ -471,6 +713,18 @@ stateDiagram-v2
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
### User journey diagram
```mermaid-example
@ -484,3 +738,15 @@ journey
Go downstairs: 5: Me
Sit down: 5: Me
```
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```

2
docs/upgrading.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Upgrading
Some of the interfaces has been upgraded.

40
docs/usage.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Usage
Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
@ -6,7 +8,7 @@ Diagrams can be re-rendered/modified by modifying their descriptions.
### CDN
[https://unpkg.com/mermaid/](https://unpkg.com/mermaid/)
<https://unpkg.com/mermaid/>
Please note that you can switch versions through the dropdown box at the top right.
@ -20,20 +22,18 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
**Using the npm package**
```
1. You will need to install node v16, which would have npm.
1. You will need to install node v16, which would have npm.
2. download yarn using npm.
2. download yarn using npm.
3. enter the following command:
yarn add mermaid
3. enter the following command:
yarn add mermaid
4. At this point, you can add mermaid as a dev dependency using this command:
yarn add --dev mermaid
4. At this point, you can add mermaid as a dev dependency using this command:
yarn add --dev mermaid
5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
as is shown in the example below
```
5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
as is shown in the example below
**Hosting mermaid on a web page.**
@ -242,11 +242,11 @@ var id = 'theGraph';
mermaidAPI.render(id, txt, insertSvg, element);
```
1. The graph is generated using the render call.
2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
4. Insert the SVG code into the DOM for presentation.
5. Call the binding function that binds the events.
1. The graph is generated using the render call.
2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
4. Insert the SVG code into the DOM for presentation.
5. Call the binding function that binds the events.
## Example of a marked renderer
@ -323,10 +323,10 @@ One effective and more future-proof method of validating your graph definitions,
Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
setting the options in mermaid.
1. Instantiation of the configuration using the initialize call
2. _Using the global mermaid object_ - **Deprecated**
3. _using the global mermaid_config object_ - **Deprecated**
4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
1. Instantiation of the configuration using the initialize call
2. _Using the global mermaid object_ - **Deprecated**
3. _using the global mermaid_config object_ - **Deprecated**
4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
configuration objects are described [in the mermaidAPI documentation](Setup.md).

14
docs/user-journey.md
View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# User Journey Diagram
> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
@ -16,6 +18,18 @@ journey
Sit down: 5: Me
```
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
Each user journey is split into sections, these describe the part of the task
the user is trying to complete.

18
package.json
View File

@ -26,7 +26,9 @@
"build:dev": "webpack --mode development --progress --color",
"build:prod": "webpack --mode production --progress --color",
"build": "concurrently \"yarn build:dev\" \"yarn build:prod\"",
"postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
"docs:build": "ts-node-esm src/docs.mts",
"docs:verify": "ts-node-esm src/docs.mts --verify",
"postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md; yarn docs:build",
"build:watch": "yarn build:dev --watch",
"release": "yarn build",
"lint": "eslint --cache --ignore-path .gitignore .; prettier --check .",
@ -82,12 +84,12 @@
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.0.0",
"@types/d3": "^7.4.0",
"@types/dompurify": "^2.3.3",
"@types/dompurify": "^2.3.4",
"@types/jest": "^28.1.7",
"@types/stylis": "^4.0.2",
"@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1",
"babel-jest": "^29.0.1",
"babel-jest": "^29.0.2",
"babel-loader": "^8.2.2",
"concurrently": "^7.0.0",
"coveralls": "^3.0.2",
@ -100,13 +102,14 @@
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-jest": "^27.0.1",
"eslint-plugin-jsdoc": "^39.1.0",
"eslint-plugin-jsdoc": "^39.3.6",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-markdown": "^3.0.0",
"globby": "^13.1.2",
"husky": "^8.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^28.0.3",
"jest-environment-jsdom": "^29.0.1",
"jest-environment-jsdom": "^29.0.2",
"jison": "^0.4.18",
"js-base64": "3.7.2",
"lint-staged": "^13.0.0",
@ -114,11 +117,14 @@
"path-browserify": "^1.0.1",
"prettier": "^2.3.2",
"prettier-plugin-jsdoc": "^0.3.30",
"remark": "^14.0.2",
"start-server-and-test": "^1.12.6",
"terser-webpack-plugin": "^5.3.6",
"ts-jest": "^28.0.8",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"ts-node": "^10.9.1",
"typescript": "^4.8.2",
"unist-util-flatmap": "^1.0.0",
"webpack": "^5.53.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.10.1",

4
src/__mocks__/mermaidAPI.ts
View File

@ -1,8 +1,7 @@
/**
* Mocks for `./mermaidAPI`.
*
* We can't easily use `jest.spyOn(mermaidAPI, "function")` since the object
* is frozen with `Object.freeze()`.
* We can't easily use `jest.spyOn(mermaidAPI, "function")` since the object is frozen with `Object.freeze()`.
*/
import * as configApi from '../config';
@ -17,7 +16,6 @@ import Diagram from '../Diagram';
let hasLoadedDiagrams = false;
/**
*
* @param text
* @param parseError
*/

84
src/docs.mts Normal file
View File

@ -0,0 +1,84 @@
import { remark } from 'remark';
import type { Code, Root } from 'mdast';
import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
// @ts-ignore
import flatmap from 'unist-util-flatmap';
import { globby } from 'globby';
import { join, dirname } from 'path';
import { exec } from 'child_process';
import prettier from 'prettier';
const verify = process.argv.includes('--verify');
const git = process.argv.includes('--git');
let fileChanged = false;
// Possible Improvement: combine with lint-staged to only copy files that have changed
const prepareOutFile = (file: string): string => {
const outFile = join('docs', file.replace('src/docs/', ''));
mkdirSync(dirname(outFile), { recursive: true });
return outFile;
};
const verifyAndCopy = (file: string, content?: string) => {
const outFile = prepareOutFile(file);
const existingBuffer = existsSync(outFile) ? readFileSync(outFile) : Buffer.from('#NEW FILE#');
const newBuffer = content ? Buffer.from(content) : readFileSync(file);
if (existingBuffer.equals(newBuffer)) {
// Files are same, skip.
return;
}
console.log(`File changed: ${outFile}`);
fileChanged = true;
if (!verify) {
writeFileSync(outFile, newBuffer);
}
};
const transform = (file: string) => {
const doc = readFileSync(file, 'utf8');
const ast: Root = remark.parse(doc);
const out = flatmap(ast, (c: Code) => {
if (c.type !== 'code' || !c.lang?.startsWith('mermaid')) {
return [c];
}
if (c.lang === 'mermaid' || c.lang === 'mmd') {
c.lang = 'mermaid-example';
}
return [c, Object.assign({}, c, { lang: 'mermaid' })];
});
const transformed = `# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.\n${remark.stringify(
out
)}`;
verifyAndCopy(
file,
prettier.format(transformed, {
parser: 'markdown',
useTabs: false,
tabWidth: 2,
endOfLine: 'auto',
printWidth: 100,
singleQuote: true,
})
);
};
(async () => {
const mdFiles = await globby(['./src/docs/**/*.md'], { dot: true });
mdFiles.forEach(transform);
const nonMDFiles = await globby(['src/docs/**', '!**/*.md'], { dot: true });
nonMDFiles.forEach((file) => {
verifyAndCopy(file);
});
if (fileChanged) {
if (verify) {
console.log(
"Changes detected in files in `docs`. Please run `yarn docs:build` after making changes to 'src/docs' to update the `docs` folder."
);
process.exit(1);
}
if (git) {
console.log('Adding changes in docs folder to git');
exec('git add docs');
}
}
})();

0
src/docs/.nojekyll Normal file
View File

213
src/docs/8.6.0_docs.md Normal file
View File

@ -0,0 +1,213 @@
# Version 8.6.0 Changes
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
## [CDN](https://unpkg.com/mermaid/)
With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](./Setup.md).
This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams.
**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**
the `init` directive is the main method of configuration for Site and Current Levels.
The three levels of are Configuration, Global, Site and Current.
| Level of Configuration | Description |
| ---------------------- | ----------------------------------- |
| Global Configuration | Default Mermaid Configurations |
| Site Configuration | Configurations made by site owner |
| Current Configuration | Configurations made by Implementors |
# Limits to Modifying Configurations
**secure Array**
| Parameter | Description | Type | Required | Values |
| --------- | ------------------------------------------------ | ----- | -------- | -------------- |
| secure | Array of parameters excluded from init directive | Array | Required | Any parameters |
The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array holding the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it.
# Secure Arrays
Site owners can add to the **secure** array using this command:
mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } );
Default values for the `secure array` consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
Implementors can only modify configurations using directives, and cannot change the `secure` array.
# Modifying Configurations and directives:
The Two types of directives: are `init` (or `initialize`) and `wrap`.
```note
All directives are enclosed in `%%{ }%%`
```
Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible.
# Init
`init`, or `initialize`: this directive gives the user the ability to overwrite and change the values for any configuration parameters not set in the secure array.
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
| init | modifies configurations | Directive | Optional | Any parameters not included in the secure array |
```note
init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
**for example**:
`%%{init: {"theme": "default", "logLevel": 1 }}%%`
Configurations that are passed through init cannot change the parameters in a secure array at a higher level. In the event of a collision, mermaid will give priority to secure arrays and parse the request without changing the values of those parameters in conflict.
When deployed within code, init is called before the graph/diagram description.
```
**for example**:
```mmd
%%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR
a-->b
b-->c
c-->d
d-->e
e-->f
f-->g
g-->
```
# Wrap
| Parameter | Description | Type | Required | Values |
| --------- | ----------------------------- | --------- | -------- | ---------- |
| wrap | a callable text-wrap function | Directive | Optional | %%{wrap}%% |
```note
Wrap is a function that is currently only deployable for sequence diagrams.
Wrap respects a manually added <br\>, so if the user wants to break up their text, they have full control over line breaks by adding <br\> tags.
It is a non-argument directive and can be executed thusly:
`%%{wrap}%%` .
```
**An example of text wrapping in a sequence diagram**:
![Image showing wrapped text](img/wrapped%20text.png)
# Resetting Configurations:
There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.
**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes set from the last mermaidAPI.initialize({...}) configuration.
**globalReset** will reset both the current configuration AND the site configuration back to the global defaults.
**Notes**: Both `reset` and `globalReset` are only available to site owners, and as such implementors have to edit their configs using `init`.
# Additional Utils to mermaid
• **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%.
• **assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth.
Example of **assignWithDepth**:
![Image showing assignWithDepth](img/assignWithDepth.png)
Example of **object.Assign**:
![Image showing object.assign without depth](img/object.assign%20without%20depth.png)
• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height.
**Notes**: For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.
# New API Requests Introduced in Version 8.6.0
## setSiteConfig
| Function | Description | Type | Values | Parameters | Returns |
| --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
| `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf | siteConfig |
```note
Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
to the defaultConfig
Note: currentConfig is set in this function。
Default value: will mirror Global Config
```
## getSiteConfig
| Function | Description | Type | Values |
| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
| `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |
```note
Returns any values in siteConfig.
```
## setConfig
| Function | Description | Type | Values | Parameters | Returns |
| ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- |
| `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf | `currentConfig` merged with the sanitized conf |
```note
Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
values found in conf with key found in siteConfig.secure will be replaced with the corresponding
siteConfig value.
```
## getConfig
| Function | Description | Type | Return Values |
| ----------- | --------------------------- | ----------- | ------------------------------- |
| `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |
```note
Returns any values in currentConfig.
```
## sanitize
| Function | Description | Type | Values |
| ---------- | ---------------------------------------- | -------------- | ------ |
| `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None |
```note
modifies options in-place
Ensures options parameter does not attempt to override siteConfig secure keys.
```
## reset
| Function | Description | Type | Required | Values | Parameter |
| -------- | ------------------------------ | ----------- | -------- | ------ | --------- |
| `reset` | Resets `currentConfig` to conf | Put Request | Required | None | conf |
## conf
| Parameter | Description | Type | Required | Values |
| --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- |
| `conf` | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array |
```note
default: current siteConfig (optional, default `getSiteConfig()`)
```
## For more information, read [Setup](Setup.md).

1024
src/docs/CHANGELOG.md Normal file
View File

File diff suppressed because it is too large Load Diff

20
src/docs/Configuration.md Normal file
View File

@ -0,0 +1,20 @@
# Configuration
Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams.
The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
## Configuration Section in the [Live Editor](https://mermaid.live/).
## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag.
## [Directives](./directives.md),
Directives allows limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
## Theme Creation:
An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams.
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes

302
src/docs/README.md Normal file
View File

@ -0,0 +1,302 @@
# About Mermaid
**Mermaid lets you create diagrams and visualizations using text and code.**
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
<img src="img/header.png" alt="" />
[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
<!-- Mermaid book banner -->
[![Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)
<!-- <Main description> -->
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
Diagramming and documentation costs precious developer time and gets outdated quickly.
But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
<br/>
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
[Tutorials](./Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
<a href="https://applitools.com/">
<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
</a>
## Diagram Types
### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax)
```mmd
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
![Flowchart](img/flow.png)
### [Sequence diagram](./sequenceDiagram.md)
```mmd
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
![Sequence diagram](img/sequence.png)
### [Gantt diagram](./gantt.md)
```mmd
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
![Gantt diagram](img/gantt.png)
### [Class diagram](./classDiagram.md)
```mmd
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
![Class diagram](img/class.png)
### Git graph
```mermaid-example
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
```mmd
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
![ER diagram](img/simple-er.png)
### [User Journey Diagram](./user-journey.md)
```mmd
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
![Journey diagram](img/user-journey.png)
## Installation
**In depth guides and examples can be found at [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).**
### CDN
```
https://unpkg.com/mermaid@<version>/dist/
```
To select a version:
Replace `<version>` with the desired version number.
Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
## Deploying Mermaid
To Deploy Mermaid:
1. You will need to install node v16, which would have npm
2. Download yarn using npm
3. Enter the following command: `yarn add mermaid`
4. You can then add mermaid as a dev dependency using this command:
`yarn add --dev mermaid`
### [Mermaid API](./Setup.md):
**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:**
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
```
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
**Examples can be found at** [Other examples](/examples)
## Sibling projects
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
## Request for Assistance
Things are piling up and I have a hard time keeping up. It would be great if we could form a core team of developers to cooperate
with the future development of mermaid.
As part of this team you would get write access to the repository and would
represent the project when answering questions and issues.
Together we could continue the work with things like:
- Adding more types of diagrams like mindmaps, ert diagrams, etc.
- Improving existing diagrams
Don't hesitate to contact me if you want to get involved!
## For contributors
### Setup
```sh
yarn install
```
### Build
```sh
yarn build:watch
```
### Lint
```sh
yarn lint
```
We use [eslint](https://eslint.org/).
We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/integrations) to get real time lint result.
### Test
```sh
yarn test
```
Manual test in browser: open `dist/index.html`
### Release
For those who have the permission to do so:
Update version number in `package.json`.
```sh
npm publish
```
The above command generates files into the `dist` folder and publishes them to npmjs.org.
## Related projects
- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [HTTP Server](https://github.com/TomWright/mermaid-server)
## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
## Security and safe diagrams
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
## Reporting vulnerabilities
To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
## Appreciation
A quick note from Knut Sveidqvist:
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
>
> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
---
_Mermaid was created by Knut Sveidqvist for easier documentation._

15
src/docs/SUMMARY.md Normal file
View File

@ -0,0 +1,15 @@
# Summary
- [mermaid](README.md)
- [FAQ](faq.md)
- [Breaking changes](breakingChanges.md)
- [Usage](usage.md)
- [Flowchart](flowchart.md)
- [Sequence diagram](sequenceDiagram.md)
- [Gantt diagram](gantt.md)
- [mermaid CLI](mermaidCLI.md)
- [Demos](demos.md)
- [mermaidAPI](mermaidAPI.md)
- [Development](development.md)
- [Upgrading](upgrading.md)
- [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook)

1618
src/docs/Setup.md Normal file
View File

File diff suppressed because it is too large Load Diff

72
src/docs/Tutorials.md Normal file
View File

@ -0,0 +1,72 @@
# Tutorials
This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
**Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.
## Live-Editor Tutorials
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
[Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA)
[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
## Mermaid with HTML
Examples are provided in [Getting Started](n00b-gettingStarted.md)
**CodePen Examples:**
https://codepen.io/CarlBoneri/pen/BQwZzq
https://codepen.io/tdkn/pen/vZxQzd
https://codepen.io/janzeteachesit/pen/OWWZKN
## Mermaid with Text Area
https://codepen.io/Ryuno-Ki/pen/LNxwgR
## Mermaid in open source docs
[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/)
[K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
## Jupyter Integration with mermaid-js
Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
```python
import base64
from IPython.display import Image, display
import matplotlib.pyplot as plt
def mm(graph):
graphbytes = graph.encode("ascii")
base64_bytes = base64.b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
display(Image(url="https://mermaid.ink/img/" + base64_string))
mm("""
graph LR;
A--> B & C & D;
B--> A & E;
C--> A & E;
D--> A & E;
E--> B & C & D;
""")
```
**Output**
![Example graph of the Python integration](img/python-mermaid-integration.png)

13
src/docs/_navbar.md Normal file
View File

@ -0,0 +1,13 @@
- Getting started
- [Quick start](quickstart.md)
- [Writing more pages](more-pages.md)
- [Custom navbar](custom-navbar.md)
- [Cover page](cover.md)
- Configuration
- [Configuration](configuration.md)
- [Themes](themes.md)
- [Using plugins](plugins.md)
- [Markdown configuration](markdown.md)
- [Language highlight](language-highlight.md)

43
src/docs/_sidebar.md Normal file
View File

@ -0,0 +1,43 @@
- 📔 Introduction
- [About Mermaid](README.md)
- [Deployment](n00b-gettingStarted.md)
- [Syntax and Configuration](n00b-syntaxReference.md)
- 📊 Diagram Syntax
- [Flowchart](flowchart.md)
- [Sequence Diagram](sequenceDiagram.md)
- [Class Diagram](classDiagram.md)
- [State Diagram](stateDiagram.md)
- [Entity Relationship Diagram](entityRelationshipDiagram.md)
- [User Journey](user-journey.md)
- [Gantt](gantt.md)
- [Pie Chart](pie.md)
- [Requirement Diagram](requirementDiagram.md)
- [Gitgraph (Git) Diagram 🔥](gitgraph.md)
- [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md)
- [Other Examples](examples.md)
- ⚙️ Deployment and Configuration
- [Tutorials](Tutorials.md)
- [API-Usage](usage.md)
- [Mermaid API Configuration](Setup.md)
- [Directives](directives.md)
- [Theming](theming.md)
- [Accessibility](accessibility.md)
- [Mermaid CLI](mermaidCLI.md)
- [Advanced usage](n00b-advanced.md)
- 📚 Misc
- [Use-Cases and Integrations](integrations.md)
- [FAQ](faq.md)
- 🙌 Contributions and Community
- [Overview for Beginners](n00b-overview.md)
- [Development and Contribution ](development.md)
- [Changelog](CHANGELOG.md)
- [Adding Diagrams ](newDiagram.md)
- [Security ](security.md)

208
src/docs/accessibility.md Normal file
View File

@ -0,0 +1,208 @@
# Accessibility Options
## Accessibility
Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
## Defining Accessibility Options
### Single line accessibility values
The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
- `accTitle: "Your Accessibility Title"` or
- `accDescr: "Your Accessibility Description"`
**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
Let us take a look at the following example with a flowchart diagram:
```mermaid-example
graph LR
accTitle: Big decisions
accDescr: Flow chart of the decision making process
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
### Multi-line Accessibility title/description
You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.
`accTitle: My single line title value` (**_single line format_**)
vs
`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
Let us look at it in the following example, with same flowchart:
```mermaid-example
graph LR
accTitle: Big decisions
accDescr {
My multi-line description
of the diagram
}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
### Sample Code Snippet for other diagram types
#### Sequence Diagram
```mermaid-example
sequenceDiagram
accTitle: My Sequence Diagram
accDescr: My Sequence Diagram Description
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
#### Class Diagram
```mermaid-example
classDiagram
accTitle: My Class Diagram
accDescr: My Class Diagram Description
Vehicle <|-- Car
```
#### State Diagram
```mermaid-example
stateDiagram
accTitle: My State Diagram
accDescr: My State Diagram Description
s1 --> s2
```
#### Entity Relationship Diagram
```mermaid-example
erDiagram
accTitle: My Entity Relationship Diagram
accDescr: My Entity Relationship Diagram Description
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
#### User Journey Diagram
```mermaid-example
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
#### Gantt Chart
```mermaid-example
gantt
accTitle: My Gantt Chart Accessibility Title
accDescr: My Gantt Chart Accessibility Description
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
#### Pie Chart
```mermaid-example
pie
accTitle: My Pie Chart Accessibility Title
accDescr: My Pie Chart Accessibility Description
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
#### Requirement Diagram
```mermaid-example
requirementDiagram
accTitle: My Requirement Diagram
accDescr: My Requirement Diagram Description
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
#### Gitgraph
```mermaid-example
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```

49
src/docs/breakingChanges.md Normal file
View File

@ -0,0 +1,49 @@
# Breaking changes
### Breaking changes from history version to latest version:
## #1
```javascript
mermaid.initialize({
sequenceDiagram:{
...
}
})
```
has been changed to
```javascript
mermaid.initialize({
sequence:{
...
}
})
```
## #2
In old versions you needed to reference a CSS file in your HTML:
```html
<link rel="stylesheet" href="mermaid.min.css" />
```
or
```html
<link rel="stylesheet" href="mermaid.forest.min.css" />
```
Now it is not needed, and there are no more CSS files in the distribution files.
You just:
```javascript
mermaid.initialize({
theme: 'forest',
});
```
and it works like a charm because now the CSS is inline with the SVG to allow simpler portability.

363
src/docs/c4c.md Normal file
View File

@ -0,0 +1,363 @@
# C4 Diagrams
> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
```mermaid-example
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
For an example, see the source code demos/index.html
5 types of C4 charts are supported.
- System Context (C4Context)
- Container diagram (C4Container)
- Component diagram (C4Component)
- Dynamic diagram (C4Dynamic)
- Deployment diagram (C4Deployment)
Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.
The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements.
The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
- Layout
- - Lay_U, Lay_Up
- - Lay_D, Lay_Down
- - Lay_L, Lay_Left
- - Lay_R, Lay_Right
The following unfinished features are not supported in the short term.
- [ ] sprite
- [ ] tags
- [ ] link
- [ ] Legend
- [x] System Context
- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] Person_Ext
- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] SystemDb
- - [x] SystemQueue
- - [x] System_Ext
- - [x] SystemDb_Ext
- - [x] SystemQueue_Ext
- - [x] Boundary(alias, label, ?type, ?tags, $link)
- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
- - [x] System_Boundary
- [x] Container diagram
- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ContainerDb
- - [x] ContainerQueue
- - [x] Container_Ext
- - [x] ContainerDb_Ext
- - [x] ContainerQueue_Ext
- - [x] Container_Boundary(alias, label, ?tags, $link)
- [x] Component diagram
- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ComponentDb
- - [x] ComponentQueue
- - [x] Component_Ext
- - [x] ComponentDb_Ext
- - [x] ComponentQueue_Ext
- [x] Dynamic diagram
- - [x] RelIndex(index, from, to, label, ?tags, $link)
- [x] Deployment diagram
- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- [x] Relationship Types
- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] BiRel (bidirectional relationship)
- - [x] Rel_U, Rel_Up
- - [x] Rel_D, Rel_Down
- - [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.
- [ ] Custom tags/stereotypes support and skinparam 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.
- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
```
UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")
```
## C4 System Context Diagram (C4Context)
```mermaid-example
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
## C4 Container diagram (C4Container)
```mermaid-example
C4Container
title Container diagram for Internet Banking System
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
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_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.")
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, web_app, "Uses", "HTTPS")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "Uses", "HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "Uses")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
Rel(email_system, customer, "Sends e-mails to")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
```
## C4 Component diagram (C4Component)
```mermaid-example
C4Component
title Component diagram for Internet Banking System - API Application
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
Rel(sign, security, "Uses")
Rel(accounts, mbsfacade, "Uses")
Rel(security, db, "Read & write to", "JDBC")
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
}
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
Rel(spa, accounts, "Uses", "JSON/HTTPS")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
UpdateRelStyle(ma, accounts, $offsetY="-40")
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
```
## C4 Dynamic diagram (C4Dynamic)
```mermaid-example
C4Dynamic
title Dynamic diagram for Internet Banking System - API Application
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
Container_Boundary(b, "API Application") {
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
}
Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
Rel(c2, c3, "Calls isAuthenticated() on")
Rel(c3, c4, "select * from users where username = ?", "JDBC")
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
```
## C4 Deployment diagram (C4Deployment)
```mermaid-example
C4Deployment
title Deployment Diagram for Internet Banking System - Live
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
}
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
}
}
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
}
}
Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
}
}
Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
}
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
Rel(spa, api, "Makes API calls to", "json/HTTPS")
Rel_U(web, spa, "Delivers to the customer's web browser")
Rel(api, db, "Reads from and writes to", "JDBC")
Rel(api, db2, "Reads from and writes to", "JDBC")
Rel_R(db, db2, "Replicates data to")
UpdateRelStyle(spa, api, $offsetY="-40")
UpdateRelStyle(web, spa, $offsetY="-40")
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
UpdateRelStyle(db, db2, $offsetY="-10")
```

625
src/docs/classDiagram.md Normal file
View File

@ -0,0 +1,625 @@
# Class diagrams
> "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
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.
Mermaid can render class diagrams.
```mermaid-example
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
## Syntax
### Class
UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
A single instance of a class in the diagram contains three compartments:
- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class.
- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
```mermaid-example
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```
## Define a class
There are two ways to define a class:
- Explicitly using keyword **class** like `class Animal` which would define the Animal class.
- Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`.
```mermaid-example
classDiagram
class Animal
Vehicle <|-- Car
```
Naming convention: a class name should be composed only of alphanumeric characters (including unicode), and underscores.
## Defining Members of a class
UML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them.
Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and all others as attributes.
There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :
- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
```mermaid-example
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```
- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
```mermaid-example
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount)
}
```
#### Return Type
Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:
```mermaid-example
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawal(amount) int
}
```
#### 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**). Note: **nested** type declarations such as `List<List<int>>` are not currently supported.
Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
```mermaid-example
classDiagram
class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
```
#### Return Type
Optionally you can end the method/function definition with the data type that will be returned.
#### Visibility
To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name:
- `+` Public
- `-` Private
- `#` Protected
- `~` Package/Internal
> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
>
> - `*` Abstract e.g.: `someAbstractMethod()*`
> - `$` Static e.g.: `someStaticMethod()$`
> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
>
> - `$` Static e.g.: `String someField$`
## Defining Relationship
A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
```
[classA][Arrow][ClassB]
```
There are eight different types of relations defined for classes under UML which are currently supported:
| Type | Description |
| ----- | ------------- |
| <\|-- | Inheritance |
| \*-- | Composition |
| o-- | Aggregation |
| --> | Association |
| -- | Link (Solid) |
| ..> | Dependency |
| ..\|> | Realization |
| .. | Link (Dashed) |
```mermaid-example
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
```
We can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well:
```mermaid-example
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
```
### Labels on Relations
It is possible to add label text to a relation:
```
[classA][Arrow][ClassB]:LabelText
```
```mermaid-example
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
```
### Two-way relations
Relations can logically represent an N:M association:
```mmd
classDiagram
Animal <|--|> Zebra
```
Here is the syntax:
```
[Relation Type][Link][Relation Type]
```
Where `Relation Type` can be one of:
| Type | Description |
| ---- | ----------- |
| <\| | Inheritance |
| \* | Composition |
| o | Aggregation |
| > | Association |
| < | Association |
| \|> | Realization |
And `Link` can be one of:
| Type | Description |
| ---- | ----------- |
| -- | Solid |
| .. | Dashed |
## Cardinality / Multiplicity on relations
Multiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies.
Multiplicity notations are placed near the end of an association.
The different cardinality options are :
- `1` Only 1
- `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}
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
```
```mermaid-example
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
```
## Annotations on classes
It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:
- `<<Interface>>` To represent an Interface class
- `<<Abstract>>` To represent an abstract class
- `<<Service>>` To represent a service class
- `<<Enumeration>>` To represent an enum
Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:
- In a **_separate line_** after a class is defined:
```mermaid-example
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()
```
- In a **_nested structure_** along with the class definition:
```mermaid-example
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
```
## Comments
Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.
```mmd
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
<<interface>>
noOfVertices
draw()
}
```
## Setting the direction of the diagram
With class diagrams you can use the direction statement to set the direction in which the diagram will render:
```mermaid-example
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
```
## 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. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
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_ 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
- _reference_ is either the url link, or the function name for callback.
- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
- note: callback function will be called with the nodeId as parameter.
### Examples
_URL Link:_
```mmd
classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"
```
_Callback:_
```mmd
classDiagram
class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback"
class Shape2
click Shape2 call callbackFunction() "This is a tooltip for a callback"
```
```html
<script>
var callbackFunction = function () {
alert('A callback was triggered');
};
</script>
```
```mermaid
classDiagram
class Class01
class Class02
callback Class01 "callbackFunction" "Callback tooltip"
link Class02 "https://www.github.com" "This is a link"
class Class03
class Class04
click Class03 call callbackFunction() "Callback tooltip"
click Class04 href "https://www.github.com" "This is a link"
```
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
Beginner's tip—a full example using interactive links in an HTML page:
```html
<body>
<pre class="mermaid">
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
callback Duck callback "Tooltip"
link Zebra "https://www.github.com" "This is a link"
</pre>
<script>
var callback = function () {
alert('A callback was triggered');
};
var config = {
startOnLoad: true,
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>
```
## Styling
### Styling a node
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:
```html
<style>
.cssClass > rect {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 4px;
}
</style>
```
Then attaching that class to a specific node:
```
cssClass "nodeId1" cssClass;
```
It is also possible to attach a class to a list of nodes in one statement:
```
cssClass "nodeId1,nodeId2" cssClass;
```
A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
```mmd
classDiagram
class Animal:::cssClass
```
Or:
```mmd
classDiagram
class Animal:::cssClass {
-int sizeInFeet
-canEat()
}
```
?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**
### Default Styles
The main styling of the class diagram is done with a preset number of css classes. During rendering these classes are extracted from the file located at src/themes/class.scss. The classes used here are described below:
| Class | Description |
| ------------------ | ----------------------------------------------------------------- |
| g.classGroup text | Styles for general class text |
| classGroup .title | Styles for general class title |
| g.classGroup rect | Styles for class diagram rectangle |
| g.classGroup line | Styles for class diagram line |
| .classLabel .box | Styles for class label box |
| .classLabel .label | Styles for class label text |
| composition | Styles for composition arrow head and arrow line |
| aggregation | Styles for aggregation arrow head and arrow line(dashed or solid) |
| dependency | Styles for dependency arrow head and arrow line |
#### Sample stylesheet
```scss
body {
background: white;
}
g.classGroup text {
fill: $nodeBorder;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 10px;
.title {
font-weight: bolder;
}
}
g.classGroup rect {
fill: $nodeBkg;
stroke: $nodeBorder;
}
g.classGroup line {
stroke: $nodeBorder;
stroke-width: 1;
}
.classLabel .box {
stroke: none;
stroke-width: 0;
fill: $nodeBkg;
opacity: 0.5;
}
.classLabel .label {
fill: $nodeBorder;
font-size: 10px;
}
.relation {
stroke: $nodeBorder;
stroke-width: 1;
fill: none;
}
@mixin composition {
fill: $nodeBorder;
stroke: $nodeBorder;
stroke-width: 1;
}
#compositionStart {
@include composition;
}
#compositionEnd {
@include composition;
}
@mixin aggregation {
fill: $nodeBkg;
stroke: $nodeBorder;
stroke-width: 1;
}
#aggregationStart {
@include aggregation;
}
#aggregationEnd {
@include aggregation;
}
#dependencyStart {
@include composition;
}
#dependencyEnd {
@include composition;
}
#extensionStart {
@include composition;
}
#extensionEnd {
@include composition;
}
```
## Configuration
`Coming soon`

28
src/docs/developer-docs/configuration.md Normal file
View File

@ -0,0 +1,28 @@
# Configuration
When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:
- The default configuration
- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
**The render config** is configuration that is used when rendering by applying these configurations.
## Theme configuration
## Starting mermaid
```mermaid
sequenceDiagram
Site->>mermaid: initialize
Site->>mermaid: content loaded
mermaid->>mermaidAPI: init
```
## Initialize
The initialize call is applied **only once**. It is called by the site integrator in order to override the default configuration at a site level.
## configApi.reset
This method resets the configuration for a diagram to the overall site configuration, which is the configuration provided by the site integrator. Before each rendering of a diagram, reset is called at the very beginning.

136
src/docs/development.md Normal file
View File

@ -0,0 +1,136 @@
# Development and Contribution 🙌
So you want to help? That's great!
![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
Here are a few things to get you started on the right path.
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
**Note: Commits and Pull Requests should be directed to the develop branch.**
## Branching
Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
Once development is done we branch a `release` branch from `develop` for testing.
Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
## Contributing Code
We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows:
- Large changes reviewed by knsv or other developer asked to review by knsv
- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits)
When you commit code, create a branch with the following naming convention:
Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
**One example:**
`feature/945_state_diagrams`
**Another example:**
`bug/123_nasty_bug_branch`
## Contributing to Documentation
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
> **All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**.
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
## How to Contribute to Documentation
We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
The documentation is located in the `src/docs` directory and organized according to relevant subfolder.
The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
### Add Unit Tests for Parsing
This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
### Add E2E Tests
This tests the rendering and visual appearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
To start working with the e2e tests:
1. Run `yarn dev` to start the dev server
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs.
This is what a rendering test looks like:
```js
it('should render forks and joins', () => {
imgSnapshotTest(
`
stateDiagram
state fork_state &lt;&lt;fork&gt;&gt;
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state &lt;&lt;join&gt;&gt;
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
`,
{ logLevel: 0 }
);
cy.get('svg');
});
```
### Any Questions or Suggestions?
After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
### How to Contribute a Suggestion
Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
To edit Docs on your computer:
1. Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory in the `develop` branch.
2. Create a fork of the develop branch.
3. Make changes or add new documentation.
4. Commit changes to your fork and push it to GitHub.
5. Create a Pull Request of your fork.
To edit Docs on GitHub:
1. Login to [GitHub.com](https://www.github.com).
2. Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
3. To edit a file, click the pencil icon at the top-right of the file contents panel.
4. Describe what you changed in the **Propose file change** section, located at the bottom of the page.
5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
## Last Words
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
[Join our Slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
![Image of superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)

645
src/docs/diagrams-and-syntax-and-examples/flowchart.md Normal file
View File

@ -0,0 +1,645 @@
---
sort: 3
title: Flowchart
---
# Flowcharts - Basic Syntax
## Graph
This statement declares the direction of the flowchart, either from top to bottom (`TD` or `TB`):
```mermaid-example
graph TD
Start --> Stop
```
or left to right (`LR`):
```mermaid-example
graph LR
Start --> Stop
```
## Flowchart Orientation
Possible FlowChart orientations are:
- TB - top to bottom
- TD - top-down (same as top to bottom)
- BT - bottom to top
- RL - right to left
- LR - left to right
## Flowcharts
This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs.
Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.
> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
## Nodes and shapes
### A node (default)
```mermaid-example
graph LR
id
```
> **Note** The id is what is displayed in the box.
### A node with text
It is also possible to set text in the box that differs from the id. If this is done several times, only the last text
found for the node will be rendered. Also if you define edges for the node later on, you can omit text definitions. The
text previously defined will be used when rendering the box.
```mermaid-example
graph LR
id1[This is the text in the box]
```
## Node Shapes
### A node with round edges
```mermaid-example
graph LR
id1(This is the text in the box)
```
### A stadium-shaped node
```mermaid-example
graph LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```mermaid-example
graph LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```mermaid-example
graph LR
id1[(Database)]
```
### A node in the form of a circle
```mermaid-example
graph LR
id1((This is the text in the circle))
```
### A node in an asymmetric shape
```mermaid-example
graph LR
id1>This is the text in the box]
```
Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
### A node (rhombus)
```mermaid-example
graph LR
id1{This is the text in the box}
```
### A hexagonal node
```mermaid-example
graph LR
id1{{This is the text in the box}}
```
### Parallelogram
```mermaid-example
graph TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```mermaid-example
graph TD
id1[\This is the text in the box\]
```
### Trapezoid
```mermaid-example
graph TD
A[/Christmas\]
```
### Trapezoid alt
```mermaid-example
graph TD
B[\Go shopping/]
```
## Links between nodes
Nodes can be connected with links/edges. It is possible to have different types of links, or attach a text string on a link.
### Link with arrow head
```mermaid-example
graph LR
A-->B
```
### Open link
```mermaid-example
graph LR
A --- B
```
### Text on links
```mermaid-example
graph LR
A-- This is the text! ---B
```
or
```mermaid-example
graph LR
A---|This is the text|B
```
### Link with arrow head and text
```mermaid-example
graph LR
A-->|text|B
```
or
```mermaid-example
graph LR
A-- text -->B
```
### Dotted link
```mermaid-example
graph LR;
A-.->B;
```
### Dotted link with text
```mermaid-example
graph LR
A-. text .-> B
```
### Thick link
```mermaid-example
graph LR
A ==> B
```
### Thick link with text
```mermaid-example
graph LR
A == text ==> B
```
### Chaining of links
It is possible to declare many links on the same line as per below:
```mermaid-example
graph LR
A -- text --> B -- text2 --> C
```
It is also possible to declare multiple nodes links in the same line as per below:
```mermaid-example
graph LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example
graph TB
A & B--> C & D
```
If you describe the same diagram using the the basic syntax, it will take four lines:
```mmd
graph TB
A --> C
A --> D
B --> C
B --> D
```
A word of warning, one could go overboard with this, making the graph harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
### New arrow types
When using flowchart instead of graph there are new types of arrows supported as per below:
```mermaid-example
flowchart LR
A --o B
B --x C
```
### Multi directional arrows
When using flowchart instead of graph there is the possibility to use multidirectional arrows.
```mermaid-example
flowchart LR
A o--o B
B <--> C
C x--x D
```
### Minimum length of a link
Each node in the flowchart is ultimately assigned to a rank in the rendered
graph, i.e. to a vertical or horizontal level (depending on the flowchart
orientation), based on the nodes to which it is linked. By default, links
can span any number of ranks, but you can ask for any link to be longer
than the others by adding extra dashes in the link definition.
In the following example, two extra dashes are added in the link from node _B_
to node _E_, so that it spans two more ranks than regular links:
```mermaid-example
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
```
> **Note** The rendering engine may cause some links to be longer than
> the number of ranks requested in order to accommodate the overall topology.
When the link label is written in the middle of the link, the extra dashes must
be added on the right side of the link. The following example is equivalent to
the previous one:
```mermaid-example
graph TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
```
For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table:
| Length | 1 | 2 | 3 |
| ----------------- | :----: | :-----: | :------: |
| Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` |
| Dotted | `-.-` | `-..-` | `-...-` |
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
## Special characters that break syntax
Use quotes around text in order to render more troublesome characters, as in the example below:
```mermaid-example
graph LR
id1["This is the (text) in the box"]
```
### Entity codes to escape characters
Special characters (including Unicode) can be included by using HTML escaping syntax:
```mermaid-example
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
## Subgraphs
```
subgraph title
graph definition
end
```
An example:
```mermaid-example
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
You can also set an explicit id for the subgraph:
```mermaid-example
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
## Flowcharts
With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
```mermaid-example
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
## Interaction
A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
```
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 an incoming parameter.
```html
<script>
var callback = function (nodeId) {
alert('A callback was triggered on ' + nodeId);
};
</script>
```
Examples of tooltip usage:
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
```mermaid-example
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link"
```
> **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/s37cjoau/3/).
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):
```mermaid-example
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
```
Beginner's tip—here's a full example of using interactive links in HTML:
```html
<body>
<pre class="mermaid">
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script>
var callback = function () {
alert('A callback was triggered');
};
var config = {
startOnLoad: true,
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'cardinal',
},
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>
```
### Comments
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including all punctuation and any flow syntax.
```mmd
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
```
## Styling and classes
### Styling links
It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links
have no ids in the same way as nodes, some other way of attaching style is required.
So instead of ids, the order number of when the link was defined in the graph is used, starting with zero. Here's a linkStyle statement that would apply style to the fourth link in the graph:
```
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
```
You can specify a `default` to apply to all links, or you can give a comma-separated list of link order numbers.
Instead of giving a styles option, you can also use custom d3 curve types with the following syntax:
```
linkStyle default|numList|num interpolate curveType
```
If you want to add both D3 and style options, instead of writing:
```
linkStyle default interpolate cardinal
linkStyle default stroke:#ff3,stroke-width:4px,color:red;
```
You can combine them:
```
linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;
```
### Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to a node.
```mermaid-example
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 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 reference to multiple nodes.
here's a class definition:
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
```
and then attaching this class to a node is simply:
```
class nodeId1 className;
```
It is also possible to attach a class to multiple nodes in one statement:
```
class nodeId1,nodeId2 className;
```
An even shorter form of adding a class is to attach the classname to the node using the `:::`operator:
```mermaid-example
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
```
### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition:
**Example style**
```css
.cssClass > rect {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 4px;
}
```
**Example definition**
```mermaid-example
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
### Default class
If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
## Basic support for fontawesome
It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
```mermaid-example
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
```
## Graph declarations with spaces between vertices and link and without semicolon
- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges.
```mermaid-example
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
## Configuration...
Is it possible to adjust the width of the rendered flowchart.
This is done by defining **mermaid.flowchartConfig**, or by the CLI to use a json file with the configuration (which is described in the mermaidCLI page).
In Javascript config parameters can be set by using `mermaid.flowchartConfig`:
```javascript
mermaid.flowchartConfig = {
width: '100%',
};
```

255
src/docs/directives.md Normal file
View File

@ -0,0 +1,255 @@
# Directives
## Directives
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives.
## Types of Directives options
Mermaid basically supports two types of configuration options to be overridden by directives.
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
- theme
- fontFamily
- logLevel
- securityLevel
- startOnLoad
- secure
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
```
Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs
```
## Declaring directives
Now that we have defined the types of configurations that are available, we can learn how to declare directives.
A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`.
Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
Following code snippet shows the structure of a directive:
```
%%{
init: {
"theme": "dark",
"fontFamily": "monospace",
"logLevel": "info",
"flowchart": {
"htmlLabels": true,
"curve": "linear"
},
"sequence": {
"mirrorActors": true
}
}
}%%
```
You can also define the directives in a single line, like this:
```
%%{init: { **insert argument here**}}%%
```
For example, the following code snippet:
```
%%{init: { "sequence": { "mirrorActors":false }}}%%
```
**Notes:**
The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
Valid Key Value pairs can be found in config.
Example with a simple graph:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
graph LR
A-->B
```
Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
```mmd2
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
...
```
parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
```json5
{
logLevel: 'fatal',
theme: 'dark',
startOnLoad: true,
}
```
This will then be sent to `mermaid.initialize(...)` for rendering.
## Directive Examples
More directive examples for diagram specific configuration overrides
Now that the concept of directives has been explained, Let us see some more examples for directives usage:
### Changing Theme via directive
The following code snippet changes theme to forest:
`%%{init: { "theme": "forest" } }%%`
Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
Default Value is `default`.
Example:
```mermaid-example
%%{init: { "theme": "forest" } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing fontFamily via directive
The following code snippet changes fontFamily to rebuchet MS, Verdana, Arial, Sans-Serif:
`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
Example:
```mermaid-example
%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing logLevel via directive
The following code snippet changes logLevel to 2:
`%%{init: { "logLevel": 2 } }%%`
Possible logLevel values are:
- `1` for _debug_,
- `2` for _info_
- `3` for _warn_
- `4` for _error_
- `5` for _only fatal errors_
Default Value is `5`.
Example:
```mermaid-example
%%{init: { "logLevel": 2 } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing flowchart config via directive
Some common flowchart configurations are:
- _htmlLabels_: true/false
- _curve_: linear/curve
- _diagramPadding_: number
- _useMaxWidth_: number
For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
The following code snippet changes flowchart config:
`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear.
```mermaid-example
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing Sequence diagram config via directive
Some common sequence configurations are:
- _width_: number
- _height_: number
- _messageAlign_: left, center, right
- _mirrorActors_: boolean
- _useMaxWidth_: boolean
- _rightAngles_: boolean
- _showSequenceNumbers_: boolean
- _wrap_: boolean
For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code.
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
So, `wrap` by default has a value of `false` for sequence diagrams.
Let us see an example:
```mermaid-example
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```
Now let us enable wrap for sequence diagrams.
The following code snippet changes sequence diagram config for `wrap` to `true`:
`%%{init: { "sequence": { "wrap": true} } }%%`
Using in the diagram above, the wrap will be enabled.
```mermaid-example
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```

188
src/docs/entityRelationshipDiagram.md Normal file
View File

@ -0,0 +1,188 @@
# 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.
Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
Mermaid can render ER diagrams
```mermaid-example
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their _type_ and _name_.
```mermaid-example
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string name
string custNumber
string sector
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int orderNumber
string deliveryAddress
}
LINE-ITEM {
string productCode
int quantity
float pricePerUnit
}
```
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
## Syntax
### Entities and Relationships
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
```
<first-entity> [<relationship> <second-entity> : <relationship-label>]
```
Where:
- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores.
- `relationship` describes the way that both entities inter-relate. See below.
- `second-entity` is the name of the other entity.
- `relationship-label` describes the relationship from the perspective of the first entity.
For example:
```
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).
Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
### Relationship Syntax
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,
- whether the relationship confers identity on a 'child' entity
- the cardinality of the second entity with respect to the first
Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.
| Value (left) | Value (right) | Meaning |
| :----------: | :-----------: | ----------------------------- |
| `\|o` | `o\|` | Zero or one |
| `\|\|` | `\|\|` | Exactly one |
| `}o` | `o{` | Zero or more (no upper limit) |
| `}\|` | `\|{` | One or more (no upper limit) |
### Identification
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
```mmd
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
PERSON ||--o{ NAMED-DRIVER : is
```
### Attributes
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
```mermaid-example
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
int age
}
```
The attributes are rendered inside the entity boxes:
```mermaid-example
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
int age
}
```
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
#### Attribute Keys and Comments
Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And 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
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string allowedDriver FK "The license of the allowed driver"
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string driversLicense PK "The license #"
string firstName
string lastName
int age
}
```
### Other Things
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
- If you don't want a label at all on a relationship, you must use an empty double-quoted string
## Styling
### Config options
For simple color customization:
| Name | Used as |
| :------- | :------------------------------------------------------------------- |
| `fill` | Background color of an entity or attribute |
| `stroke` | Border color of an entity or attribute, line color of a relationship |
### Classes used
The following CSS class selectors are available for richer styling:
| Selector | Description |
| :------------------------- | :---------------------------------------------------- |
| `.er.attributeBoxEven` | The box containing attributes on even-numbered rows |
| `.er.attributeBoxOdd` | The box containing attributes on odd-numbered rows |
| `.er.entityBox` | The box representing an entity |
| `.er.entityLabel` | The label for an entity |
| `.er.relationshipLabel` | The label for a relationship |
| `.er.relationshipLabelBox` | The box surrounding a relationship label |
| `.er.relationshipLine` | The line representing a relationship between entities |

158
src/docs/examples.md Normal file
View File

@ -0,0 +1,158 @@
# Examples
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](/usage?id=usage).**
**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](/flowchart?id=flowcharts-basic-syntax) section.**
## Basic Pie Chart
```mermaid-example
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```
```mermaid-example
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
```
## Basic sequence diagram
```mermaid-example
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
## Basic flowchart
```mermaid-example
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
## Larger flowchart with some styling
```mermaid-example
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```
## SequenceDiagram: Loops, alt and opt
```mermaid-example
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```
## SequenceDiagram: Message to self in loop
```mermaid-example
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
## Sequence Diagram: Blogging app service communication
```mermaid-example
sequenceDiagram
participant web as Web Browser
participant blog as Blog Service
participant account as Account Service
participant mail as Mail Service
participant db as Storage
Note over web,db: The user must be logged in to submit blog posts
web->>+account: Logs in using credentials
account->>db: Query stored accounts
db->>account: Respond with query result
alt Credentials not found
account->>web: Invalid credentials
else Credentials found
account->>-web: Successfully logged in
Note over web,db: When the user is authenticated, they can now submit new posts
web->>+blog: Submit new post
blog->>db: Store post data
par Notifications
blog--)mail: Send mail to blog subscribers
blog--)db: Store in-site notifications
and Response
blog-->>-web: Successfully posted
end
end
```
## A commit flow diagram.
```mermaid
gitGraph:
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
```

11
src/docs/faq.md Normal file
View File

@ -0,0 +1,11 @@
# Frequently Asked Questions
1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
1. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
1. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
1. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
1. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
1. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
1. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)

668
src/docs/flowchart.md Normal file
View File

@ -0,0 +1,668 @@
# Flowcharts - Basic Syntax
All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
### A node (default)
```mermaid-example
flowchart LR
id
```
> **Note** The id is what is displayed in the box.
### A node with text
It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
one previously defined will be used when rendering the box.
```mermaid-example
flowchart LR
id1[This is the text in the box]
```
## Graph
This statement declares the direction of the Flowchart.
This declares the flowchart is oriented from top to bottom (`TD` or `TB`).
```mermaid-example
flowchart TD
Start --> Stop
```
This declares the flowchart is oriented from left to right (`LR`).
```mermaid-example
flowchart LR
Start --> Stop
```
## Flowchart Orientation
Possible FlowChart orientations are:
- TB - top to bottom
- TD - top-down/ same as top to bottom
- BT - bottom to top
- RL - right to left
- LR - left to right
## Node shapes
### A node with round edges
```mermaid-example
flowchart LR
id1(This is the text in the box)
```
### A stadium-shaped node
```mermaid-example
flowchart LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```mermaid-example
flowchart LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```mermaid-example
flowchart LR
id1[(Database)]
```
### A node in the form of a circle
```mermaid-example
flowchart LR
id1((This is the text in the circle))
```
### A node in an asymmetric shape
```mermaid-example
flowchart LR
id1>This is the text in the box]
```
Currently only the shape above is possible and not its mirror. _This might change with future releases._
### A node (rhombus)
```mermaid-example
flowchart LR
id1{This is the text in the box}
```
### A hexagon node
```mermaid-example
flowchart LR
id1{{This is the text in the box}}
```
### Parallelogram
```mermaid-example
flowchart TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```mermaid-example
flowchart TD
id1[\This is the text in the box\]
```
### Trapezoid
```mermaid-example
flowchart TD
A[/Christmas\]
```
### Trapezoid alt
```mermaid-example
flowchart TD
B[\Go shopping/]
```
### Double circle
```mermaid-example
flowchart TD
id1(((This is the text in the circle)))
```
## Links between nodes
Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
### A link with arrow head
```mermaid-example
flowchart LR
A-->B
```
### An open link
```mermaid-example
flowchart LR
A --- B
```
### Text on links
```mermaid-example
flowchart LR
A-- This is the text! ---B
```
or
```mermaid-example
flowchart LR
A---|This is the text|B
```
### A link with arrow head and text
```mermaid-example
flowchart LR
A-->|text|B
```
or
```mermaid-example
flowchart LR
A-- text -->B
```
### Dotted link
```mermaid-example
flowchart LR;
A-.->B;
```
### Dotted link with text
```mermaid-example
flowchart LR
A-. text .-> B
```
### Thick link
```mermaid-example
flowchart LR
A ==> B
```
### Thick link with text
```mermaid-example
flowchart LR
A == text ==> B
```
### Chaining of links
It is possible declare many links in the same line as per below:
```mermaid-example
flowchart LR
A -- text --> B -- text2 --> C
```
It is also possible to declare multiple nodes links in the same line as per below:
```mermaid-example
flowchart LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example
flowchart TB
A & B--> C & D
```
If you describe the same diagram using the the basic syntax, it will take four lines. A
word of warning, one could go overboard with this making the flowchart harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
```mmd
flowchart TB
A --> C
A --> D
B --> C
B --> D
```
### New arrow types
There are new types of arrows supported as per below:
```mermaid-example
flowchart LR
A --o B
B --x C
```
### Multi directional arrows
There is the possibility to use multidirectional arrows.
```mermaid-example
flowchart LR
A o--o B
B <--> C
C x--x D
```
### Minimum length of a link
Each node in the flowchart is ultimately assigned to a rank in the rendered
graph, i.e. to a vertical or horizontal level (depending on the flowchart
orientation), based on the nodes to which it is linked. By default, links
can span any number of ranks, but you can ask for any link to be longer
than the others by adding extra dashes in the link definition.
In the following example, two extra dashes are added in the link from node _B_
to node _E_, so that it spans two more ranks than regular links:
```mermaid-example
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
```
> **Note** Links may still be made longer than the requested number of ranks
> by the rendering engine to accommodate other requests.
When the link label is written in the middle of the link, the extra dashes must
be added on the right side of the link. The following example is equivalent to
the previous one:
```mermaid-example
flowchart TD
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
```
For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table:
| Length | 1 | 2 | 3 |
| ----------------- | :----: | :-----: | :------: |
| Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` |
| Dotted | `-.-` | `-..-` | `-...-` |
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
## Special characters that break syntax
It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
```mermaid-example
flowchart LR
id1["This is the (text) in the box"]
```
### Entity codes to escape characters
It is possible to escape characters using the syntax exemplified here.
```mermaid-example
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
## Subgraphs
```
subgraph title
graph definition
end
```
An example below:
```mermaid-example
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
You can also set an explicit id for the subgraph.
```mermaid-example
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
## flowcharts
With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
```mermaid-example
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
## Direction in subgraphs
With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
```mermaid-example
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
```
## 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. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
```
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.
Examples of tooltip usage below:
```html
<script>
var callback = function () {
alert('A callback was triggered');
};
</script>
```
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.
```mermaid-example
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link"
```
> **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/s37cjoau/3/).
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):
```mermaid-example
flowchart LR
A-->B
B-->C
C-->D
D-->E
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
```
Beginner's tip—a full example using interactive links in a html context:
```html
<body>
<pre class="mermaid">
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script>
var callback = function () {
alert('A callback was triggered');
};
var config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>
```
### Comments
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
```mmd
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
```
## Styling and classes
### Styling links
It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links
have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.
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;
```
### Styling line curves
It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
Available curve styles include `basis`, `bump`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`,
and `stepBefore`.
In this example, a left-to-right graph uses the `stepBefore` curve style:
```
%%{ 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
[d3-shape](https://github.com/d3/d3-shape/) project.
### Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to a node.
```mermaid-example
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 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.
a class definition looks like the example below:
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
```
Attachment of a class to a node is done as per below:
```
class nodeId1 className;
```
It is also possible to attach a class to a list of nodes in one statement:
```
class nodeId1,nodeId2 className;
```
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
```mermaid-example
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96;
```
### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
below:
**Example style**
```html
<style>
.cssClass > rect {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 4px;
}
</style>
```
**Example definition**
```mermaid-example
flowchart LR;
A-->B[AAA<span>BBB</span>]
B-->D
class A cssClass
```
### Default class
If a class is named default it will be assigned to all classes without specific class definitions.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
## Basic support for fontawesome
It is possible to add icons from fontawesome.
The icons are accessed via the syntax fa:#icon class name#.
```mermaid-example
flowchart TD
B["fab:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?)
```
?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
## 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.
- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
```mermaid-example
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
## Configuration...
Is it possible to adjust the width of the rendered flowchart.
This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
```javascript
mermaid.flowchartConfig = {
width: 100%
}
```

343
src/docs/gantt.md Normal file
View File

@ -0,0 +1,343 @@
# Gantt diagrams
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
## A note to users
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
As shown here ![](./img/Gantt-excluded-days-within.png)
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
As shown here ![](./img/Gantt-long-weekend-look.png)
A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
```mermaid-example
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
## Syntax
```mermaid-example
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
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
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
It is possible to set multiple dependencies separated by space:
```mermaid-example
gantt
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```
### Title
The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
### Section statements
You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.
### Milestones
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.
```mermaid-example
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min
taska2 : 10min
taska3 : 5min
Final milestone : milestone, m2, 18:14, 2min
```
## Setting dates
`dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
### Input date format
The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.
```
dateFormat YYYY-MM-DD
```
The following formatting options are supported:
```
Input Example Description:
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
```
More info in: https://momentjs.com/docs/#/parsing/string-format/
### Output date format on the axis
The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
```
axisFormat %Y-%m-%d
```
The following formatting strings are supported:
```
%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.
```
More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
## Comments
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```mmd
gantt
title A Gantt Diagram
%% this is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
## Styling
Styling of the a gantt diagram is done by defining a number of css classes. During rendering, these classes are extracted from the file located at src/themes/gantt.scss
### Classes used
| Class | Description |
| --------------------- | ---------------------------------------------------------------------- |
| grid.tick | Styling for the Grid Lines |
| grid.path | Styling for the Grid's borders |
| .taskText | Task Text Styling |
| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |
| .taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. |
| todayMarker | Toggle and Styling for the "Today Marker" |
### Sample stylesheet
```css
.grid .tick {
stroke: lightgrey;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
#tag {
color: white;
background: #fa283d;
width: 150px;
position: absolute;
display: none;
padding: 3px 6px;
margin-left: -80px;
font-size: 11px;
}
#tag:before {
border: solid transparent;
content: ' ';
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
width: 0;
border-width: 10px;
border-bottom-color: #fa283d;
top: -20px;
}
.taskText {
fill: white;
text-anchor: middle;
}
.taskTextOutsideRight {
fill: black;
text-anchor: start;
}
.taskTextOutsideLeft {
fill: black;
text-anchor: end;
}
```
## Today marker
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
```
To hide the marker, set `todayMarker` to `off`.
```
todayMarker off
```
## Configuration
It is possible to adjust the margins for rendering the gantt diagram.
This is done by defining the `ganttConfig` part of the configuration object.
How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page.
mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.
```javascript
mermaid.ganttConfig = {
titleTopMargin: 25,
barHeight: 20,
barGap: 4,
topPadding: 75,
sidePadding: 75,
};
```
### Possible configuration params:
| Param | Description | Default value |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false |
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
## Interaction
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
```
- 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.
Beginner's tip—a full example using interactive links in an html context:
```html
<body>
<pre class="mermaid">
gantt
dateFormat YYYY-MM-DD
section Clickable
Visit mermaidjs :active, cl1, 2014-01-07, 3d
Print arguments :cl2, after cl1, 3d
Print task :cl3, after cl2, 3d
click cl1 href "https://mermaidjs.github.io/"
click cl2 call printArguments("test1", "test2", test3)
click cl3 call printTask()
</pre>
<script>
var printArguments = function (arg1, arg2, arg3) {
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
};
var printTask = function (taskId) {
alert('taskId: ' + taskId);
};
var config = {
startOnLoad: true,
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>
```

1016
src/docs/gitgraph.md Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/docs/img/Code-Preview-Config.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
src/docs/img/Configuration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/docs/img/Editing-process.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/docs/img/EditingHistory+Links.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/docs/img/Gantt-excluded-days-within.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
src/docs/img/Gantt-long-weekend-look.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
src/docs/img/GitHub-Mark-32px.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 878 B

BIN
src/docs/img/Live-Editor-Choices.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/docs/img/Live-Editor-Usage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/docs/img/accessibility-div-example-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
src/docs/img/accessibility-div-example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
src/docs/img/assignWithDepth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/docs/img/book-banner-post-release.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
src/docs/img/book-banner-post-release.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
src/docs/img/book-banner-post-release.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 809 KiB

BIN
src/docs/img/book-banner-pre-release.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/docs/img/book-banner-pre-release.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 809 KiB

BIN
src/docs/img/class.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/docs/img/er.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
src/docs/img/flow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
src/docs/img/gantt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/docs/img/git.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/docs/img/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
src/docs/img/n00b-firstFlow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/docs/img/new-diagrams.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/docs/img/object.assign without depth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/docs/img/python-mermaid-integration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/docs/img/sequence.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/docs/img/simple-er.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

Some files were not shown because too many files have changed in this diff Show More