Merge from master with doc updates
This commit is contained in:
Knut Sveidqvist
commit
da8e75f98a
|
|
@ -39,11 +39,19 @@ sequenceDiagram
|
|||
Bob->>Alice: I'm short though
|
||||
</div>
|
||||
<div class="mermaid" style="width: 50%; height: 200px;">
|
||||
%%{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 ! </div>
|
||||
%%{init: {'securityLevel': 'loose'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
click A "index.html#link-clicked" "link test"
|
||||
click B callback "click test"
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px;">
|
||||
|
||||
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');}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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:**
|
||||
* <pre>
|
||||
|
|
@ -863,7 +866,7 @@ __webpack_require__.r(__webpack_exports__);
|
|||
* mermaid.initialize(config);
|
||||
* </script>
|
||||
* </pre>
|
||||
* 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".
|
||||
* <pre>
|
||||
* "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.
|
||||
|
|
|
|||
|
|
@ -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:**
|
||||
* <pre>
|
||||
|
|
@ -46646,7 +46649,7 @@ __webpack_require__.r(__webpack_exports__);
|
|||
* mermaid.initialize(config);
|
||||
* </script>
|
||||
* </pre>
|
||||
* 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".
|
||||
* <pre>
|
||||
* "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.
|
||||
|
|
|
|||
|
|
@ -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 <br\> so if the user wants to break up their text, they have full control over those breaks by adding their own <br\> 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).
|
||||
116
docs/README.md
116
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@<version>/dist/
|
||||
```
|
||||
|
||||
Replace `<version>` with expected version number.
|
||||
To select a version:
|
||||
|
||||
Example: https://unpkg.com/mermaid@7.1.0/dist/
|
||||
Replace `<version>` 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
|
||||
<script src="https://unpkg.com/mermaid/"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
|
||||
## 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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</pre>
|
||||
|
||||
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".
|
||||
|
||||
<pre>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
# Flowcharts - Basic Syntax
|
||||
|
||||
**Edit this Page** [](./flowchart.md)
|
||||
## Graph
|
||||
|
||||
This statement declares the direction of the Flowchart.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
|
|
@ -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:
|
||||
|
||||
```
|
||||
<html>
|
||||
<body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.0/dist/mermaid.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
|
||||
Here is one mermaid diagram:
|
||||
|
|
@ -150,7 +151,7 @@ This is what needs to go into the html file:
|
|||
</body>
|
||||
</html>
|
||||
```
|
||||
# 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!
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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:**
|
||||
* <pre>
|
||||
|
|
@ -28,7 +31,7 @@ import { logger } from './logger';
|
|||
* mermaid.initialize(config);
|
||||
* </script>
|
||||
* </pre>
|
||||
* 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".
|
||||
* <pre>
|
||||
* "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()) => {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue