GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'mermaid-js-develop' into develop

Browse Source
This commit is contained in:
chris moran 2020-07-26 08:59:22 -04:00
commit 108a50f3bb
No known key found for this signature in database
GPG Key ID: 7E303019E6BB02D7
19 changed files with 8271 additions and 25332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
cypress/integration/rendering/flowchart.spec.js
View File

@ -685,4 +685,13 @@ describe('Flowchart', () => {
{ flowchart: { diagramPadding: 0 } }
);
});
it('34: testing the label width in percy', () => {
imgSnapshotTest(
`graph TD
A[Christmas]
`,
{ }
);
});
});

3058
dist/mermaid.core.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

30105
dist/mermaid.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

27
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

30
docs/8.6.0_docs.md
View File

@ -6,9 +6,14 @@
## [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.
With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
the init directive is the main method of configuration for Site and Current Levels.
`directives` allow for a diagram specific overriding of `config`, as it has been discussed in [Configurations](./Setup.md).
This allows site users to input modifications to `config` alongside diagram definitions, when creating diagrams on a private webpage that supports mermaid.
**A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**
the `init` directive is the main method of configuration for Site and Current Levels.
The three levels of are Configuration, Global, Site and Current.
@ -35,19 +40,19 @@ The modifiable parts of the Configuration are limited by the secure array, which
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.
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.
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”.
The Two types of directives: are `init` or `initialize` and `wrap`.
**Notes**: All directives are enclosed in %%{ }%%.
**Notes**: All directives are enclosed in `%%{ }%%.`
Older versions of mermaid will not parse directives because %% will comment out the directive.
Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backward compatible.
# 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.
`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|
| --- | --- | --- | --- | --- |
@ -55,17 +60,18 @@ init, or initialize: the init or initialize directive gives the user the ability
**Notes:**
init would be an argument-directive: %%{init: { **insert argument here**}}%%
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 }}%%
`%%{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
@ -75,7 +81,7 @@ When deployed within code, init is called before the graph/diagram description.
e-->f
f-->g
g-->
```
# Wrap
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
@ -89,7 +95,7 @@ wrap respects manually added <br\> so if the user wants to break up their text,
It is a non-argument directive and can be executed thusly:
%%{wrap}%%.
`%%{wrap}%%` .
**an example of text wrapping in a sequence diagram**:

2
docs/README.md
View File

@ -37,7 +37,7 @@ You can also watch some popular mermaid tutorials on the [mermaid Overview](./n0
## [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 Configuration Protocols in version 8.6.0](./8.6.0_docs.md)
## New diagrams in 8.5

35
docs/Setup.md
View File

@ -13,7 +13,7 @@ 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]].**
**Configuration methods in Mermaid version 8.6.0 have been updated to include `directives`, to learn more\[[click here][2]].**
## **What follows are config instructions for older versions**
@ -48,6 +48,31 @@ mermaid.initialize({
A summary of all options and their defaults is found [here][3]. A description of each option follows below.
| Parameter | Description | Type | Required | Values |
| ---------- | ------------------------------------------------------ | ------ | -------- | ----------------------------- |
| config | current mermaid configurations | Object | Required | All parameters and values, except where prohibited by `secure`. |
**Notes:**
**config here is an object that can be created either through `const` or `var` and is loaded by `mermaidAPI.initialize`.
config, can be overriden using the `%%init%%` directive, after [Version 8.6.0](./8.6.0_docs.md) was introduced.
## secure
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 `secure` keys in the current currentConfig. This prevents malicious graph directives from
overriding a site's default security.
| Parameter | Description |Type | Required | Values|
| --- | --- | --- | --- | --- |
| secure | Array of parameters that cannot be changed the `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.
## theme
theme , the CSS style sheet
@ -118,13 +143,6 @@ theme , the CSS style sheet
**Default value: false**.
## secure
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 `secure` keys in the current currentConfig. This prevents malicious graph directives from
overriding a site's default security.
## flowchart
The object containing configurations specific for flowcharts
@ -839,7 +857,6 @@ Sets the siteConfig. The siteConfig is a protected configuration for repeat use.
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

1
docs/_sidebar.md
View File

@ -3,6 +3,7 @@
- [mermaid](README.md)
- [FAQ](faq.md)
- [Usage](usage.md)
- [Integrations](integrations.md)
- [Examples](examples.md)
- [mermaid CLI](mermaidCLI.md)

10
docs/examples.md
View File

@ -1,3 +1,13 @@
# Examples
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md)
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) section.
## Basic Pie Chart
```

1
docs/integrations.md
View File

@ -1,4 +1,5 @@
# Integrations
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-gettingStarted.md)
The following is a list of different integrations and plugins where mermaid is being used

139
docs/n00b-gettingStarted.md
View File

@ -1,19 +1,23 @@
# A basic mermaid User-Guide for Beginners
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-gettingStarted.md)
Creating diagrams and charts using mermaid code is simple.
The code is turned into a diagram in the web page with the use of a mermaid renderer.
But how is the code turned into a diagram in a web page? This is done with the use of a mermaid renderer.
The mermaid renderer is a piece of javascript that parses mermaid definitions, when called.
This then renders a diagram based on that code in SVG, alternatively it
The mermaid renderer is very accessible, in essence it is a piece of javascript that can be called.
Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.
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 four relatively easy ways you can use mermaid:
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
2. Using one of the many [mermaid plugins](https://mermaid-js.github.io/mermaid/#/integrations).
3. Hosting mermaid on a webpage, with an absolute link.
4. Downloading mermaid and hosting it on your Web Page.
## 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 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.
**Notes**: More in depth information can be found on [Usage](./usage.md).
.
# Following any of these examples, you can get started with creating your own diagrams using mermaid code.
## 1. The mermaid live editor:
@ -21,12 +25,15 @@ Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Inter
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
**This is a great way to learn how to define a mermaid diagram.**
For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
![Flowchart](./img/n00b-liveEditor.png)
**Notes:**
You can also copy the code from the code section and paste it into either a mermaid plugin or in inside an html file, which will be taught in numbers 2 and 3.
It is also an easier way to develop diagrams. You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
![Flowchart](./img/liveEditorOptions.png)
@ -40,7 +47,7 @@ Thanks to the growing popularity of mermaid, many plugins already exist which in
One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
When the mermaid plugin is installed on a Confluence server, one can insert a mermaid object into any Confluence page.
# Here is a step by step process for using the mermaid-Confluence plugin:
### Here is a step by step process for using the mermaid-Confluence plugin:
---
@ -67,17 +74,18 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me
![Flowchart](./img/n00b-Confluence4.png)
---
## The following are two ways of hosting mermaid on a webpage.
**This is covered in greater detail in the [Usage section](https://mermaid-js.github.io/mermaid/#/usage)**
## 3. mermaid using any web server (or just a browser):
## 3. Using the Mermaid API: The quick and dirty way of deploying mermaid
This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite.
We do not need to install anything on the server, apart from a program (like Notepad++) that can generate an html file, which is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer).
So if you want to really simplify things when testing this out, don't use a web server at all but just create the file locally and drag it into your browser window. It is the browser which does all the work of rendering mermaid!
So if you want to really simplify things when testing this out, don't use a web server at all but just create an HTML file locally and drag it into your browser window. The browser will do the work of rendering the mermaid diagrams according to the descriptions you've given!
# Here are instructions for creating an html file with mermaid code:
# Note that all this is written in the html `<body>` section of the web page.
### Note that all this is written in the html `<body>` section of the web page.
When writing the html file, we give the web browser three instructions inside the html code:
@ -85,23 +93,22 @@ a. A reference for fetching the online mermaid renderer, which is written in Jav
b. The mermaid code for the diagram we want to create.
c. The `mermaid.initialize()` command to start the rendering process.
c. The `mermaid.initialize()` API call to start the rendering process.
## This is what needs to go into the html file (and all of them are important), for the mermaidAPI to render the diagrams:
This is what needs to go into the html file:
# a. The reference to the mermaid renderer has to be contained in a `<script src>` tag like so:
### a. A reference to the address of the `mermaid.js` or the `mermaid.min.js` file has to be contained in a `<script src>` tag like so:
```
<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/dist/mermaid.min.js"></script>
</body>
```
# b. The embedded mermaid code is similarly placed inside a `<div>` tag:
### b. The embedded mermaid diagram definition needs to be contains inside a `<div>` tag that signifies that it is a mermaid diagram:
```
<body>
@ -114,23 +121,27 @@ This is what needs to go into the html file:
</div>
</body>
```
(take note that every mermaid chart/graph/diagram, has to have separate `<div>` tags.)
**Notes**: every mermaid chart/graph/diagram definition, has to have separate `<div>` tags.
# c. When initializing mermaid using `mermaid.initialize()`, mermaid takes all the `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. This is done like so:
### c. The `mermaid.initialize()` API call
`mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. It is called this way:
```
<body>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
```
**Notes**: It is good practice to keep the `mermaid.initialize()` API call right next the `mermaid.min.js` `script` tag.
`startOnLoad` is a parameter that can optionally be changed to false, this would then prevent mermaid from immediately rendering upon loading.
### If the three steps mentioned are followed you will end up with something like this:
# *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.6.0/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
Here is one mermaid diagram:
@ -151,16 +162,80 @@ This is what needs to go into the html file:
</body>
</html>
```
# 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!
**Notes**: This has to be saved in an `HTML` file and opened with a browser.
---
## 4. Calling mermaid from a relative link.
This method is similar to 3, if only a little more involved. The difference may be very subtle even, but it offers its own advantages, mainly in speed.
1. install node v10 or 12, which would have npm
2. download yarn using npm by entering the command below:
npm install -g yarn
3. After yarn installs, enter the following command:
yarn add mermaid
4. After downloading mermaid, you can then open the mermaid file you’ve downloaded and go to the `dist` folder.
5. Find the `mermaid.min.js` file,
a. select the file.
b. press the shift key and right click on it
c. select copy as path from the options.
6. Paste it within the `script` tag as the `src`.
```
<script src="Paste the mermaid.min.js file address here"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
```
7. It should look something like this
```
<script src="C:\Users\myPC\mermaid\dist\mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
```
8. Add the graph and diagram definitions as you would in number 3.
a. be mindful of the `div` tags.
9. Save, load/edit your HTML file to your liking.
**Note** placing the HTML file on the same folder the `mermaid` file you've downloaded is a good practice and allows you to shorten the address on the `src` section.
**As seen here, in this full example:**
```
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="mermaid">
graph LR
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>
<script src="C:\Users\MyPC\mermaid\dist\mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>
```
**Three additional 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. Nowdays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
- We initialize the mermaid rendering with `mermaid.initialize()` directly in the html code. In principle this could be done through placing `mermaid.initialize()` inside of `mermaid.min.js`. We would then eliminate the need for this explicit line in the html. However, there are use cases where we do want to separate the two steps. Sometimes we want full control over when we start looking for `<div>`tags inside the web page with `mermaid.initialize()`, for example when we think that all `<div>` tags may not have been loaded by the time `mermaid.min.js` runs.
- In the example above, `mermaid.min.js` is called using an absolute path. Even worse, the example includes the mermaid version number which of course will change as time goes by. However, the example makes it easy to understand what is going on - even though it is perhaps doomed in a way we do not want in a production environment. When going from testing mermaid out to getting serious with it, I would suggest one of the following approaches for calling `mermaid.min.js`:
- In the third method, `mermaid.min.js` is called using an absolute path. Even worse, the example includes the mermaid version number which of course will change as time goes by. However, the example makes it easy to understand what is going on - even though it is perhaps doomed in a way we do not want in a production environment. When going from testing mermaid out to getting serious with it, I would suggest one of the following approaches for calling `mermaid.min.js`:
1. If you do not enter a specific version, you automatically get the latest one.
2. If you really need a specific version, hard code it (this is rare but it happens).

24
docs/theming.md Normal file
View File

@ -0,0 +1,24 @@
# Theming
Mermaid as a system for theming in place. With it a site integrator can override a vast majority of attributes used when rendering a diagram.
The settings for a thime can be set globally for the site with the initialize call. The example below highlights how that can look:
```
// example
```
It is also possible to override theme settings locally in a diagram using directives.
```
// example
```
The easiest way to make a custom theme is to start with the base theme, the theme named base and just modify these three variables:
* primaryColor - the base color for the theme
* secondaryColor - A compliment color to the primary color. This color is made lighter and used as background in subgraphs for instance
More specific color variables it is åpossible to change:
* lineColor
* textColor

127
docs/usage.md
View File

@ -1,21 +1,9 @@
# Usage
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
## Installation
mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
### npm package
```
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
```
mermaid was made to 0help Documentation catch up with Development, in quickly changing projects.
### CDN
@ -23,30 +11,45 @@ https://unpkg.com/mermaid/
Please note that you can switch versions through the dropdown box at the top right.
## Using mermaid
## Simple usage on a web page
For the majority of beginners, using the live editor or suppoting mermaid on a webpage would cover their uses for mermaid.
The easiest way to integrate mermaid on a web page requires two elements:
1. Inclusion of the mermaid framework in the html page using a script tag
2. A graph definition on the web page
## Installing and Hosting mermaid on a webpage
If these things are in place mermaid listens to the page load event and when fired (when the page has loaded) it will
locate the graphs on the page and transform them to svg files.
### Using the npm package
### Include mermaid on your web page:
```
1.You will need to insall node v10 or 12, which would have npm.
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
2. download yarn using npm.
3. enter the following command:
yarn add mermaid
4. At this point, you can add mermaid as a dev dependency using this command:
yarn add --dev mermaid
5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions.
as is shown in the example below
```
Further down 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 the svg chart.
## Hosting mermaid on a web page.
**Notes**: This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
### Define a chart like thi:
The easiest way to integrate mermaid on a web page requires three elements:
```html
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
`<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>`
2. The `mermaidAPI` call, in a separate `script` tag. Example:
`<script>mermaid.initialize({startOnLoad:true});</script>`
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```
<div class="mermaid">
graph LR
A --- B
@ -55,15 +58,8 @@ read the chart definiton and replace it with the svg chart.
</div>
```
Would end up like this:
```html
<div class="mermaid" id="mermaidChart0">
<svg>
Chart ends up here
</svg>
</div>
```
**If these things are in place mermaid starts at the page load event and when fired (when the page has loaded) it will
locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and transform them to svg charts or diagrams.**
## Simple full example:
@ -80,50 +76,47 @@ Would end up like this:
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.6.0/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>
```
## Try it out, save this code as HTML and load it.
### To enable click event and tags in nodes
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.
* **true**: (default) tags in text are encoded, click functionality is disabled
* false: tags in text are allowed, click functionality is enabled
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed.
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
```
## Notes:
An id attribute is also added to mermaid tags without one.
Mermaid can load multiple diagrams, in the same page.
## To enable click event and tags in nodes:
### Try it out, save this code as HTML and load it using any browser.(Please don't use Internet Explorer though.)
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.
* **true**: (default) tags in text are encoded, click functionality is disabled
* false: tags in text are allowed, click functionality is enabled
## To enable click event and tags in nodes
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
## securityLevel
If your application is taking resposibility for the diagram source security you can set the `securityLevel` accordingly. By doing this clicks and tags are again allowed.
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
\*\*Notes:
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **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
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are again allowed.
## To chage `securityLevel` with `mermaidAPI.initialize`:
```javascript
mermaidAPI.initialize({
securityLevel: 'loose'
});
```
@ -154,6 +147,7 @@ If your page has other fonts in its body those might be used instead of the merm
font-family: 'trebuchet ms', verdana, arial;
}
```
# This likely requires a `script.js` file, separate from the `HTML`.
### Calling `mermaid.init`
@ -384,6 +378,7 @@ mermaid_config.startOnLoad = true;
## Using the mermaid.init call
#
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are:

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.6.2",
"version": "8.6.3",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [

19
src/themes/theme-base.js
View File

@ -3,17 +3,18 @@ import { darken, lighten, adjust } from 'khroma';
class Theme {
constructor() {
/* Base variables */
this.primaryColor = '#039fbe';
this.primaryColor = '#9f33be';
this.secondaryColor = '#b20238';
this.tertiaryColor = lighten('#e8d21d', 30);
this.tertiaryColor = lighten(this.primaryColor, 30);
this.relationColor = '#000';
this.primaryColor = '#fa255e';
this.secondaryColor = '#c39ea0';
this.tertiaryColor = '#f8e5e5';
this.primaryColor = '#ECECFF';
this.secondaryColor = '#ffffde';
this.tertiaryColor = '#ffffde';
// this.primaryColor = '#fa255e';
// this.secondaryColor = '#c39ea0';
// this.tertiaryColor = '#f8e5e5';
// this.primaryColor = '#ECECFF';
// this.secondaryColor = '#ffffde';
// this.tertiaryColor = '#ffffde';
this.background = 'white';
this.lineColor = '#333333';
@ -36,7 +37,7 @@ class Theme {
this.mainBkg = this.primaryColor;
this.nodeBorder = darken(this.primaryColor, 23); // border 1
this.clusterBkg = this.tertiaryColor;
this.clusterBorder = darken(this.tertiaryColor, 10);
this.clusterBorder = darken(this.tertiaryColor, 30);
this.defaultLinkColor = this.lineColor;
this.titleColor = this.textColor;
this.edgeLabelBackground = this.labelBackground;

8
yarn.lock
View File

@ -2890,14 +2890,6 @@ color@3.0.x:
color-convert "^1.9.1"
color-string "^1.5.2"
color@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
dependencies:
color-convert "^1.9.1"
color-string "^1.5.2"
colornames@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"