marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 17:54:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Prettier

Browse Source
This commit is contained in:
Sidharth Vinod
2022-09-03 13:05:47 +05:30
parent c702e12a42
commit 6167eda6b6
48 changed files with 1442 additions and 1472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.eslintrc.json
View File

@@ -18,9 +18,9 @@
"plugin:jsdoc/recommended", "plugin:jsdoc/recommended",
"plugin:json/recommended", "plugin:json/recommended",
"plugin:markdown/recommended", "plugin:markdown/recommended",
"plugin:prettier/recommended" "prettier"
], ],
"plugins": ["html", "jest", "jsdoc", "json", "prettier"], "plugins": ["html", "jest", "jsdoc", "json"],
"rules": { "rules": {
"no-prototype-builtins": "off", "no-prototype-builtins": "off",
"no-unused-vars": "off", "no-unused-vars": "off",
@@ -45,12 +45,6 @@
"no-undef": "off", "no-undef": "off",
"jsdoc/require-jsdoc": "off" "jsdoc/require-jsdoc": "off"
} }
},
{
"files": "./**/*.md/*.html",
"rules": {
"prettier/prettier": "off"
}
} }
] ]
} }

10
.lintstagedrc.json
View File

@@ -1,8 +1,4 @@
{ {
"src/docs/**": [ "src/docs/**": ["yarn docs:build"],
"yarn docs:build" "*.{js,json,html,md}": ["yarn lint:fix"]
], }
"*.{js,json,html,md}": [
"yarn lint:fix"
]
}

4
.prettierignore
View File

@@ -1 +1,3 @@
demos/*.html demos/*.html
cypress/**/*.html
dist

2
.prettierrc.json
View File

@@ -2,4 +2,4 @@
"endOfLine": "auto", "endOfLine": "auto",
"printWidth": 100, "printWidth": 100,
"singleQuote": true "singleQuote": true
} }

77
docs/8.6.0_docs.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Version 8.6.0 Changes # Version 8.6.0 Changes
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ) ## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
@@ -16,19 +17,19 @@ the `init` directive is the main method of configuration for Site and Current Le
The three levels of are Configuration, Global, Site and Current. The three levels of are Configuration, Global, Site and Current.
| Level of Configuration | Description | | Level of Configuration | Description |
| --- | --- | | ---------------------- | ----------------------------------- |
| Global Configuration| Default Mermaid Configurations| | Global Configuration | Default Mermaid Configurations |
| Site Configuration| Configurations made by site owner| | Site Configuration | Configurations made by site owner |
| Current Configuration| Configurations made by Implementors| | Current Configuration | Configurations made by Implementors |
# Limits to Modifying Configurations # Limits to Modifying Configurations
**secure Array** **secure Array**
| Parameter | Description |Type | Required | Values| | Parameter | Description | Type | Required | Values |
| --- | --- | --- | --- | --- | | --------- | ------------------------------------------------ | ----- | -------- | -------------- |
| secure | Array of parameters excluded from init directive| Array | Required | Any parameters| | 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. 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.
@@ -57,9 +58,9 @@ Older versions of mermaid will not parse directives because `%%` will comment ou
`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. `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| | Parameter | Description | Type | Required | Values |
| --- | --- | --- | --- | --- | | --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array| | init | modifies configurations | Directive | Optional | Any parameters not included in the secure array |
```note ```note
init would be an argument-directive: `%%{init: { **insert argument here**}}%%` init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
@@ -90,9 +91,9 @@ When deployed within code, init is called before the graph/diagram description.
# Wrap # Wrap
| Parameter | Description |Type | Required | Values| | Parameter | Description | Type | Required | Values |
| --- | --- | --- | --- | --- | | --------- | ----------------------------- | --------- | -------- | ---------- |
| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%| | wrap | a callable text-wrap function | Directive | Optional | %%{wrap}%% |
```note ```note
Wrap is a function that is currently only deployable for sequence diagrams. Wrap is a function that is currently only deployable for sequence diagrams.
@@ -120,9 +121,9 @@ There are two more functions in the mermaidAPI that can be called by site owners
# Additional Utils to mermaid # Additional Utils to mermaid
• **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%. • **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. • **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**: Example of **assignWithDepth**:
@@ -132,7 +133,7 @@ Example of **object.Assign**:
![Image showing object.assign without depth](img/object.assign%20without%20depth.png) ![Image showing object.assign without depth](img/object.assign%20without%20depth.png)
• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height. • **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. **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.
@@ -140,9 +141,9 @@ Example of **object.Assign**:
## setSiteConfig ## setSiteConfig
| Function | Description | Type | Values |Parameters|Returns| | Function | Description | Type | Values | Parameters | Returns |
| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ | | --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
| `setSiteConfig`|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig| | `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf | siteConfig |
```note ```note
Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
@@ -154,9 +155,9 @@ Default value: will mirror Global Config
## getSiteConfig ## getSiteConfig
| Function | Description | Type | Values | | Function | Description | Type | Values |
| --------- | ------------------- | ------- | ------------------ | | --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
| `getSiteConfig`|Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig`| | `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |
```note ```note
Returns any values in siteConfig. Returns any values in siteConfig.
@@ -164,9 +165,9 @@ Returns any values in siteConfig.
## setConfig ## setConfig
| Function | Description | Type | Values |Parameters|Returns| | 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| | `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf | `currentConfig` merged with the sanitized conf |
```note ```note
Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
@@ -176,9 +177,9 @@ siteConfig value.
## getConfig ## getConfig
| Function | Description | Type | Return Values | | Function | Description | Type | Return Values |
| --------- | ------------------- | ------- | ------------------ | | ----------- | --------------------------- | ----------- | ------------------------------- |
| `getConfig` |Obtains the `currentConfig` | Get Request | Any Values from `currentConfig`| | `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |
```note ```note
Returns any values in currentConfig. Returns any values in currentConfig.
@@ -186,9 +187,9 @@ Returns any values in currentConfig.
## sanitize ## sanitize
| Function | Description | Type | Values | | Function | Description | Type | Values |
| --------- | ------------------- | ------- | ------------------ | | ---------- | ---------------------------------------- | -------------- | ------ |
| `sanitize` |Sets the `siteConfig` to desired values. | Put Request(?) |None| | `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None |
```note ```note
modifies options in-place modifies options in-place
@@ -197,15 +198,15 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
## reset ## reset
| Function | Description | Type | Required | Values |Parameter| | Function | Description | Type | Required | Values | Parameter |
| --------- | -------------------| ------- | -------- | ------------------ |---------| | -------- | ------------------------------ | ----------- | -------- | ------ | --------- |
| `reset`|Resets `currentConfig` to conf| Put Request | Required | None| conf| | `reset` | Resets `currentConfig` to conf | Put Request | Required | None | conf |
## conf ## conf
| Parameter | Description |Type | Required | Values| | 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| | `conf` | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array |
```note ```note
default: current siteConfig (optional, default `getSiteConfig()`) default: current siteConfig (optional, default `getSiteConfig()`)

1086
docs/CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

1
docs/Configuration.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Configuration # Configuration
Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid. Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.

31
docs/README.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# About Mermaid # About Mermaid
**Mermaid lets you create diagrams and visualizations using text and code.** **Mermaid lets you create diagrams and visualizations using text and code.**
@@ -9,7 +10,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
<img src="img/header.png" alt="" /> <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) [![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 --> <!-- Mermaid book banner -->
@@ -213,10 +214,10 @@ To Deploy Mermaid:
## Sibling projects ## Sibling projects
* [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) - [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
* [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) - [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
* [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo) - [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
* [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo) - [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
## Request for Assistance ## Request for Assistance
@@ -228,8 +229,8 @@ represent the project when answering questions and issues.
Together we could continue the work with things like: Together we could continue the work with things like:
* Adding more types of diagrams like mindmaps, ert diagrams, etc. - Adding more types of diagrams like mindmaps, ert diagrams, etc.
* Improving existing diagrams - Improving existing diagrams
Don't hesitate to contact me if you want to get involved! Don't hesitate to contact me if you want to get involved!
@@ -278,9 +279,9 @@ The above command generates files into the `dist` folder and publishes them to n
## Related projects ## Related projects
* [Command Line Interface](https://github.com/mermaid-js/mermaid-cli) - [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
* [Live Editor](https://github.com/mermaid-js/mermaid-live-editor) - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
* [HTTP Server](https://github.com/TomWright/mermaid-server) - [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) ## 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)
@@ -294,7 +295,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
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. 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.* _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 ## Reporting vulnerabilities
@@ -304,10 +305,10 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
A quick note from Knut Sveidqvist: 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.* > _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!* > _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.* _Mermaid was created by Knut Sveidqvist for easier documentation._

27
docs/SUMMARY.md
View File

@@ -1,16 +1,17 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Summary # Summary
* [mermaid](README.md) - [mermaid](README.md)
* [FAQ](faq.md) - [FAQ](faq.md)
* [Breaking changes](breakingChanges.md) - [Breaking changes](breakingChanges.md)
* [Usage](usage.md) - [Usage](usage.md)
* [Flowchart](flowchart.md) - [Flowchart](flowchart.md)
* [Sequence diagram](sequenceDiagram.md) - [Sequence diagram](sequenceDiagram.md)
* [Gantt diagram](gantt.md) - [Gantt diagram](gantt.md)
* [mermaid CLI](mermaidCLI.md) - [mermaid CLI](mermaidCLI.md)
* [Demos](demos.md) - [Demos](demos.md)
* [mermaidAPI](mermaidAPI.md) - [mermaidAPI](mermaidAPI.md)
* [Development](development.md) - [Development](development.md)
* [Upgrading](upgrading.md) - [Upgrading](upgrading.md)
* [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook) - [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook)

273
docs/Setup.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # 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. --> <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
## mermaidAPI ## mermaidAPI
@@ -59,18 +60,18 @@ Theme , the CSS style sheet
## logLevel ## logLevel
| Parameter | Description | Type | Required | Values | | 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' | | logLevel | This option decides the amount of logging to be used. | string | number | Required | 'trace','debug','info','warn','error','fatal' |
**Notes:** **Notes:**
* Trace: 0 - Trace: 0
* Debug: 1 - Debug: 1
* Info: 2 - Info: 2
* Warn: 3 - Warn: 3
* Error: 4 - Error: 4
* Fatal: 5 (default) - Fatal: 5 (default)
## securityLevel ## securityLevel
@@ -80,11 +81,11 @@ Theme , the CSS style sheet
**Notes**: **Notes**:
* **strict**: (**default**) tags in text are encoded, click functionality is disabled - **strict**: (**default**) tags in text are encoded, click functionality is disabled
* **loose**: tags in text are allowed, click functionality is enabled - **loose**: tags in text are allowed, click functionality is enabled
* **antiscript**: html tags in text are allowed, (only script element is removed), click - **antiscript**: html tags in text are allowed, (only script element is removed), click
functionality is enabled functionality is enabled
* **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
prevent any JavaScript from running in the context. This may hinder interactive functionality prevent any JavaScript from running in the context. This may hinder interactive functionality
of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
@@ -110,7 +111,7 @@ Default value: false
## secure ## secure
This option controls which currentConfig keys are considered *secure* and can only be changed This option controls which currentConfig keys are considered _secure_ and can only be changed
via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the
`secure` keys in the current currentConfig. This prevents malicious graph directives from `secure` keys in the current currentConfig. This prevents malicious graph directives from
overriding a site's default security. overriding a site's default security.
@@ -1016,19 +1017,19 @@ This sets the font weight of Person shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_personFontSize ### external_personFontSize
This sets the font size of External Person shape for the diagram This sets the font size of External Person shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_personFontFamily ### external_personFontFamily
This sets the font family of External Person shape for the diagram This sets the font family of External Person shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_personFontWeight ### external_personFontWeight
This sets the font weight of External Person shape for the diagram This sets the font weight of External Person shape for the diagram
@@ -1052,91 +1053,91 @@ This sets the font weight of System shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_systemFontSize ### external_systemFontSize
This sets the font size of External System shape for the diagram This sets the font size of External System shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_systemFontFamily ### external_systemFontFamily
This sets the font family of External System shape for the diagram This sets the font family of External System shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_systemFontWeight ### external_systemFontWeight
This sets the font weight of External System shape for the diagram This sets the font weight of External System shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### system\_dbFontSize ### system_dbFontSize
This sets the font size of System DB shape for the diagram This sets the font size of System DB shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### system\_dbFontFamily ### system_dbFontFamily
This sets the font family of System DB shape for the diagram This sets the font family of System DB shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### system\_dbFontWeight ### system_dbFontWeight
This sets the font weight of System DB shape for the diagram This sets the font weight of System DB shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_system\_dbFontSize ### external_system_dbFontSize
This sets the font size of External System DB shape for the diagram This sets the font size of External System DB shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_system\_dbFontFamily ### external_system_dbFontFamily
This sets the font family of External System DB shape for the diagram This sets the font family of External System DB shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_system\_dbFontWeight ### external_system_dbFontWeight
This sets the font weight of External System DB shape for the diagram This sets the font weight of External System DB shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### system\_queueFontSize ### system_queueFontSize
This sets the font size of System Queue shape for the diagram This sets the font size of System Queue shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### system\_queueFontFamily ### system_queueFontFamily
This sets the font family of System Queue shape for the diagram This sets the font family of System Queue shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### system\_queueFontWeight ### system_queueFontWeight
This sets the font weight of System Queue shape for the diagram This sets the font weight of System Queue shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_system\_queueFontSize ### external_system_queueFontSize
This sets the font size of External System Queue shape for the diagram This sets the font size of External System Queue shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_system\_queueFontFamily ### external_system_queueFontFamily
This sets the font family of External System Queue shape for the diagram This sets the font family of External System Queue shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_system\_queueFontWeight ### external_system_queueFontWeight
This sets the font weight of External System Queue shape for the diagram This sets the font weight of External System Queue shape for the diagram
@@ -1196,91 +1197,91 @@ This sets the font weight of Container shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_containerFontSize ### external_containerFontSize
This sets the font size of External Container shape for the diagram This sets the font size of External Container shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_containerFontFamily ### external_containerFontFamily
This sets the font family of External Container shape for the diagram This sets the font family of External Container shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_containerFontWeight ### external_containerFontWeight
This sets the font weight of External Container shape for the diagram This sets the font weight of External Container shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### container\_dbFontSize ### container_dbFontSize
This sets the font size of Container DB shape for the diagram This sets the font size of Container DB shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### container\_dbFontFamily ### container_dbFontFamily
This sets the font family of Container DB shape for the diagram This sets the font family of Container DB shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### container\_dbFontWeight ### container_dbFontWeight
This sets the font weight of Container DB shape for the diagram This sets the font weight of Container DB shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_container\_dbFontSize ### external_container_dbFontSize
This sets the font size of External Container DB shape for the diagram This sets the font size of External Container DB shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_container\_dbFontFamily ### external_container_dbFontFamily
This sets the font family of External Container DB shape for the diagram This sets the font family of External Container DB shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_container\_dbFontWeight ### external_container_dbFontWeight
This sets the font weight of External Container DB shape for the diagram This sets the font weight of External Container DB shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### container\_queueFontSize ### container_queueFontSize
This sets the font size of Container Queue shape for the diagram This sets the font size of Container Queue shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### container\_queueFontFamily ### container_queueFontFamily
This sets the font family of Container Queue shape for the diagram This sets the font family of Container Queue shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### container\_queueFontWeight ### container_queueFontWeight
This sets the font weight of Container Queue shape for the diagram This sets the font weight of Container Queue shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_container\_queueFontSize ### external_container_queueFontSize
This sets the font size of External Container Queue shape for the diagram This sets the font size of External Container Queue shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_container\_queueFontFamily ### external_container_queueFontFamily
This sets the font family of External Container Queue shape for the diagram This sets the font family of External Container Queue shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_container\_queueFontWeight ### external_container_queueFontWeight
This sets the font weight of External Container Queue shape for the diagram This sets the font weight of External Container Queue shape for the diagram
@@ -1304,91 +1305,91 @@ This sets the font weight of Component shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_componentFontSize ### external_componentFontSize
This sets the font size of External Component shape for the diagram This sets the font size of External Component shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_componentFontFamily ### external_componentFontFamily
This sets the font family of External Component shape for the diagram This sets the font family of External Component shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_componentFontWeight ### external_componentFontWeight
This sets the font weight of External Component shape for the diagram This sets the font weight of External Component shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### component\_dbFontSize ### component_dbFontSize
This sets the font size of Component DB shape for the diagram This sets the font size of Component DB shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### component\_dbFontFamily ### component_dbFontFamily
This sets the font family of Component DB shape for the diagram This sets the font family of Component DB shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### component\_dbFontWeight ### component_dbFontWeight
This sets the font weight of Component DB shape for the diagram This sets the font weight of Component DB shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_component\_dbFontSize ### external_component_dbFontSize
This sets the font size of External Component DB shape for the diagram This sets the font size of External Component DB shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_component\_dbFontFamily ### external_component_dbFontFamily
This sets the font family of External Component DB shape for the diagram This sets the font family of External Component DB shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_component\_dbFontWeight ### external_component_dbFontWeight
This sets the font weight of External Component DB shape for the diagram This sets the font weight of External Component DB shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### component\_queueFontSize ### component_queueFontSize
This sets the font size of Component Queue shape for the diagram This sets the font size of Component Queue shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### component\_queueFontFamily ### component_queueFontFamily
This sets the font family of Component Queue shape for the diagram This sets the font family of Component Queue shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### component\_queueFontWeight ### component_queueFontWeight
This sets the font weight of Component Queue shape for the diagram This sets the font weight of Component Queue shape for the diagram
**Notes:** Default value: normal. **Notes:** Default value: normal.
### external\_component\_queueFontSize ### external_component_queueFontSize
This sets the font size of External Component Queue shape for the diagram This sets the font size of External Component Queue shape for the diagram
**Notes:** Default value: 14. **Notes:** Default value: 14.
### external\_component\_queueFontFamily ### external_component_queueFontFamily
This sets the font family of External Component Queue shape for the diagram This sets the font family of External Component Queue shape for the diagram
**Notes:** Default value: "Open Sans", sans-serif. **Notes:** Default value: "Open Sans", sans-serif.
### external\_component\_queueFontWeight ### external_component_queueFontWeight
This sets the font weight of External Component Queue shape for the diagram This sets the font weight of External Component Queue shape for the diagram
@@ -1417,11 +1418,11 @@ This sets the auto-wrap padding for the diagram (sides only)
**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls **Notes:** 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) 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 will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
function *Default value: At default, will mirror Global Config* function _Default value: At default, will mirror Global Config_
### Parameters ### Parameters
* `conf` **MermaidConfig** The base currentConfig to use as siteConfig - `conf` **MermaidConfig** The base currentConfig to use as siteConfig
Returns **[object][5]** The siteConfig Returns **[object][5]** The siteConfig
@@ -1451,7 +1452,7 @@ corresponding siteConfig value.
### Parameters ### Parameters
* `conf` **any** The potential currentConfig - `conf` **any** The potential currentConfig
Returns **any** The currentConfig merged with the sanitized conf Returns **any** The currentConfig merged with the sanitized conf
@@ -1461,23 +1462,23 @@ Function that renders an svg with a graph from a chart definition. Usage example
```javascript ```javascript
mermaidAPI.initialize({ mermaidAPI.initialize({
startOnLoad: true, startOnLoad: true,
}); });
$(function () { $(function () {
const graphDefinition = 'graph TB\na-->b'; const graphDefinition = 'graph TB\na-->b';
const cb = function (svgGraph) { const cb = function (svgGraph) {
console.log(svgGraph); console.log(svgGraph);
}; };
mermaidAPI.render('id1', graphDefinition, cb); mermaidAPI.render('id1', graphDefinition, cb);
}); });
``` ```
### Parameters ### Parameters
* `id` **[string][6]** The id of the element to be rendered - `id` **[string][6]** The id of the element to be rendered
* `text` **[string][6]** The graph definition - `text` **[string][6]** The graph definition
* `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** - `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
* `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be - `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
inserted. If one is provided a hidden div will be inserted in the body of the page instead. The inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
element will be removed when rendering is completed. element will be removed when rendering is completed.
@@ -1508,7 +1509,7 @@ options in-place
### Parameters ### Parameters
* `options` **any** The potential setConfig parameter - `options` **any** The potential setConfig parameter
## addDirective ## addDirective
@@ -1516,7 +1517,7 @@ Pushes in a directive to the configuration
### Parameters ### Parameters
* `directive` **[object][5]** The directive to push in - `directive` **[object][5]** The directive to push in
## reset ## reset
@@ -1536,7 +1537,7 @@ Pushes in a directive to the configuration
### Parameters ### Parameters
* `config` (optional, default `siteConfig`) - `config` (optional, default `siteConfig`)
Returns **void** Returns **void**
@@ -1544,7 +1545,7 @@ Returns **void**
### Parameters ### Parameters
* `options` **MermaidConfig** - `options` **MermaidConfig**
## ##
@@ -1552,74 +1553,68 @@ Returns **void**
```html ```html
<script> <script>
var config = { var config = {
theme: 'default', theme: 'default',
logLevel: 'fatal', logLevel: 'fatal',
securityLevel: 'strict', securityLevel: 'strict',
startOnLoad: true, startOnLoad: true,
arrowMarkerAbsolute: false, arrowMarkerAbsolute: false,
er: { er: {
diagramPadding: 20, diagramPadding: 20,
layoutDirection: 'TB', layoutDirection: 'TB',
minEntityWidth: 100, minEntityWidth: 100,
minEntityHeight: 75, minEntityHeight: 75,
entityPadding: 15, entityPadding: 15,
stroke: 'gray', stroke: 'gray',
fill: 'honeydew', fill: 'honeydew',
fontSize: 12, fontSize: 12,
useMaxWidth: true, useMaxWidth: true,
}, },
flowchart: { flowchart: {
diagramPadding: 8, diagramPadding: 8,
htmlLabels: true, htmlLabels: true,
curve: 'basis', curve: 'basis',
}, },
sequence: { sequence: {
diagramMarginX: 50, diagramMarginX: 50,
diagramMarginY: 10, diagramMarginY: 10,
actorMargin: 50, actorMargin: 50,
width: 150, width: 150,
height: 65, height: 65,
boxMargin: 10, boxMargin: 10,
boxTextMargin: 5, boxTextMargin: 5,
noteMargin: 10, noteMargin: 10,
messageMargin: 35, messageMargin: 35,
messageAlign: 'center', messageAlign: 'center',
mirrorActors: true, mirrorActors: true,
bottomMarginAdj: 1, bottomMarginAdj: 1,
useMaxWidth: true, useMaxWidth: true,
rightAngles: false, rightAngles: false,
showSequenceNumbers: false, showSequenceNumbers: false,
}, },
gantt: { gantt: {
titleTopMargin: 25, titleTopMargin: 25,
barHeight: 20, barHeight: 20,
barGap: 4, barGap: 4,
topPadding: 50, topPadding: 50,
leftPadding: 75, leftPadding: 75,
gridLineStartPadding: 35, gridLineStartPadding: 35,
fontSize: 11, fontSize: 11,
fontFamily: '"Open Sans", sans-serif', fontFamily: '"Open Sans", sans-serif',
numberSectionStyles: 4, numberSectionStyles: 4,
axisFormat: '%Y-%m-%d', axisFormat: '%Y-%m-%d',
topAxis: false, topAxis: false,
}, },
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
``` ```
[1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
[2]: Setup.md?id=render [2]: Setup.md?id=render
[3]: 8.6.0_docs.md [3]: 8.6.0_docs.md
[4]: #mermaidapi-configuration-defaults [4]: #mermaidapi-configuration-defaults
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[7]: https://developer.mozilla.org/docs/Web/API/Element [7]: https://developer.mozilla.org/docs/Web/API/Element

7
docs/Tutorials.md
View File

@@ -1,7 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Tutorials # 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. 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.** **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
@@ -13,11 +14,11 @@ The definitions that can be generated the Live-Editor are also backwards-compati
[Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA) [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: 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) [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) [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) [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)

23
docs/_navbar.md
View File

@@ -1,14 +1,15 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
* Getting started
* [Quick start](quickstart.md) - Getting started
* [Writing more pages](more-pages.md)
* [Custom navbar](custom-navbar.md)
* [Cover page](cover.md)
* Configuration - [Quick start](quickstart.md)
* [Configuration](configuration.md) - [Writing more pages](more-pages.md)
* [Themes](themes.md) - [Custom navbar](custom-navbar.md)
* [Using plugins](plugins.md) - [Cover page](cover.md)
* [Markdown configuration](markdown.md)
* [Language highlight](language-highlight.md) - Configuration
- [Configuration](configuration.md)
- [Themes](themes.md)
- [Using plugins](plugins.md)
- [Markdown configuration](markdown.md)
- [Language highlight](language-highlight.md)

73
docs/_sidebar.md
View File

@@ -1,42 +1,45 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
* 📔 Introduction
* [About Mermaid](README.md) - 📔 Introduction
* [Deployment](n00b-gettingStarted.md)
* [Syntax and Configuration](n00b-syntaxReference.md)
* 📊 Diagram Syntax - [About Mermaid](README.md)
* [Flowchart](flowchart.md) - [Deployment](n00b-gettingStarted.md)
* [Sequence Diagram](sequenceDiagram.md) - [Syntax and Configuration](n00b-syntaxReference.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 - 📊 Diagram Syntax
* [Tutorials](Tutorials.md) - [Flowchart](flowchart.md)
* [API-Usage](usage.md) - [Sequence Diagram](sequenceDiagram.md)
* [Mermaid API Configuration](Setup.md) - [Class Diagram](classDiagram.md)
* [Directives](directives.md) - [State Diagram](stateDiagram.md)
* [Theming](theming.md) - [Entity Relationship Diagram](entityRelationshipDiagram.md)
* [Accessibility](accessibility.md) - [User Journey](user-journey.md)
* [Mermaid CLI](mermaidCLI.md) - [Gantt](gantt.md)
* [Advanced usage](n00b-advanced.md) - [Pie Chart](pie.md)
- [Requirement Diagram](requirementDiagram.md)
- [Gitgraph (Git) Diagram 🔥](gitgraph.md)
- [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md)
- [Other Examples](examples.md)
* 📚 Misc - ⚙️ Deployment and Configuration
* [Use-Cases and Integrations](integrations.md)
* [FAQ](faq.md)
* 🙌 Contributions and Community - [Tutorials](Tutorials.md)
* [Overview for Beginners](n00b-overview.md) - [API-Usage](usage.md)
* [Development and Contribution ](development.md) - [Mermaid API Configuration](Setup.md)
* [Changelog](CHANGELOG.md) - [Directives](directives.md)
* [Adding Diagrams ](newDiagram.md) - [Theming](theming.md)
* [Security ](security.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)

9
docs/accessibility.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Accessibility Options # Accessibility Options
## Accessibility ## Accessibility
@@ -15,8 +16,8 @@ This support for accessibility options is available for all the diagrams/chart t
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: 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 - `accTitle: "Your Accessibility Title"` or
* `accDescr: "Your Accessibility Description"` - `accDescr: "Your Accessibility Description"`
**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.** **When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
@@ -50,11 +51,11 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
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 `}`. 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***) `accTitle: My single line title value` (**_single line format_**)
vs vs
`accDescr: { My multi-line description of the diagram }` (***multi-line format***) `accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
Let us look at it in the following example, with same flowchart: Let us look at it in the following example, with same flowchart:

9
docs/breakingChanges.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Breaking changes # Breaking changes
### Breaking changes from history version to latest version: ### Breaking changes from history version to latest version:
@@ -28,13 +29,13 @@ mermaid.initialize({
In old versions you needed to reference a CSS file in your HTML: In old versions you needed to reference a CSS file in your HTML:
```html ```html
<link rel="stylesheet" href="mermaid.min.css"> <link rel="stylesheet" href="mermaid.min.css" />
``` ```
or or
```html ```html
<link rel="stylesheet" href="mermaid.forest.min.css"> <link rel="stylesheet" href="mermaid.forest.min.css" />
``` ```
Now it is not needed, and there are no more CSS files in the distribution files. Now it is not needed, and there are no more CSS files in the distribution files.
@@ -43,8 +44,8 @@ You just:
```javascript ```javascript
mermaid.initialize({ mermaid.initialize({
theme: 'forest' theme: 'forest',
}) });
``` ```
and it works like a charm because now the CSS is inline with the SVG to allow simpler portability. and it works like a charm because now the CSS is inline with the SVG to allow simpler portability.

137
docs/c4c.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# C4 Diagrams # 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. > 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.
@@ -103,11 +104,11 @@ For an example, see the source code demos/index.html
5 types of C4 charts are supported. 5 types of C4 charts are supported.
* System Context (C4Context) - System Context (C4Context)
* Container diagram (C4Container) - Container diagram (C4Container)
* Component diagram (C4Component) - Component diagram (C4Component)
* Dynamic diagram (C4Dynamic) - Dynamic diagram (C4Dynamic)
* Deployment diagram (C4Deployment) - 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. 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.
@@ -117,129 +118,129 @@ updateElementStyle and UpdateElementStyle are written in the diagram last part.
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 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. The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
* Layout - Layout
* * Lay\_U, Lay\_Up - - Lay_U, Lay_Up
* * Lay\_D, Lay\_Down - - Lay_D, Lay_Down
* * Lay\_L, Lay\_Left - - Lay_L, Lay_Left
* * Lay\_R, Lay\_Right - - Lay_R, Lay_Right
The following unfinished features are not supported in the short term. The following unfinished features are not supported in the short term.
* \[ ] sprite - \[ ] sprite
* \[ ] tags - \[ ] tags
* \[ ] link - \[ ] link
* \[ ] Legend - \[ ] Legend
* \[x] System Context - \[x] System Context
* * \[x] Person(alias, label, ?descr, ?sprite, ?tags, $link) - - \[x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
* * \[x] Person\_Ext - - \[x] Person_Ext
* * \[x] System(alias, label, ?descr, ?sprite, ?tags, $link) - - \[x] System(alias, label, ?descr, ?sprite, ?tags, $link)
* * \[x] SystemDb - - \[x] SystemDb
* * \[x] SystemQueue - - \[x] SystemQueue
* * \[x] System\_Ext - - \[x] System_Ext
* * \[x] SystemDb\_Ext - - \[x] SystemDb_Ext
* * \[x] SystemQueue\_Ext - - \[x] SystemQueue_Ext
* * \[x] Boundary(alias, label, ?type, ?tags, $link) - - \[x] Boundary(alias, label, ?type, ?tags, $link)
* * \[x] Enterprise\_Boundary(alias, label, ?tags, $link) - - \[x] Enterprise_Boundary(alias, label, ?tags, $link)
* * \[x] System\_Boundary - - \[x] System_Boundary
* \[x] Container diagram - \[x] Container diagram
* * \[x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - - \[x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[x] ContainerDb - - \[x] ContainerDb
* * \[x] ContainerQueue - - \[x] ContainerQueue
* * \[x] Container\_Ext - - \[x] Container_Ext
* * \[x] ContainerDb\_Ext - - \[x] ContainerDb_Ext
* * \[x] ContainerQueue\_Ext - - \[x] ContainerQueue_Ext
* * \[x] Container\_Boundary(alias, label, ?tags, $link) - - \[x] Container_Boundary(alias, label, ?tags, $link)
* \[x] Component diagram - \[x] Component diagram
* * \[x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - - \[x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[x] ComponentDb - - \[x] ComponentDb
* * \[x] ComponentQueue - - \[x] ComponentQueue
* * \[x] Component\_Ext - - \[x] Component_Ext
* * \[x] ComponentDb\_Ext - - \[x] ComponentDb_Ext
* * \[x] ComponentQueue\_Ext - - \[x] ComponentQueue_Ext
* \[x] Dynamic diagram - \[x] Dynamic diagram
* * \[x] RelIndex(index, from, to, label, ?tags, $link) - - \[x] RelIndex(index, from, to, label, ?tags, $link)
* \[x] Deployment diagram - \[x] Deployment diagram
* * \[x] Deployment\_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) - - \[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(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_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] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
* \[x] Relationship Types - \[x] Relationship Types
* * \[x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) - - \[x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
* * \[x] BiRel (bidirectional relationship) - - \[x] BiRel (bidirectional relationship)
* * \[x] Rel\_U, Rel\_Up - - \[x] Rel_U, Rel_Up
* * \[x] Rel\_D, Rel\_Down - - \[x] Rel_D, Rel_Down
* * \[x] Rel\_L, Rel\_Left - - \[x] Rel_L, Rel_Left
* * \[x] Rel\_R, Rel\_Right - - \[x] Rel_R, Rel_Right
* * \[x] Rel\_Back - - \[x] Rel_Back
* * \[x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written. - - \[x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
* \[ ] Custom tags/stereotypes support and skinparam updates - \[ ] 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. - - \[ ] 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. - - \[ ] 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] 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. - - \[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. - - \[ ] 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. - - \[ ] 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. - - \[ ] 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. - - \[ ] 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. - - \[ ] 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] 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. 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.

167
docs/classDiagram.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Class diagrams # 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." > "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."
@@ -63,9 +64,9 @@ classDiagram
UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them. 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: 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 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 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. - The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
```mermaid-example ```mermaid-example
classDiagram classDiagram
@@ -91,8 +92,8 @@ classDiagram
There are two ways to define a class: There are two ways to define a class:
* Explicitly using keyword **class** like `class Animal` which would define the Animal 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`. - Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`.
```mermaid-example ```mermaid-example
classDiagram classDiagram
@@ -116,7 +117,7 @@ Mermaid distinguishes between attributes and functions/methods based on if the *
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 : 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: - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
```mermaid-example ```mermaid-example
classDiagram classDiagram
@@ -136,7 +137,7 @@ BankAccount : +deposit(amount)
BankAccount : +withdrawal(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: - 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 ```mermaid-example
classDiagram classDiagram
@@ -160,7 +161,7 @@ class BankAccount{
#### Return Type #### 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: 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 ```mermaid-example
classDiagram classDiagram
@@ -224,19 +225,19 @@ Optionally you can end the method/function definition with the data type that wi
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: 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 - `+` Public
* `-` Private - `-` Private
* `#` Protected - `#` Protected
* `~` Package/Internal - `~` 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 `()`: > _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()*` > - `*` Abstract e.g.: `someAbstractMethod()*`
> * `$` Static e.g.: `someStaticMethod()$` > - `$` 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: > _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$` > - `$` Static e.g.: `String someField$`
## Defining Relationship ## Defining Relationship
@@ -246,16 +247,16 @@ A relationship is a general term covering the specific types of logical connecti
There are eight different types of relations defined for classes under UML which are currently supported: There are eight different types of relations defined for classes under UML which are currently supported:
| Type | Description | | Type | Description |
| ----- | ------------- | | ---- | ------------- | ----------- |
| <|-- | Inheritance | | < | -- | Inheritance |
| \*-- | Composition | | \*-- | Composition |
| o-- | Aggregation | | o-- | Aggregation |
| --> | Association | | --> | Association |
| -- | Link (Solid) | | -- | Link (Solid) |
| ..> | Dependency | | ..> | Dependency |
| ..|> | Realization | | .. | > | Realization |
| .. | Link (Dashed) | | .. | Link (Dashed) |
```mermaid-example ```mermaid-example
classDiagram classDiagram
@@ -347,13 +348,13 @@ Here is the syntax:
Where `Relation Type` can be one of: Where `Relation Type` can be one of:
| Type | Description | | Type | Description |
| ---- | ----------- | | ---- | ----------- | ----------- |
| <| | Inheritance | | < | | Inheritance |
| \* | Composition | | \* | Composition |
| o | Aggregation | | o | Aggregation |
| > | Association | | > | Association |
| < | Association | | < | Association |
| |> | Realization | | | > | Realization |
And `Link` can be one of: And `Link` can be one of:
@@ -370,13 +371,13 @@ Multiplicity notations are placed near the end of an association.
The different cardinality options are : The different cardinality options are :
* `1` Only 1 - `1` Only 1
* `0..1` Zero or One - `0..1` Zero or One
* `1..*` One or more - `1..*` One or more
* `*` Many - `*` Many
* `n` n {where n>1} - `n` n {where n>1}
* `0..n` zero to n {where n>1} - `0..n` zero to n {where n>1}
* `1..n` one 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: Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
@@ -398,16 +399,16 @@ classDiagram
## Annotations on classes ## 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: 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 - `<<Interface>>` To represent an Interface class
* `<<Abstract>>` To represent an abstract class - `<<Abstract>>` To represent an abstract class
* `<<Service>>` To represent a service class - `<<Service>>` To represent a service class
* `<<Enumeration>>` To represent an enum - `<<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: 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: - In a **_separate line_** after a class is defined:
```mermaid-example ```mermaid-example
classDiagram classDiagram
@@ -425,7 +426,7 @@ Shape : noOfVertices
Shape : draw() Shape : draw()
``` ```
* In a ***nested structure*** along with the class definition: - In a **_nested structure_** along with the class definition:
```mermaid-example ```mermaid-example
classDiagram classDiagram
@@ -527,15 +528,15 @@ You would define these actions on a separate line after all classes have been de
click className call callback() "tooltip" click className call callback() "tooltip"
click className href "url" "tooltip" click className href "url" "tooltip"
* *action* is either `link` or `callback`, depending on which type of interaction you want to have called - _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 - _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. - _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.) - (_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. - note: callback function will be called with the nodeId as parameter.
### Examples ### Examples
*URL Link:* _URL Link:_
```mmd ```mmd
classDiagram classDiagram
@@ -545,7 +546,7 @@ class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link" click Shape2 href "https://www.github.com" "This is a tooltip for a link"
``` ```
*Callback:* _Callback:_
```mmd ```mmd
classDiagram classDiagram
@@ -558,7 +559,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
```html ```html
<script> <script>
var callbackFunction = function () { var callbackFunction = function () {
alert('A callback was triggered'); alert('A callback was triggered');
}; };
</script> </script>
``` ```
@@ -593,43 +594,23 @@ Beginner's tip—a full example using interactive links in an HTML page:
```html ```html
<body> <body>
<div class="mermaid"> <div class="mermaid">
classDiagram classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal :
Animal <|-- Duck +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim()
Animal <|-- Fish +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }
Animal <|-- Zebra callback Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link"
Animal : +int age </div>
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" <script>
link Zebra "https://www.github.com" "This is a link" var callback = function () {
</div> alert('A callback was triggered');
};
<script> var config = {
var callback = function () { startOnLoad: true,
alert('A callback was triggered'); securityLevel: 'loose',
}; };
var config = { mermaid.initialize(config);
startOnLoad: true, </script>
securityLevel: 'loose'
};
mermaid.initialize(config);
</script>
</body> </body>
``` ```
@@ -641,10 +622,10 @@ It is possible to apply specific styles such as a thicker border or a different
```html ```html
<style> <style>
.cssClass > rect{ .cssClass > rect {
fill:#FF0000; fill: #ff0000;
stroke:#FFFF00; stroke: #ffff00;
stroke-width:4px; stroke-width: 4px;
} }
</style> </style>
``` ```
@@ -676,7 +657,7 @@ classDiagram
?> cssClasses cannot be added using this shorthand method at the same time as a relation statement. ?> 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!*** ?> 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 ### Default Styles

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

@@ -1,11 +1,12 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Configuration # Configuration
When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for 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 - 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**. - 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. - 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. **The render config** is configuration that is used when rendering by applying these configurations.

11
docs/development.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Development and Contribution 🙌 # Development and Contribution 🙌
So you want to help? That's great! So you want to help? That's great!
@@ -23,11 +24,11 @@ This means that **you should branch off your pull request from develop** and dir
## Contributing Code ## 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: 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 - 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 - 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) - 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: When you commit code, create a branch with the following naming convention:
@@ -59,7 +60,7 @@ The documentation is located in the `src/docs` directory and organized according
The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually. 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) 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 ### Add Unit Tests for Parsing

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

@@ -1,9 +1,11 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
***
---
sort: 3 sort: 3
title: Flowchart title: Flowchart
----------------
---
# Flowcharts - Basic Syntax # Flowcharts - Basic Syntax
@@ -37,17 +39,17 @@ graph LR
Possible FlowChart orientations are: Possible FlowChart orientations are:
* TB - top to bottom - TB - top to bottom
* TD - top-down (same as top to bottom) - TD - top-down (same as top to bottom)
* BT - bottom to top - BT - bottom to top
* RL - right to left - RL - right to left
* LR - left to right - LR - left to right
## Flowcharts ## Flowcharts
This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs. 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. 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).\*\* > **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).\*\*
@@ -157,7 +159,7 @@ graph LR
id1>This is the text in the box] 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.* Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
### A node (rhombus) ### A node (rhombus)
@@ -449,8 +451,8 @@ 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 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. 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* 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: to node _E_, so that it spans two more ranks than regular links:
```mermaid-example ```mermaid-example
graph TD graph TD
@@ -498,12 +500,12 @@ graph TD
For dotted or thick links, the characters to add are equals signs or dots, For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table: as summed up in the following table:
| Length | 1 | 2 | 3 | | Length | 1 | 2 | 3 |
|-------------------|:------:|:-------:|:--------:| | ----------------- | :----: | :-----: | :------: |
| Normal | `---` | `----` | `-----` | | Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` | | Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` | | Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` | | Thick with arrow | `==>` | `===>` | `====>` |
| Dotted | `-.-` | `-..-` | `-...-` | | Dotted | `-.-` | `-..-` | `-...-` |
| Dotted with arrow | `-.->` | `-..->` | `-...->` | | Dotted with arrow | `-.->` | `-..->` | `-...->` |
@@ -634,14 +636,14 @@ A node can have click events bound that lead to either a JavaScript callback or
click nodeId callback click nodeId callback
click nodeId call callback() click nodeId call callback()
* nodeId is the id of the node - 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. - `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 ```html
<script> <script>
var callback = function (nodeId) { var callback = function (nodeId) {
alert('A callback was triggered on ' + nodeId); alert('A callback was triggered on ' + nodeId);
}; };
</script> </script>
``` ```
@@ -705,38 +707,33 @@ Beginner's tip—here's a full example of using interactive links in HTML:
```html ```html
<body> <body>
<div class="mermaid"> <div class="mermaid">
graph LR; graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com"
A-->B; "This is a link" click C call callback() "Tooltip" click D href "https://www.github.com"
B-->C; "This is a link"
C-->D; </div>
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"
</div>
<script> <script>
var callback = function () { var callback = function () {
alert('A callback was triggered'); alert('A callback was triggered');
}; };
var config = { var config = {
startOnLoad: true, startOnLoad: true,
flowchart: { flowchart: {
useMaxWidth: true, useMaxWidth: true,
htmlLabels: true, htmlLabels: true,
curve: 'cardinal' curve: 'cardinal',
}, },
securityLevel: 'loose' securityLevel: 'loose',
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
</body> </body>
``` ```
### Comments ### 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. 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 ```mmd
graph LR graph LR
@@ -825,8 +822,8 @@ It is also possible to predefine classes in css styles that can be applied from
```css ```css
.cssClass > rect { .cssClass > rect {
fill: #FF0000; fill: #ff0000;
stroke: #FFFF00; stroke: #ffff00;
stroke-width: 4px; stroke-width: 4px;
} }
``` ```
@@ -855,7 +852,7 @@ If a class is named `default` it will be assigned to all nodes that do not have
## Basic support for fontawesome ## Basic support for fontawesome
It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#. It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
```mermaid-example ```mermaid-example
graph TD graph TD
@@ -875,9 +872,9 @@ graph TD
## Graph declarations with spaces between vertices and link and without semicolon ## 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. - 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. - 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. Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges.
@@ -906,6 +903,6 @@ In Javascript config parameters can be set by using `mermaid.flowchartConfig`:
```javascript ```javascript
mermaid.flowchartConfig = { mermaid.flowchartConfig = {
width: '100%' width: '100%',
} };
``` ```

67
docs/directives.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Directives # Directives
## Directives ## Directives
@@ -7,22 +8,22 @@ Directives gives a diagram author the capability to alter the appearance of a di
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. 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. 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 ## Types of Directives options
Mermaid basically supports two types of configuration options to be overridden by directives. 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 - theme
* fontFamily - fontFamily
* logLevel - logLevel
* securityLevel - securityLevel
* startOnLoad - startOnLoad
* secure - 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. 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. 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. **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.
@@ -35,7 +36,7 @@ Mermaid basically supports two types of configuration options to be overridden b
Now that we have defined the types of configurations that are available, we can learn how to declare 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} %%`. 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. 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: Following code snippet shows the structure of a directive:
@@ -94,9 +95,9 @@ parsing the above generates a single `%%init%%` JSON object below, combining the
```json5 ```json5
{ {
logLevel: 'fatal', logLevel: 'fatal',
theme: 'dark', theme: 'dark',
startOnLoad: true startOnLoad: true,
} }
``` ```
@@ -182,11 +183,11 @@ The following code snippet changes theme to forest:
Possible logLevel values are: Possible logLevel values are:
* `1` for *debug*, - `1` for _debug_,
* `2` for *info* - `2` for _info_
* `3` for *warn* - `3` for _warn_
* `4` for *error* - `4` for _error_
* `5` for *only fatal errors* - `5` for _only fatal errors_
Default Value is `5`. Default Value is `5`.
@@ -218,13 +219,13 @@ A --> C[End]
Some common flowchart configurations are: Some common flowchart configurations are:
* *htmlLabels*: true/false - _htmlLabels_: true/false
* *curve*: linear/curve - _curve_: linear/curve
* *diagramPadding*: number - _diagramPadding_: number
* *useMaxWidth*: 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. 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* _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
The following code snippet changes flowchart config: The following code snippet changes flowchart config:
@@ -258,17 +259,17 @@ A --> C[End]
Some common sequence configurations are: Some common sequence configurations are:
* *width*: number - _width_: number
* *height*: number - _height_: number
* *messageAlign*: left, center, right - _messageAlign_: left, center, right
* *mirrorActors*: boolean - _mirrorActors_: boolean
* *useMaxWidth*: boolean - _useMaxWidth_: boolean
* *rightAngles*: boolean - _rightAngles_: boolean
* *showSequenceNumbers*: boolean - _showSequenceNumbers_: boolean
* *wrap*: boolean - _wrap_: boolean
For complete list of sequence diagram configurations, see *defaultConfig.js* in the source code. 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* _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. So, `wrap` by default has a value of `false` for sequence diagrams.

29
docs/entityRelationshipDiagram.md
View File

@@ -1,9 +1,10 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Entity Relationship Diagrams # Entity Relationship Diagrams
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia. > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
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. 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 can render ER diagrams
@@ -25,7 +26,7 @@ Entity names are often capitalised, although there is no accepted standard on th
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. 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*. 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 ```mermaid-example
erDiagram erDiagram
@@ -67,7 +68,7 @@ erDiagram
} }
``` ```
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. 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 ## Syntax
@@ -79,16 +80,16 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
Where: Where:
* `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores. - `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. - `relationship` describes the way that both entities inter-relate. See below.
* `second-entity` is the name of the other entity. - `second-entity` is the name of the other entity.
* `relationship-label` describes the relationship from the perspective of the first entity. - `relationship-label` describes the relationship from the perspective of the first entity.
For example: 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). 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. 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.
@@ -96,9 +97,9 @@ Only the `first-entity` part of a statement is mandatory. This makes it possible
The `relationship` part of each statement can be broken down into three sub-components: The `relationship` part of each statement can be broken down into three sub-components:
* the cardinality of the first entity with respect to the second, - the cardinality of the first entity with respect to the second,
* whether the relationship confers identity on a 'child' entity - whether the relationship confers identity on a 'child' entity
* the cardinality of the second entity with respect to the first - 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. 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.
@@ -111,7 +112,7 @@ Cardinality is a property that describes how many elements of another entity can
### Identification ### 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: 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 ```mmd
erDiagram erDiagram
@@ -233,8 +234,8 @@ erDiagram
### Other Things ### Other Things
* If you want the relationship label to be more than one word, you must use double quotes around the phrase - 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 - If you don't want a label at all on a relationship, you must use an empty double-quoted string
## Styling ## Styling

1
docs/examples.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Examples # Examples
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications. This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.

1
docs/faq.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Frequently Asked Questions # Frequently Asked Questions
1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217) 1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)

25
docs/flowchart.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Flowcharts - Basic Syntax # 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. 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.
@@ -69,11 +70,11 @@ flowchart LR
Possible FlowChart orientations are: Possible FlowChart orientations are:
* TB - top to bottom - TB - top to bottom
* TD - top-down/ same as top to bottom - TD - top-down/ same as top to bottom
* BT - bottom to top - BT - bottom to top
* RL - right to left - RL - right to left
* LR - left to right - LR - left to right
## Node shapes ## Node shapes
@@ -149,7 +150,7 @@ flowchart LR
id1>This is the text in the box] 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.* Currently only the shape above is possible and not its mirror. _This might change with future releases._
### A node (rhombus) ### A node (rhombus)
@@ -452,8 +453,8 @@ 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 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. 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* 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: to node _E_, so that it spans two more ranks than regular links:
```mermaid-example ```mermaid-example
flowchart TD flowchart TD
@@ -677,8 +678,8 @@ It is possible to bind a click event to a node, the click can lead to either a j
click nodeId callback click nodeId callback
click nodeId call callback() click nodeId call callback()
* nodeId is the id of the node - 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. - 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: Examples of tooltip usage below:
@@ -918,9 +919,9 @@ flowchart TD
## Graph declarations with spaces between vertices and link and without semicolon ## 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. - 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. - 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. Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.

106
docs/gantt.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Gantt diagrams # 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 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.
@@ -127,35 +128,35 @@ It is possible to set multiple dependencies separated by space:
### Title ### Title
The `title` is an *optional* string to be displayed at the top of the Gantt chart to describe the chart as a whole. 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 ### Section statements
You can divide the chart into various sections, for example to separate different parts of a project like development and documentation. 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*. 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 ### 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. 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 ```mermaid-example
gantt gantt
dateFormat HH:mm dateFormat HH:mm
axisFormat %H:%M axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min Initial milestone : milestone, m1, 17:49,2min
taska2 : 10min taska2 : 10min
taska3 : 5min taska3 : 5min
Final milestone : milestone, m2, 18:14, 2min Final milestone : milestone, m2, 18:14, 2min
``` ```
```mermaid ```mermaid
gantt gantt
dateFormat HH:mm dateFormat HH:mm
axisFormat %H:%M axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min Initial milestone : milestone, m1, 17:49,2min
taska2 : 10min taska2 : 10min
taska3 : 5min taska3 : 5min
Final milestone : milestone, m2, 18:14, 2min Final milestone : milestone, m2, 18:14, 2min
``` ```
@@ -254,13 +255,13 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri
### Classes used ### Classes used
Class | Description Class | Description
\--- | --- \--- | ---
grid.tick | Styling for the Grid Lines grid.tick | Styling for the Grid Lines
grid.path | Styling for the Grid's borders grid.path | Styling for the Grid's borders
.taskText | Task Text Styling .taskText | Task Text Styling
.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. .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. .taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left.
todayMarker | Toggle and Styling for the "Today Marker" todayMarker | Toggle and Styling for the "Today Marker"
### Sample stylesheet ### Sample stylesheet
@@ -276,11 +277,11 @@ todayMarker | Toggle and Styling for the "Today Marker"
#tag { #tag {
color: white; color: white;
background: #FA283D; background: #fa283d;
width: 150px; width: 150px;
position: absolute; position: absolute;
display: none; display: none;
padding:3px 6px; padding: 3px 6px;
margin-left: -80px; margin-left: -80px;
font-size: 11px; font-size: 11px;
} }
@@ -294,20 +295,20 @@ todayMarker | Toggle and Styling for the "Today Marker"
position: absolute; position: absolute;
width: 0; width: 0;
border-width: 10px; border-width: 10px;
border-bottom-color: #FA283D; border-bottom-color: #fa283d;
top: -20px; top: -20px;
} }
.taskText { .taskText {
fill:white; fill: white;
text-anchor:middle; text-anchor: middle;
} }
.taskTextOutsideRight { .taskTextOutsideRight {
fill:black; fill: black;
text-anchor:start; text-anchor: start;
} }
.taskTextOutsideLeft { .taskTextOutsideLeft {
fill:black; fill: black;
text-anchor:end; text-anchor: end;
} }
``` ```
@@ -332,12 +333,12 @@ mermaid.ganttConfig can be set to a JSON string with config parameters or the co
```javascript ```javascript
mermaid.ganttConfig = { mermaid.ganttConfig = {
titleTopMargin:25, titleTopMargin: 25,
barHeight:20, barHeight: 20,
barGap:4, barGap: 4,
topPadding:75, topPadding: 75,
sidePadding:75 sidePadding: 75,
} };
``` ```
### Possible configuration params: ### Possible configuration params:
@@ -354,39 +355,32 @@ It is possible to bind a click event to a task. The click can lead to either a j
click taskId call callback(arguments) click taskId call callback(arguments)
click taskId href URL click taskId href URL
* taskId is the id of the task - 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. - 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: Beginner's tip—a full example using interactive links in an html context:
```html ```html
<body> <body>
<div class="mermaid"> <div class="mermaid">
gantt gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d
dateFormat YYYY-MM-DD 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()
</div>
section Clickable <script>
Visit mermaidjs :active, cl1, 2014-01-07, 3d var printArguments = function (arg1, arg2, arg3) {
Print arguments :cl2, after cl1, 3d alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
Print task :cl3, after cl2, 3d };
var printTask = function (taskId) {
click cl1 href "https://mermaidjs.github.io/" alert('taskId: ' + taskId);
click cl2 call printArguments("test1", "test2", test3) };
click cl3 call printTask() var config = {
</div> startOnLoad: true,
securityLevel: 'loose',
<script> };
var printArguments = function(arg1, arg2, arg3) { mermaid.initialize(config);
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3); </script>
}
var printTask = function(taskId) {
alert('taskId: ' + taskId);
}
var config = {
startOnLoad:true,
securityLevel:'loose',
};
mermaid.initialize(config);
</script>
</body> </body>
``` ```

57
docs/gitgraph.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Gitgraph Diagrams # Gitgraph Diagrams
> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches. > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
@@ -37,10 +38,10 @@ Mermaid can render Git diagrams
In Mermaid, we support the basic git operations like: In Mermaid, we support the basic git operations like:
* *commit* : Representing a new commit on the current branch. - _commit_ : Representing a new commit on the current branch.
* *branch* : To create & switch to a new branch, setting it as the current branch. - _branch_ : To create & switch to a new branch, setting it as the current branch.
* *checkout* : To checking out an existing branch and setting it as the current branch. - _checkout_ : To checking out an existing branch and setting it as the current branch.
* *merge* : To merge an existing branch onto the current branch. - _merge_ : To merge an existing branch onto the current branch.
With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.
Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid. Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.
@@ -51,11 +52,11 @@ Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a
First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly. First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.
Each gitgraph, is initialized with ***main*** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as ***master*** branch). And by-default, `main` branch is set as your ***current branch***. Each gitgraph, is initialized with **_main_** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as **_master_** branch). And by-default, `main` branch is set as your **_current branch_**.
You make use of ***commit*** keyword to register a commit on the current branch. Let see how this works: You make use of **_commit_** keyword to register a commit on the current branch. Let see how this works:
A simple gitgraph showing three commits on the default (***main***) branch: A simple gitgraph showing three commits on the default (**_main_**) branch:
```mermaid-example ```mermaid-example
gitGraph gitGraph
@@ -99,9 +100,9 @@ In this example, we have given our custom IDs to the commits.
In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are: In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are:
* `NORMAL` : Default commit type. Represented by a solid circle in the diagram - `NORMAL` : Default commit type. Represented by a solid circle in the diagram
* `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram. - `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram.
* `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram. - `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram.
For a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT` For a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT`
@@ -237,7 +238,7 @@ In Mermaid, in order to merge or join to an existing branch, you make use of the
Usage example: `merge develop` Usage example: `merge develop`
When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a ***merge commit***, represented in the diagram with **filled double circle**. When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **_merge commit_**, represented in the diagram with **filled double circle**.
Let us modify our previous example to merge our two branches: Let us modify our previous example to merge our two branches:
@@ -281,9 +282,9 @@ Since the current branch at this point is still `main`, the last two commits are
You can also decorate your merge with similar attributes as you did for the commit using: You can also decorate your merge with similar attributes as you did for the commit using:
* `id`--> To override the default ID with custom ID - `id`--> To override the default ID with custom ID
* `tag`--> To add a custom tag to your merge commit - `tag`--> To add a custom tag to your merge commit
* `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier. - `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier.
And you can choose to use none, some or all of these attributes together. And you can choose to use none, some or all of these attributes together.
For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE` For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE`
@@ -396,10 +397,10 @@ Let see an example:
In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
* `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. - `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.
* `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. - `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
* `mainBranchName` : String, default is `main`. The name of the default/root branch. - `mainBranchName` : String, default is `main`. The name of the default/root branch.
* `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order. - `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order.
Let's look at them one by one. Let's look at them one by one.
@@ -751,9 +752,9 @@ Sometimes you may want to customize the order of the branches. You can do this b
Mermaid follows the given precedence order of the `order` keyword. Mermaid follows the given precedence order of the `order` keyword.
* Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config) - Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config)
* Next, All branches without an `order` are shown in the order of their appearance in the diagram code. - Next, All branches without an `order` are shown in the order of their appearance in the diagram code.
* Next, All branches with an `order` are shown in the order of their `order` value. - Next, All branches with an `order` are shown in the order of their `order` value.
To fully control the order of all the branches, you must define `order` for all the branches. To fully control the order of all the branches, you must define `order` for all the branches.
@@ -820,13 +821,13 @@ Mermaid supports a bunch of pre-defined themes which you can use to find the rig
The following are the different pre-defined theme options: The following are the different pre-defined theme options:
* `base` - `base`
* `forest` - `forest`
* `dark` - `dark`
* `default` - `default`
* `neutral` - `neutral`
**NOTE**: To change theme you can either use the `initialize` call or *directives*. Learn more about [directives](./directives.md) **NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md)
Let's put them to use, and see how our sample diagram looks in different themes: Let's put them to use, and see how our sample diagram looks in different themes:
### Base Theme ### Base Theme
@@ -1342,7 +1343,7 @@ See how the default theme is used to set the colors for the branches:
> #### IMPORTANT: > #### 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'. > 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'.
> *More on this in the next section. See examples on **Customizing branch label colors** below* > _More on this in the next section. See examples on **Customizing branch label colors** below_
### Customizing branch colors ### Customizing branch colors

