- %%{init: {'config': {'wrap': true }}}%%
- sequenceDiagram
- participant A as Extremely utterly
- A->>Bob: long line of longness which had preivously overflown the actor box as it is much longer than what it should be
- Bob-->A: Pasten !
+ %%{init: {'securityLevel': 'loose'}}%%
+ graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{{Let me think...
flowchart BT
@@ -80,13 +88,13 @@ stateDiagram-v2
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
- flowchart: { curve: 'linear', "htmlLabels": false },
+ flowchart: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
- curve: 'linear',
- securityLevel: 'loose'
+ curve: 'cardinal',
+ securityLevel: 'strict'
});
function callback(){alert('It worked');}
diff --git a/dist/mermaid.core.js b/dist/mermaid.core.js
index 1e60b6d4f..c66584795 100644
--- a/dist/mermaid.core.js
+++ b/dist/mermaid.core.js
@@ -837,6 +837,9 @@ __webpack_require__.r(__webpack_exports__);
/**
+ * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
+ *
+ * ## **What follows are config instructions for older versions**
* These are the default options which can be overridden with the initialization call like so:
* **Example 1:**
*
@@ -863,7 +866,7 @@ __webpack_require__.r(__webpack_exports__);
* mermaid.initialize(config);
* </script>
*
- * A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults). A description of each option follows below.
+ * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). A description of each option follows below.
*
* @name Configuration
*/
@@ -872,9 +875,11 @@ var config = {
/** theme , the CSS style sheet
*
* theme , the CSS style sheet
+ *
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|
+ *
***Notes:**To disable any pre-defined mermaid theme, use "null".
*
* "theme": "forest",
@@ -21538,7 +21543,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
/**
* This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
*
- * The core of this api is the [**render**](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render) function which, given a graph
+ * The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
* definition as text, renders the graph/diagram and returns an svg element for the graph.
*
* It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
diff --git a/dist/mermaid.js b/dist/mermaid.js
index 34c2b72b3..408cc56a2 100644
--- a/dist/mermaid.js
+++ b/dist/mermaid.js
@@ -46620,6 +46620,9 @@ __webpack_require__.r(__webpack_exports__);
/**
+ * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
+ *
+ * ## **What follows are config instructions for older versions**
* These are the default options which can be overridden with the initialization call like so:
* **Example 1:**
*
@@ -46646,7 +46649,7 @@ __webpack_require__.r(__webpack_exports__);
* mermaid.initialize(config);
* </script>
*
- * A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults). A description of each option follows below.
+ * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). A description of each option follows below.
*
* @name Configuration
*/
@@ -46655,9 +46658,11 @@ var config = {
/** theme , the CSS style sheet
*
* theme , the CSS style sheet
+ *
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|
+ *
***Notes:**To disable any pre-defined mermaid theme, use "null".
*
* "theme": "forest",
@@ -67296,7 +67301,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
/**
* This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
*
- * The core of this api is the [**render**](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render) function which, given a graph
+ * The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
* definition as text, renders the graph/diagram and returns an svg element for the graph.
*
* It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md
new file mode 100644
index 000000000..5918964ab
--- /dev/null
+++ b/docs/8.6.0_docs.md
@@ -0,0 +1,196 @@
+# Version 8.6.0 Changes
+
+**Edit this Page** [](./8.6.0_docs.md)
+
+## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
+
+## [CDN](https://unpkg.com/mermaid/)
+
+With version 8.6.0 comes the release of directives for mermaid and a new system for configurations, with the aim of establishing centralized, sane defaults and simple implementation.
+
+the init directive is the main method of configuration for Site and Current Levels.
+
+The three levels of are Configuration, Global, Site and Current.
+
+| Level of Configuration | Description |
+| --- | --- |
+| Global Configuration| Default Mermaid Configurations|
+| Site Configuration| Configurations made by site owner|
+| Current Configuration| Configurations made by Implementors|
+
+
+# Limits to Modifying Configurations
+secure Array
+
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| secure | Array of parameters excluded from init directive| Array | Required | Any parameters|
+
+The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
+
+**Notes**: secure arrays work like nesting dolls, with the Global Configurations’ secure array being the default and immutable list of immutable parameters, or the smallest doll, to which site owners may add to, but implementors may not modify it.
+
+# Secure Arrays
+
+Site owners can add to the **secure** array using this command:
+mermaidAPI.initialize( { startOnLoad: true, secure: ['parameter1', 'parameter2'] } );
+
+default values for the **secure array** consists of: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']. These default values are immutable.
+
+Implementors can only modify configurations using directives, but cannot change the **secure** array.
+
+# Modifying Configurations and directives:
+The Two types of directives: are “init” or “initialize” and “wrap”.
+
+**Notes**: All directives are enclosed in %%{ }%%.
+
+Older versions of mermaid will not parse directives because %% will comment out the directive.
+
+# Init
+init, or initialize: the init or initialize directive gives the user the ability to overwrite and change the values for configuration parameters, with respect to the secure array that is in effect.
+
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
+
+**Notes:**
+
+init would be an argument-directive: %%{init: { **insert argument here**}}%%
+
+The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
+ **for example**:
+
+%%{init: {"theme": default, "logLevel": 1 }}%%
+
+Configurations that are passed through init cannot change the parameters in secure arrays of higher levels. In the event of a conflict, mermaid will give priority to secure arrays and parse the request, without changing the values of the parameters in conflict.
+
+When deployed within code, init is called before the graph/diagram description.
+**for example**:
+ %%{init: {"theme": "default", "logLevel": 1 }}%%
+ graph LR
+ a-->b
+ b-->c
+ c-->d
+ d-->e
+ e-->f
+ f-->g
+ g-->
+
+# Wrap
+| Parameter | Description |Type | Required | Values|
+| --- | --- | --- | --- | --- |
+| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
+
+**Notes:**
+
+Wrap is a function that is currently only deployable for sequence diagrams.
+
+wrap respects manually added so if the user wants to break up their text, they have full control over those breaks by adding their own tags.
+
+It is a non-argument directive and can be executed thusly:
+
+%%{wrap}%%.
+
+**an example of text wrapping in a sequence diagram**:
+
+
+
+
+# Resetting Configurations:
+There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.
+
+**reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes to the last mermaidAPI.initialize({...}) configuration.
+
+**globalReset** will reset both the current configuration AND the site configuration back to the global defaults.
+
+**Notes**: both reset and globalReset are only available to site owners, as such implementors would have to edit their configs with init.
+
+# Additional Utils to mermaid
+• **memoize**: simple caching for computationally expensive functions. It reduces the rendering time for computationally intensive diagrams by about 90%.
+
+• **assignWithDepth** - this is 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 **object.Assign**:
+
+
+
+• **calculateTextDimensions, calculateTextWidth,** and **calculateTextHeight** - for measuring text dimensions, width and height.
+
+**Notes**:For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.
+
+
+# New API Requests Introduced in Version 8.6.0
+
+## setSiteConfig
+
+ | Function | Description | Type | Values |Parameters|Returns|
+ | --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
+ | setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig|
+
+ **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) will reset siteConfig and currentConfig
+ to the defaultConfig
+ Note: currentConfig is set in this function
+ Default value: At default, will mirror Global Config**
+
+
+ ## getSiteConfig
+ | Function | Description | Type | Values |
+ | --------- | ------------------- | ------- | ------------------ |
+ | setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|
+
+ **Notes :
+ Returns any values in siteConfig.**
+
+
+ ## setConfig
+ | Function | Description | Type | Values |Parameters|Returns|
+ | --------- | ------------------- | ------- | ------------------ |----------|-------|
+ | setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, those in secure array|conf|currentConfig merged with the sanitized conf|
+
+
+ **Notes :
+ Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
+ values found in conf with key found in siteConfig.secure will be replaced with the corresponding
+ siteConfig value.**
+
+
+
+ ## getConfig
+ | Function | Description | Type | Return Values |
+ | --------- | ------------------- | ------- | ------------------ |
+ | getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
+
+ **Notes :
+ Returns any values in currentConfig.**
+
+
+ ## sanitize
+ | Function | Description | Type | Values |
+ | --------- | ------------------- | ------- | ------------------ |
+ | sanitize |Sets the siteConfig to desired values. | Put Request(?) |None|
+
+ **Note: modifies options in-place
+ Ensures options parameter does not attempt to override siteConfig secure keys.**
+
+ ## reset
+
+ | Function | Description | Type | Required | Values |Parameter|
+ | --------- | -------------------| ------- | -------- | ------------------ |---------|
+ | reset|Resets currentConfig to conf| Put Request | Required | None| conf|
+
+ ## conf
+ | Parameter | Description |Type | Required | Values|
+ | --- | --- | --- | --- | --- |
+ | conf| base set of values, which currentConfig coul be reset to.| Dictionary | Required | Any Values, with respect to the secure Array|
+
+ **Notes :
+ default: current siteConfig (optional, default `getSiteConfig()`)**
+
+ ## For more information, read [Setup](https://mermaid-js.github.io/mermaid/#/Setup).
diff --git a/docs/README.md b/docs/README.md
index 48b5f0727..6c4ae2c4d 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -5,17 +5,41 @@
[](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+**Edit this Page** [](./README.md)
-Generation of diagrams and flowcharts from text in a similar manner as markdown.
-
-Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
-
-This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
-
-Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
**Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
+
+
+Mermaid is a tool that generates diagrams and charts, from markdown-inspired text definitions
+
+This allows for simplified generation and updating of even the most complex diagrams and charts, while avoiding time-damanding and heavy tools like visio.
+
+mermaid, is a simple markdown-inspired script language for generating charts from text-definitions, via javascript. As such, using it cuts the times it takes to create, modify and render diagrams.
+
+Even non-programmers can create diagrams through the [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor).
+
+For a more detailed introduction to mermaid, look to the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-overview) section.
+
+You should also Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
+
+You can also watch some popular mermaid tutorials.
+
+## [CDN](https://unpkg.com/mermaid/)
+
+## [Documentation](https://mermaidjs.github.io)
+
+## [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
+
+
+# New in Version 8.6.0
+
+## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
+
+## [New Configuration Protocols in version 8.6.0](https://github.com/NeilCuzon/mermaid/edit/develop/docs/8.6.0_docs.md)
+
+
## New diagrams in 8.5
With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity relationship diagrams.
@@ -24,10 +48,19 @@ With version 8.5 there are some bug fixes and enhancements, plus a new diagram t
## Special note regarding version 8.2
-In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced which sets the level of trust to be used on the parsed diagrams.
+In version 8.2 a security improvement was introduced. A **securityLevel** configuration was introduced which sets the level of trust to be used on the parsed diagrams.
+
+## securityLevel
+
+| Parameter | Description | Type | Required | Values |
+| ------------- | --------------------------------- | ------ | -------- | ------------- |
+| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose |
+
+\*\*Notes:
+
+- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
+- **loose**: tags in text are allowed, click functionality is enabled
-- **true**: (default) tags in text are encoded, click functionality is disabled
-- false: tags in text are allowed, click functionality is enabled
Closed issues:
@@ -43,9 +76,9 @@ mermaidAPI.initialize({
**🖖 Keep a steady pulse: mermaid needs more Collaborators [#866](https://github.com/knsv/mermaid/issues/866)**
-## Diagrams
+# Diagrams that mermaid can render:
-### Flowchart
+### [Flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
```
graph TD;
@@ -57,7 +90,7 @@ graph TD;
-### Sequence diagram
+### [Sequence diagram](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
```
sequenceDiagram
@@ -75,7 +108,7 @@ sequenceDiagram
-### Gantt diagram
+### [Gantt diagram](https://mermaid-js.github.io/mermaid/#/gantt)
```
gantt
@@ -92,7 +125,7 @@ Future task2 : des4, after des3, 5d
-### Class diagram - :exclamation: experimental
+### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/classDiagram)
```
classDiagram
@@ -134,10 +167,9 @@ commit
merge newbranch
```
-
-### Entity Relationship Diagram - :exclamation: experimental
+### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram)
```
erDiagram
@@ -149,6 +181,21 @@ erDiagram
+### [User Journey Diagram](https://mermaid-js.github.io/mermaid/#/user-journey)
+
+```markdown
+journey
+ title My working day
+ section Go to work
+ Make tea: 5: Me
+ Go upstairs: 3: Me
+ Do work: 1: Me, Cat
+ section Go home
+ Go downstairs: 5: Me
+ Sit down: 5: Me
+```
+
+
## Installation
### CDN
@@ -157,24 +204,43 @@ erDiagram
https://unpkg.com/mermaid@/dist/
```
-Replace `` with expected version number.
+To select a version:
-Example: https://unpkg.com/mermaid@7.1.0/dist/
+Replace `` with the desired version number.
-### Node.js
+Alternatively, you can also adjust the version number in the page itself.
+
+Latest Version: https://unpkg.com/browse/mermaid@8.6.0/
+
+## Incorporating mermaid to a website
+to support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
```
-yarn add mermaid
+1.You will need to isntall node v10 or 12, which would have npm
+
+2. download yarn using npm.
+
+2. enter the following command:
+ yarn add mermaid
+
+3. You can then add mermaid as a dev dependency using this command:
+ yarn add --dev mermaid
+
```
-## Documentation
+## To install mermaid without a bundler, one can use the script tag like so:
-https://mermaidjs.github.io
+
+
+
+## it can then be followed by the diagram definitions as could be found in the [examples in the documentation](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
+
+
+## On your page mermaid will look for tags with class="mermaid". From these tags mermaid will try to read the chart definiton and replace it with an svg chart.
## Sibling projects
-
-- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
- [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor)
+- [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
- [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo)
- [mermaid Parcel demo](https://github.com/mermaidjs/mermaid-parcel-demo)
diff --git a/docs/Setup.md b/docs/Setup.md
index 3c5d4be71..a40d27c32 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -13,6 +13,10 @@ In addition to the render function, a number of behavioral configuration options
## Configuration
+**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click here][2]].**
+
+## **What follows are config instructions for older versions**
+
These are the default options which can be overridden with the initialization call like so:
**Example 1:**
@@ -42,16 +46,18 @@ mermaid.initialize({
</script>
-A summary of all options and their defaults is found [here][2]. A description of each option follows below.
+A summary of all options and their defaults is found [here][3]. A description of each option follows below.
## theme
theme , the CSS style sheet
theme , the CSS style sheet
-| Parameter | Description |Type | Required | Values|
-\| --- \| --- \| --- \| --- \| --- \|
-| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|
+
+| Parameter | Description | Type | Required | Values |
+| --------- | --------------- | ------ | -------- | ---------------------------------------------------- |
+| Theme | Built in Themes | String | Optional | Values include, default, forest, dark, neutral, null |
+
**Notes:**To disable any pre-defined mermaid theme, use "null".
@@ -822,11 +828,20 @@ mermaidAPI.initialize({
## setSiteConfig
+## setSiteConfig
+
+| Function | Description | Type | Values |
+| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
+| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
+
+**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) will reset siteConfig and currentConfig
to the defaultConfig
Note: currentConfig is set in this function
+\*Default value: At default, will mirror Global Config\*\*
+
### Parameters
- `conf` the base currentConfig to use as siteConfig
@@ -835,13 +850,27 @@ Returns **any** the siteConfig
## getSiteConfig
-Obtains the current siteConfig base configuration
+## getSiteConfig
+
+| Function | Description | Type | Values |
+| ------------- | ------------------------------------------------- | ----------- | --------------------------------- |
+| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
+
+**Notes**:
+Returns **any** values in siteConfig.
Returns **any**
## setConfig
-Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
+## setConfig
+
+| Function | Description | Type | Values |
+| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
+| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
+
+**Notes**:
+Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
values found in conf with key found in siteConfig.secure will be replaced with the corresponding
siteConfig value.
@@ -853,12 +882,25 @@ Returns **any** the currentConfig merged with the sanitized conf
## getConfig
-Obtains the currentConfig
+## getConfig
+
+| Function | Description | Type | Return Values |
+| --------- | ------------------------- | ----------- | ----------------------------- |
+| getConfig | Obtains the currentConfig | Get Request | Any Values from currentConfig |
+
+**Notes**:
+Returns **any** the currentConfig
Returns **any** the currentConfig
## sanitize
+## sanitize
+
+| Function | Description | Type | Values |
+| -------- | -------------------------------------- | ----------- | ------ |
+| sanitize | Sets the siteConfig to desired values. | Put Request | None |
+
Ensures options parameter does not attempt to override siteConfig secure keys
Note: modifies options in-place
@@ -868,12 +910,25 @@ Note: modifies options in-place
## reset
-Resets this currentConfig to conf
+## reset
+
+| Function | Description | Type | Required | Values |
+| -------- | ---------------------------- | ----------- | -------- | ------ |
+| reset | Resets currentConfig to conf | Put Request | Required | None |
+
+| Parameter | Description | Type | Required | Values |
+| --------- | ------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
+| conf | base set of values, which currentConfig coul be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
+
+\*Notes :
+(default: current siteConfig ) (optional, default `getSiteConfig()`)
### Parameters
- `conf` the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
-[1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
+[1]: Setup.md?id=render
-[2]: https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults
+[2]: 8.6.0_docs.md
+
+[3]: #mermaidapi-configuration-defaults
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index eb27ad957..fb6c8ccf9 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -21,10 +21,10 @@
- Guide
- [Development](development.md)
- - [Setup](Setup.md)
+ - [Configurations](Setup.md)
- [Changelog](CHANGELOG.md)
-- I'm a n00b
+- Beginner's Guide
- [overview](n00b-overview.md)
- [Getting started - easier](n00b-gettingStarted.md)
- [Diagram syntax intro](n00b-syntaxReference.md)
diff --git a/docs/directives.md b/docs/directives.md
index 18fb04abf..e11f832be 100644
--- a/docs/directives.md
+++ b/docs/directives.md
@@ -1,4 +1,6 @@
-### Directives
+## Directives
+**Edit this Page** [](./directives.md)
+### Directives were added in [Version 8.6.0](/8.6.0_docs.md)
#### Init directives
@@ -54,4 +56,4 @@ Multiline directives, however, will pose an issue and will render an error. This
### Wrapping
-The `%%{wrap}%%` directive and the inline `wrap:` text hint have also been added for sequence diagrams. This has been explained in my previous comments and has not materially changed.
\ No newline at end of file
+The `%%{wrap}%%` directive and the inline `wrap:` text hint have also been added for sequence diagrams. This has been explained in my previous comments and has not materially changed.
diff --git a/docs/flowchart.md b/docs/flowchart.md
index 26b230ff1..e00fbe1ff 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -1,5 +1,6 @@
# Flowcharts - Basic Syntax
+**Edit this Page** [](./flowchart.md)
## Graph
This statement declares the direction of the Flowchart.
diff --git a/docs/gantt.md b/docs/gantt.md
index c031eaef4..171085a2b 100755
--- a/docs/gantt.md
+++ b/docs/gantt.md
@@ -1,5 +1,7 @@
# Gantt diagrams
+**Edit this Page** [](./gantt.md)
+
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
## A note to users
diff --git a/docs/img/GitHub-Mark-32px.png b/docs/img/GitHub-Mark-32px.png
new file mode 100644
index 000000000..8b25551a9
Binary files /dev/null and b/docs/img/GitHub-Mark-32px.png differ
diff --git a/docs/img/assignWithDepth.png b/docs/img/assignWithDepth.png
new file mode 100644
index 000000000..cc655cfbb
Binary files /dev/null and b/docs/img/assignWithDepth.png differ
diff --git a/docs/img/object.assign without depth.png b/docs/img/object.assign without depth.png
new file mode 100644
index 000000000..56f355521
Binary files /dev/null and b/docs/img/object.assign without depth.png differ
diff --git a/docs/img/user-journey.png b/docs/img/user-journey.png
new file mode 100644
index 000000000..825d467d8
Binary files /dev/null and b/docs/img/user-journey.png differ
diff --git a/docs/img/without wrap.png b/docs/img/without wrap.png
new file mode 100644
index 000000000..e81add7ea
Binary files /dev/null and b/docs/img/without wrap.png differ
diff --git a/docs/img/wrapped text.png b/docs/img/wrapped text.png
new file mode 100644
index 000000000..78b635584
Binary files /dev/null and b/docs/img/wrapped text.png differ
diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
index 484baefdd..594a4d00c 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -1,16 +1,16 @@
# A basic mermaid User-Guide for Beginners
-Creating diagrams and charts, using mermaid code is simple.
+Creating diagrams and charts using mermaid code is simple.
But how is the code turned into a diagram in a web page? This is done with the use of a mermaid renderer.
Thankfully the mermaid renderer is very accessible, in essence it is a piece of javascript that can be called.
-Most widely used web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
+Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot. The web browser also needs access to the online mermaid renderer which it downloads from https://cdn.jsdelivr.net/npm/mermaid
# For beginners, there are three relatively easy ways you can use mermaid:
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/)
-2. Using a mermaid plugin, such as that for Confluence or [Atom](https://atom.io/packages/atom-mermaid).
+2. Using one of the many mermaid plugins
3. Calling mermaid renderer with HTML, deployed in a friendly browser.
# Following either of these examples, you can get started with creating your own diagrams using mermaid code.
@@ -126,10 +126,11 @@ This is what needs to go into the html file:
# *Finally*
# If the three steps mentioned are followed you will end up with something like this:
+
```
-
+
Here is one mermaid diagram:
@@ -150,7 +151,7 @@ This is what needs to go into the html file:
```
-# Save this to a html file and fetch it with a browser from the web server (or just drag it into your web browser window) and voila!
+# Save this to an html file and open it with a browser from the web server (or just drag it into your web browser window) and voila!
---
diff --git a/docs/pie.md b/docs/pie.md
index 57d2a7b85..e361bf048 100644
--- a/docs/pie.md
+++ b/docs/pie.md
@@ -1,5 +1,7 @@
# Pie chart diagrams
+**Edit this Page** [](./pie.md)
+
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
-Wikipedia
diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md
index d41f11f0b..409a1b681 100755
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@@ -1,5 +1,7 @@
# Sequence diagrams
+**Edit this Page** [](./sequenceDiagram.md)
+
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Mermaid can render sequence diagrams.
diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md
index c593aa2b8..e1de656a6 100755
--- a/docs/stateDiagram.md
+++ b/docs/stateDiagram.md
@@ -1,5 +1,7 @@
# State diagrams
+**Edit this Page** [](./stateDiagram.md)
+
> "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
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
diff --git a/src/config.js b/src/config.js
index b8810e6e0..8d026aec3 100644
--- a/src/config.js
+++ b/src/config.js
@@ -2,6 +2,9 @@ import { assignWithDepth } from './utils';
import { logger } from './logger';
/**
+ * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
+ *
+ * ## **What follows are config instructions for older versions**
* These are the default options which can be overridden with the initialization call like so:
* **Example 1:**
*
@@ -28,7 +31,7 @@ import { logger } from './logger';
* mermaid.initialize(config);
* </script>
*
- * A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/Setup.md#mermaidapi-configuration-defaults). A description of each option follows below.
+ * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). A description of each option follows below.
*
* @name Configuration
*/
@@ -36,9 +39,11 @@ const config = {
/** theme , the CSS style sheet
*
* theme , the CSS style sheet
+ *
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|
+ *
***Notes:**To disable any pre-defined mermaid theme, use "null".
*
* "theme": "forest",
@@ -839,10 +844,19 @@ const siteConfig = assignWithDepth({}, defaultConfig);
const currentConfig = assignWithDepth({}, defaultConfig);
/**
- * Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
- * the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
- * to the defaultConfig
- * Note: currentConfig is set in this function
+ *## setSiteConfig
+
+ *| Function | Description | Type | Values |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|
+
+ ***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) will reset siteConfig and currentConfig
+ *to the defaultConfig
+ *Note: currentConfig is set in this function
+
+ **Default value: At default, will mirror Global Config**
* @param conf - the base currentConfig to use as siteConfig
* @returns {*} - the siteConfig
*/
@@ -852,16 +866,29 @@ export const setSiteConfig = conf => {
return getSiteConfig();
};
/**
- * Obtains the current siteConfig base configuration
+ *## getSiteConfig
+ *| Function | Description | Type | Values |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|
+
+ ***Notes**:
+ *Returns **any** values in siteConfig.
* @returns {*}
*/
export const getSiteConfig = () => {
return assignWithDepth({}, siteConfig);
};
/**
- * Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
- * values found in conf with key found in siteConfig.secure will be replaced with the corresponding
- * siteConfig value.
+ *## setConfig
+ *| Function | Description | Type | Values |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|
+
+
+ ***Notes**:
+ *Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
+ *values found in conf with key found in siteConfig.secure will be replaced with the corresponding
+ *siteConfig value.
* @param conf - the potential currentConfig
* @returns {*} - the currentConfig merged with the sanitized conf
*/
@@ -871,15 +898,26 @@ export const setConfig = conf => {
return getConfig();
};
/**
- * Obtains the currentConfig
+ * ## getConfig
+ *| Function | Description | Type | Return Values |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
+
+ ***Notes**:
+ *Returns **any** the currentConfig
* @returns {*} - the currentConfig
*/
export const getConfig = () => {
return assignWithDepth({}, currentConfig);
};
/**
- * Ensures options parameter does not attempt to override siteConfig secure keys
- * Note: modifies options in-place
+ *## sanitize
+ *| Function | Description | Type | Values |
+ *| --------- | ------------------- | ------- | ------------------ |
+ *| sanitize |Sets the siteConfig to desired values. | Put Request |None|
+
+ *Ensures options parameter does not attempt to override siteConfig secure keys
+ *Note: modifies options in-place
* @param options - the potential setConfig parameter
*/
export const sanitize = options => {
@@ -896,7 +934,18 @@ export const sanitize = options => {
});
};
/**
- * Resets this currentConfig to conf
+ *## reset
+
+ *| Function | Description | Type | Required | Values |
+ *| --------- | ------------------- | ------- | -------- | ------------------ |
+ *| reset|Resets currentConfig to conf| Put Request | Required | None|
+ *
+ *| Parameter | Description |Type | Required | Values|
+ *| --- | --- | --- | --- | --- |
+ *| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|
+ *
+ **Notes :
+ (default: current siteConfig ) (optional, default `getSiteConfig()`)
* @param conf - the base currentConfig to reset to (default: current siteConfig )
*/
export const reset = (conf = getSiteConfig()) => {
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 033bafdbb..60bd7fbec 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -1,7 +1,7 @@
/**
* This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
*
- * The core of this api is the [**render**](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render) function which, given a graph
+ * The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
* definition as text, renders the graph/diagram and returns an svg element for the graph.
*
* It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.