11
docs/index.html
View File

@@ -25,10 +25,12 @@
<!-- <script src="http://localhost:9000/mermaid.js"></script> --> <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script> <script>
// prettier-ignore // prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function (i, s, o, g, r, a, m) {
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) (i[r].q = i[r].q || []).push(arguments)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); }, 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'); ga('create', 'UA-153180559-1', 'auto');
if (location) { if (location) {
@@ -54,6 +56,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>

285
docs/integrations.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Integrations # Integrations
The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
@@ -7,172 +8,172 @@ They also serve as proof of concept, for the variety of things that can be built
## Productivity ## Productivity
* [GitHub](https://github.com) (**Native support**) - [GitHub](https://github.com) (**Native support**)
* [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**) - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
* [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action) - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
* [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator) - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
* [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**) - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
* [Gitea](https://gitea.io) (**Native support**) - [Gitea](https://gitea.io) (**Native support**)
* [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**) - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
* [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**) - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
* [Joplin](https://joplinapp.org) (**Native support**) - [Joplin](https://joplinapp.org) (**Native support**)
* [Notion](https://notion.so) (**Native support**) - [Notion](https://notion.so) (**Native support**)
* [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**) - [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
* [GitBook](https://gitbook.com) - [GitBook](https://gitbook.com)
* [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
* [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
* [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
* [LiveBook](https://livebook.dev) (**Native support**) - [LiveBook](https://livebook.dev) (**Native support**)
* [Atlassian Products](https://www.atlassian.com) - [Atlassian Products](https://www.atlassian.com)
* [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server\&tab=overview) - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
* [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud\&tab=overview) - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
* [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid) - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
* [Redmine](https://redmine.org) - [Redmine](https://redmine.org)
* [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
* [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
* [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
* [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) - [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
## CRM/ERP/Similar ## CRM/ERP/Similar
* [coreBOS](https://blog.corebos.org/blog/december2019) - [coreBOS](https://blog.corebos.org/blog/december2019)
## Blogs ## Blogs
* [Wordpress](https://wordpress.org) - [Wordpress](https://wordpress.org)
* [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md) - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
* [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/) - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
* [Hexo](https://hexo.io) - [Hexo](https://hexo.io)
* [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams) - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
* [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid) - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
* [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams) - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
## CMS ## CMS
* [VuePress](https://vuepress.vuejs.org/) - [VuePress](https://vuepress.vuejs.org/)
* [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs) - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
* [Grav CMS](https://getgrav.org/) - [Grav CMS](https://getgrav.org/)
* [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
* [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
## Communication ## Communication
* [Discourse](https://discourse.org) - [Discourse](https://discourse.org)
* [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid) - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
* [Mattermost](https://mattermost.com/) - [Mattermost](https://mattermost.com/)
* [Mermaid Plugin](https://github.com/SpikeTings/Mermaid) - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
* [phpBB](https://phpbb.com) - [phpBB](https://phpbb.com)
* [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
* [NodeBB](https://nodebb.org) - [NodeBB](https://nodebb.org)
* [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
## Wikis ## Wikis
* [MediaWiki](https://www.mediawiki.org) - [MediaWiki](https://www.mediawiki.org)
* [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid) - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
* [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams) - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
* [Semantic Media Wiki](https://semantic-mediawiki.org) - [Semantic Media Wiki](https://semantic-mediawiki.org)
* [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid) - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
* [FosWiki](https://foswiki.org) - [FosWiki](https://foswiki.org)
* [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin) - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
* [DokuWiki](https://dokuwiki.org) - [DokuWiki](https://dokuwiki.org)
* [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid) - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
* [ComboStrap](https://combostrap.com/mermaid) - [ComboStrap](https://combostrap.com/mermaid)
* [TiddlyWiki](https://tiddlywiki.com/) - [TiddlyWiki](https://tiddlywiki.com/)
* [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5) - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
* [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid) - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
## Editor Plugins ## Editor Plugins
* [Vs Code](https://code.visualstudio.com/) - [Vs Code](https://code.visualstudio.com/)
* [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
* [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview) - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
* [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting) - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
* [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor) - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
* [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export) - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
* [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf) - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
* [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode) - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
* [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode) - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
* [Markdown-It](https://github.com/markdown-it/markdown-it) - [Markdown-It](https://github.com/markdown-it/markdown-it)
* [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml) - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
* [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid) - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
* [md-it-mermaid](https://github.com/iamcco/md-it-mermaid) - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
* [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new) - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
* [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less) - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
* [Atom](https://atom.io) - [Atom](https://atom.io)
* [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced) - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced)
* [Atom Mermaid](https://atom.io/packages/atom-mermaid) - [Atom Mermaid](https://atom.io/packages/atom-mermaid)
* [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid) - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
* [Sublime Text 3](https://sublimetext.com) - [Sublime Text 3](https://sublimetext.com)
* [Mermaid Package](https://packagecontrol.io/packages/Mermaid) - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
* [Astah](https://astah.net) - [Astah](https://astah.net)
* [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-) - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
* [Light Table](http://lighttable.com/) - [Light Table](http://lighttable.com/)
* [Mermaid Plugin](https://github.com/cldwalker/Mermaid) - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
* [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin) - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
* [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid) - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
* [Vim](https://www.vim.org) - [Vim](https://www.vim.org)
* [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
* [GNU Emacs](https://www.gnu.org/software/emacs/) - [GNU Emacs](https://www.gnu.org/software/emacs/)
* [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode) - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
* [Org-Mode integration](https://github.com/arnm/ob-mermaid) - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
* [Brackets](https://brackets.io/) - [Brackets](https://brackets.io/)
* [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview) - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
* [Iodide](https://github.com/iodide-project/iodide) - [Iodide](https://github.com/iodide-project/iodide)
* [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin) - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
* [Google docs](https://docs.google.com/) - [Google docs](https://docs.google.com/)
* [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856) - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
* [Podlite](https://github.com/zag/podlite-desktop) - [Podlite](https://github.com/zag/podlite-desktop)
* [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams) - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
* [GNU Nano](https://www.nano-editor.org/) - [GNU Nano](https://www.nano-editor.org/)
* [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid) - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
## Document Generation ## Document Generation
* [Sphinx](https://www.sphinx-doc.org/en/master/) - [Sphinx](https://www.sphinx-doc.org/en/master/)
* [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
* [remark.js](https://remark.js.org/) - [remark.js](https://remark.js.org/)
* [remark-mermaid](https://github.com/temando/remark-mermaid) - [remark-mermaid](https://github.com/temando/remark-mermaid)
* [jSDoc](https://jsdoc.app/) - [jSDoc](https://jsdoc.app/)
* [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid) - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
* [MkDocs](https://mkdocs.org) - [MkDocs](https://mkdocs.org)
* [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin) - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
* [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/) - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
* [Type Doc](https://typedoc.org/) - [Type Doc](https://typedoc.org/)
* [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid) - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
* [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme) - [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
* [Codedoc](https://codedoc.cc/) - [Codedoc](https://codedoc.cc/)
* [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
* [mdbook](https://rust-lang.github.io/mdBook/index.html) - [mdbook](https://rust-lang.github.io/mdBook/index.html)
* [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
## Browser Extensions ## Browser Extensions
| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | | Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
| -- | -- | -- | -- | -- | -- | | ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) | GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) |
| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -| | Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | - |
| Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) | | Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) |
| Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) | | Markdown Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
| Markdown Viewer| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer)| | Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) |
| Extensions for Mermaid| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/)| - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | | Extensions for Mermaid | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
| Chrome Diagrammer| [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - |- | - | - | | Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - |
| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - | | Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
|Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - | | Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - |
| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | | Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | | Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
## Other ## Other
* [Jekyll](https://jekyllrb.com/) - [Jekyll](https://jekyllrb.com/)
* [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
* [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
* [Reveal.js](https://github.com/hakimel/reveal.js) - [Reveal.js](https://github.com/hakimel/reveal.js)
* [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin) - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
* [Bisheng](https://www.npmjs.com/package/bisheng) - [Bisheng](https://www.npmjs.com/package/bisheng)
* [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
* [Reveal CK](https://github.com/jedcn/reveal-ck) - [Reveal CK](https://github.com/jedcn/reveal-ck)
* [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin) - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
* [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server) - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
* [ExDoc](https://github.com/elixir-lang/ex_doc) - [ExDoc](https://github.com/elixir-lang/ex_doc)
* [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs) - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)

1
docs/mermaidCLI.md
View File

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

3
docs/n00b-advanced.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Advanced n00b mermaid (Coming soon..) # Advanced n00b mermaid (Coming soon..)
## splitting mermaid code from html ## splitting mermaid code from html
@@ -14,7 +15,7 @@ The actual mermaid file could for example look like this:
mermaid content... mermaid content...
*** ---
## mermaid configuration options ## mermaid configuration options

34
docs/n00b-gettingStarted.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# A Mermaid User-Guide for Beginners # A Mermaid User-Guide for Beginners
Mermaid is composed of three parts: Deployment, Syntax and Configuration. Mermaid is composed of three parts: Deployment, Syntax and Configuration.
@@ -96,10 +97,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
<body> <body>
Here is a mermaid diagram: Here is a mermaid diagram:
<div class="mermaid"> <div class="mermaid">
graph TD graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</div> </div>
</body> </body>
``` ```
@@ -141,19 +139,13 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
Here is one mermaid diagram: Here is one mermaid diagram:
<div class="mermaid"> <div class="mermaid">
graph TD graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</div> </div>
And here is another: And here is another:
<div class="mermaid"> <div class="mermaid">
graph TD graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B
A[Client] -->|tcp_123| B -->|tcp_456| D[Server2]
B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</div> </div>
</body> </body>
</html> </html>
@@ -168,17 +160,9 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
<div class="mermaid"> <div class="mermaid">
graph LR graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<div class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</div> </div>
<script src="The\Path\In\Your\Package\mermaid.js"></script> <script src="The\Path\In\Your\Package\mermaid.js"></script>
<script> <script>
@@ -188,7 +172,7 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
</html> </html>
``` ```
*** ---
## 4. Adding Mermaid as a dependency. ## 4. Adding Mermaid as a dependency.
@@ -205,4 +189,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
**Comments from Knut Sveidqvist, creator of mermaid:** **Comments from Knut Sveidqvist, creator of mermaid:**
* In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works. - In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.

18
docs/n00b-overview.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Overview for Beginners # Overview for Beginners
**Explaining with a Diagram** **Explaining with a Diagram**
@@ -26,12 +27,9 @@ It is a relatively straightforward solution to a significant hurdle with the sof
> These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`. > These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`.
```html ```html
<div class="mermaid"> <div class="mermaid">
graph TD graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
A[Client] --> B[Load Balancer] </div>
B --> C[Server01]
B --> D[Server02]
</div>
``` ```
**render** **render**
@@ -44,10 +42,10 @@ It is a relatively straightforward solution to a significant hurdle with the sof
## Advantages of using Mermaid ## Advantages of using Mermaid
* Ease to generate, modify and render diagrams when you make them. - Ease to generate, modify and render diagrams when you make them.
* The number of integrations and plugins it has. - The number of integrations and plugins it has.
* You can add it to your or companies website. - You can add it to your or companies website.
* Diagrams can be created through comments like this in a script: - Diagrams can be created through comments like this in a script:
## The catch-22 of Diagrams and Charts: ## The catch-22 of Diagrams and Charts:

15
docs/n00b-syntaxReference.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Diagram Syntax # 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. 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.
@@ -43,13 +44,13 @@ The [Getting Started](./n00b-gettingStarted.md) section can also provide some pr
One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated. One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
| Diagram Breakers | Reason |Solution| | Diagram Breakers | Reason | Solution |
| --- | --- |---| | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- |
| **Comments** | | | | **Comments** | | |
|[`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](./directives.md) confuses the renderer.|In comments using `%%`, avoid using "{}".| | [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](./directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
| **Flow-Charts** | | | | **Flow-Charts** | | |
|'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage.| | 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax)| Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking| | [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking |
### Mermaid Live Editor ### Mermaid Live Editor

45
docs/newDiagram.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Adding a New Diagram/Chart 📊 # Adding a New Diagram/Chart 📊
### Step 1: Grammar & Parsing ### Step 1: Grammar & Parsing
@@ -9,8 +10,8 @@ This would be to define a jison grammar for the new diagram type. That should st
For instance: For instance:
* the flowchart starts with the keyword graph. - the flowchart starts with the keyword graph.
* the sequence diagram starts with the keyword sequenceDiagram - the sequence diagram starts with the keyword sequenceDiagram
#### Store data found during parsing #### Store data found during parsing
@@ -36,17 +37,17 @@ For more info look in the example diagram type:
The `yy` object has the following function: The `yy` object has the following function:
```javascript ```javascript
exports.parseError = function(err, hash){ exports.parseError = function (err, hash) {
mermaid.parseError(err, hash) mermaid.parseError(err, hash);
}; };
``` ```
when parsing the `yy` object is initialized as per below: when parsing the `yy` object is initialized as per below:
```javascript ```javascript
var parser var parser;
parser = exampleParser.parser parser = exampleParser.parser;
parser.yy = db parser.yy = db;
``` ```
### Step 2: Rendering ### Step 2: Rendering
@@ -68,35 +69,35 @@ At this point when mermaid is trying to render the diagram, it will detect it as
### Setup ### Setup
```javascript ```javascript
var graph = require('./graphDb') var graph = require('./graphDb');
var flow = require('./parser/flow') var flow = require('./parser/flow');
flow.parser.yy = graph flow.parser.yy = graph;
``` ```
### Parsing ### Parsing
```javascript ```javascript
flow.parser.parse(text) flow.parser.parse(text);
``` ```
### Data extraction ### Data extraction
```javascript ```javascript
graph.getDirection() graph.getDirection();
graph.getVertices() graph.getVertices();
graph.getEdges() graph.getEdges();
``` ```
The parser is also exposed in the mermaid api by calling: The parser is also exposed in the mermaid api by calling:
```javascript ```javascript
var parser = mermaid.getParser() var parser = mermaid.getParser();
``` ```
Note that the parse needs a graph object to store the data as per: Note that the parse needs a graph object to store the data as per:
```javascript ```javascript
flow.parser.yy = graph flow.parser.yy = graph;
``` ```
Look at `graphDb.js` for more details on that object. Look at `graphDb.js` for more details on that object.
@@ -109,10 +110,10 @@ If you are using a dagre based layout, please use flowchart-v2 as a template and
There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are: There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:
* Directives, a way of modifying the diagram configuration from within the diagram code. - Directives, a way of modifying the diagram configuration from within the diagram code.
* Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader. - Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
* Themes, there is a common way to modify the styling of diagrams in Mermaid. - Themes, there is a common way to modify the styling of diagrams in Mermaid.
* Comments should follow mermaid standards - Comments should follow mermaid standards
Here some pointers on how to handle these different areas. Here some pointers on how to handle these different areas.
@@ -231,7 +232,7 @@ When adding themes to a diagram it comes down to a few important locations in th
The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram. The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram.
This function will in turn call a function *your diagram should provide* returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example: This function will in turn call a function _your diagram should provide_ returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:
```js ```js
const getStyles = (options) => const getStyles = (options) =>
@@ -245,7 +246,7 @@ const getStyles = (options) =>
`; `;
``` ```
Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example: Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example:
```js ```js
const themes = { const themes = {

17
docs/pie.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Pie chart diagrams # 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 > 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
@@ -24,16 +25,16 @@ pie title Pets adopted by volunteers
Drawing a pie chart is really simple in mermaid. Drawing a pie chart is really simple in mermaid.
* Start with `pie` keyword to begin the diagram - Start with `pie` keyword to begin the diagram
* `showData` to render the actual data values after the legend text. This is ***OPTIONAL*** - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
* Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL*** - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
* Followed by dataSet - Followed by dataSet
* `label` for a section in the pie diagram within `" "` quotes. - `label` for a section in the pie diagram within `" "` quotes.
* Followed by `:` colon as separator - Followed by `:` colon as separator
* Followed by `positive numeric value` (supported upto two decimal places) - Followed by `positive numeric value` (supported upto two decimal places)
\[pie] \[showData] (OPTIONAL) \[pie] \[showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL) \[title] \[titlevalue] (OPTIONAL)
"\[datakey1]" : \[dataValue1] "\[datakey1]" : \[dataValue1]
"\[datakey2]" : \[dataValue2] "\[datakey2]" : \[dataValue2]
"\[datakey3]" : \[dataValue3] "\[datakey3]" : \[dataValue3]

11
docs/requirementDiagram.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Requirement Diagram # 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. > 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.
@@ -60,11 +61,11 @@ A requirement definition contains a requirement type, name, id, text, risk, and
Type, risk, and method are enumerations defined in SysML. Type, risk, and method are enumerations defined in SysML.
| Keyword | Options | | Keyword | Options |
|---|---| | ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint | | Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
| Risk | Low, Medium, High | | Risk | Low, Medium, High |
| VerificationMethod | Analysis, Inspection, Test, Demonstration | | VerificationMethod | Analysis, Inspection, Test, Demonstration |
### Element ### Element

1
docs/security.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Security # 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. 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.

1
docs/sequenceDiagram.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Sequence diagrams # Sequence diagrams
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

9
docs/stateDiagram.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# State diagrams # 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 > "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
@@ -242,7 +243,7 @@ stateDiagram-v2
} }
``` ```
*You can not define transitions between internal states belonging to different composite states* _You can not define transitions between internal states belonging to different composite states_
## Choice ## Choice
@@ -302,7 +303,7 @@ It is possible to specify a fork in the diagram using <\<fork>> <\<join>>.
Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams. Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
Here you can choose to put the note to the *right of* or to the *left of* a node. Here you can choose to put the note to the _right of_ or to the _left of_ a node.
```mermaid-example ```mermaid-example
stateDiagram-v2 stateDiagram-v2
@@ -400,7 +401,7 @@ stateDiagram
## Comments ## 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 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
```mmd ```mmd
stateDiagram-v2 stateDiagram-v2
@@ -415,7 +416,7 @@ stateDiagram-v2
## Styling ## Styling
Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss
## Spaces in state names ## Spaces in state names

7
docs/theming.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Theme Configuration # 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. 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.
@@ -275,9 +276,9 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed: \*\*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 - Make the primary color a little lighter
* set the tertiary color to a reddish shade as well - set the tertiary color to a reddish shade as well
* make the edge label background differ from the subgraph by setting the edgeLabelBackground - make the edge label background differ from the subgraph by setting the edgeLabelBackground
```mermaid-example ```mermaid-example
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%

9
docs/upgrading.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Upgrading # Upgrading
Some of the interfaces has been upgraded. Some of the interfaces has been upgraded.
@@ -13,14 +14,14 @@ Some of the interfaces has been upgraded.
```javascript ```javascript
mermaid_config = { mermaid_config = {
startOnLoad: true startOnLoad: true,
} };
``` ```
#### version 0.5.0 #### version 0.5.0
```javascript ```javascript
mermaid.initialize({ mermaid.initialize({
startOnLoad: true startOnLoad: true,
}) });
``` ```

37
docs/usage.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Usage # Usage
Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations. Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
@@ -102,10 +103,10 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th
Values: Values:
* **strict**: (**default**) tags in text are encoded, click functionality is disabled - **strict**: (**default**) tags in text are encoded, click functionality is disabled
* **loose**: tags in text are allowed, click functionality is enabled - **loose**: tags in text are allowed, click functionality is enabled
* **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled - **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
* **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
```note ```note
This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
@@ -157,11 +158,11 @@ By default, `mermaid.init` will be called when the document is ready, finding al
`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
finer-grained control of this behavior, you can call `init` yourself with: finer-grained control of this behavior, you can call `init` yourself with:
* a configuration object - a configuration object
* some nodes, as - some nodes, as
* a node - a node
* an array-like of nodes - an array-like of nodes
* or W3C selector that will find your nodes - or W3C selector that will find your nodes
Example: Example:
@@ -312,8 +313,8 @@ Mermaid takes a number of options which lets you tweak the rendering of the diag
setting the options in mermaid. setting the options in mermaid.
1. Instantiation of the configuration using the initialize call 1. Instantiation of the configuration using the initialize call
2. *Using the global mermaid object* - **Deprecated** 2. _Using the global mermaid object_ - **Deprecated**
3. *using the global mermaid\_config object* - **Deprecated** 3. _using the global mermaid_config object_ - **Deprecated**
4. Instantiation of the configuration using the **mermaid.init** call- **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 The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
@@ -343,8 +344,8 @@ This is the preferred way of configuring mermaid.
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are: approach are:
* mermaid.startOnLoad - mermaid.startOnLoad
* mermaid.htmlLabels - mermaid.htmlLabels
```javascript ```javascript
mermaid.startOnLoad = true; mermaid.startOnLoad = true;
@@ -354,13 +355,13 @@ mermaid.startOnLoad = true;
This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility. This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
``` ```
## Using the mermaid\_config ## Using the mermaid_config
It is possible to set some configuration via the mermaid object. The two parameters that are supported using this It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are: approach are:
* mermaid\_config.startOnLoad - mermaid_config.startOnLoad
* mermaid\_config.htmlLabels - mermaid_config.htmlLabels
```javascript ```javascript
mermaid_config.startOnLoad = true; mermaid_config.startOnLoad = true;
@@ -374,8 +375,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
To set some configuration via the mermaid object. The two parameters that are supported using this approach are: To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
* mermaid\_config.startOnLoad - mermaid_config.startOnLoad
* mermaid\_config.htmlLabels - mermaid_config.htmlLabels
```javascript ```javascript
mermaid_config.startOnLoad = true; mermaid_config.startOnLoad = true;

1
docs/user-journey.md
View File

@@ -1,4 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# User Journey Diagram # 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) > 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)

7
package.json
View File

@@ -31,8 +31,8 @@
"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", "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", "build:watch": "yarn build:dev --watch",
"release": "yarn build", "release": "yarn build",
"lint": "eslint --cache ./", "lint": "eslint --cache --ignore-path .gitignore .; prettier --check .",
"lint:fix": "yarn lint --fix", "lint:fix": "eslint --cache --fix --ignore-path .gitignore .; prettier --write .",
"e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js", "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
"cypress": "cypress run", "cypress": "cypress run",
"cypress:open": "cypress open", "cypress:open": "cypress open",
@@ -101,7 +101,6 @@
"eslint-plugin-jsdoc": "^39.3.6", "eslint-plugin-jsdoc": "^39.3.6",
"eslint-plugin-json": "^3.1.0", "eslint-plugin-json": "^3.1.0",
"eslint-plugin-markdown": "^3.0.0", "eslint-plugin-markdown": "^3.0.0",
"eslint-plugin-prettier": "^4.2.1",
"globby": "^13.1.2", "globby": "^13.1.2",
"husky": "^8.0.0", "husky": "^8.0.0",
"identity-obj-proxy": "^3.0.0", "identity-obj-proxy": "^3.0.0",
@@ -138,4 +137,4 @@
"**/*.css", "**/*.css",
"**/*.scss" "**/*.scss"
] ]
} }

8
src/docs.mts
View File

@@ -6,6 +6,7 @@ import flatmap from 'unist-util-flatmap';
import { globby } from 'globby'; import { globby } from 'globby';
import { join, dirname } from 'path'; import { join, dirname } from 'path';
import { exec } from 'child_process'; import { exec } from 'child_process';
import prettier from 'prettier';
const verify = process.argv.includes('--verify'); const verify = process.argv.includes('--verify');
let fileChanged = false; let fileChanged = false;
@@ -47,7 +48,10 @@ const transform = (file: string) => {
const transformed = `# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.\n${remark.stringify( const transformed = `# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.\n${remark.stringify(
out out
)}`; )}`;
verifyAndCopy(file, transformed); verifyAndCopy(
file,
prettier.format(transformed, { parser: 'markdown', printWidth: 100, singleQuote: true })
);
}; };
(async () => { (async () => {
@@ -64,7 +68,7 @@ const transform = (file: string) => {
); );
process.exit(1); process.exit(1);
} }
console.log('Committing changes to the docs folder'); console.log('Adding changes in docs folder to git');
exec('git add docs'); exec('git add docs');
} }
})(); })();

18
src/docs/index.html
View File

@@ -25,10 +25,12 @@
<!-- <script src="http://localhost:9000/mermaid.js"></script> --> <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script> <script>
// prettier-ignore // prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function (i, s, o, g, r, a, m) {
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) (i[r].q = i[r].q || []).push(arguments)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); }, 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'); ga('create', 'UA-153180559-1', 'auto');
if (location) { if (location) {
@@ -54,6 +56,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>
@@ -105,7 +108,9 @@
colorize.push(currentCodeExample); colorize.push(currentCodeExample);
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'; return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') { } else if (lang === 'mermaid') {
return '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>'; return (
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>'
);
} }
return this.origin.code.apply(this, arguments); return this.origin.code.apply(this, arguments);
}, },
@@ -131,7 +136,8 @@
while (!window.hasOwnProperty('monaco')) while (!window.hasOwnProperty('monaco'))
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
colorizeEverything(html).then( colorizeEverything(html).then(
(newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML) (newHTML) =>
(document.querySelector('article.markdown-section').innerHTML = newHTML)
); );
})(); })();
}); });

19
yarn.lock
View File

@@ -5608,13 +5608,6 @@ eslint-plugin-markdown@^3.0.0:
dependencies: dependencies:
mdast-util-from-markdown "^0.8.5" mdast-util-from-markdown "^0.8.5"
eslint-plugin-prettier@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-scope@5.1.1, eslint-scope@^5.1.1: eslint-scope@5.1.1, eslint-scope@^5.1.1:
version "5.1.1" version "5.1.1"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -5979,11 +5972,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-glob@^3.2.11, fast-glob@^3.2.9: fast-glob@^3.2.11, fast-glob@^3.2.9:
version "3.2.11" version "3.2.11"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -9799,13 +9787,6 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
prettier-plugin-jsdoc@^0.3.30: prettier-plugin-jsdoc@^0.3.30:
version "0.3.38" version "0.3.38"
resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.3.38.tgz#b8adbe9efc1dc11f3cc5ff0b07e0233a0fdf533d" resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.3.38.tgz#b8adbe9efc1dc11f3cc5ff0b07e0233a0fdf533d"