marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-26 18:59:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

merge develop to current branch

Browse Source
This commit is contained in:
Ashish Jain
2022-02-24 19:24:42 +01:00
parent 933efd0dda 286f6e52f0
commit 14464f9fba
45 changed files with 1197 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/README.md
View File

@@ -197,7 +197,8 @@ To Deploy Mermaid:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script>mermaid.initialize({startOnLoad:true});
</script>
```
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into svg charts.**
@@ -267,6 +268,15 @@ npm publish
The above command generates files into the `dist` folder and publishes them to npmjs.org.
## Security and safe diagrams
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
## Credits
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!

4
docs/Setup.md
View File

@@ -1057,6 +1057,10 @@ Returns **any**
- `conf` **any**
## reinitialize
To be removed
## initialize
### Parameters

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

@@ -255,7 +255,7 @@ graph TB
B --> D
```
### Beta: New arrow types
### New arrow types
When using flowchart instead of graph there are new types of arrows supported as per below:
@@ -266,7 +266,7 @@ flowchart LR
```
### Beta: Multi directional arrows
### Multi directional arrows
When using flowchart instead of graph there is the possibility to use multidirectional arrows.
@@ -377,9 +377,9 @@ graph TB
end
```
## Beta: flowcharts
## flowcharts
With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the graph below.
```mermaid-example
flowchart TB

65
docs/flowchart.md
View File

@@ -141,6 +141,13 @@ flowchart TD
B[\Go shopping/]
```
### Double circle
```mermaid-example
flowchart TD
id1(((This is the text in the circle)))
```
## Links between nodes
Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
@@ -281,11 +288,11 @@ to node _E_, so that it spans two more ranks than regular links:
```mermaid-example
flowchart TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
```
> **Note** Links may still be made longer than the requested number of ranks
@@ -297,11 +304,11 @@ the previous one:
```mermaid-example
flowchart TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
```
For dotted or thick links, the characters to add are equals signs or dots,
@@ -370,9 +377,9 @@ flowchart TB
end
```
## Beta: flowcharts
## flowcharts
With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the flowchart below.
With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
```mermaid-example
flowchart TB
@@ -437,10 +444,10 @@ Examples of tooltip usage below:
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.
```mermaid-example
flowchart LR;
A-->B;
B-->C;
C-->D;
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
@@ -453,11 +460,11 @@ flowchart LR;
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
```mermaid-example
flowchart LR;
A-->B;
B-->C;
C-->D;
D-->E;
flowchart LR
A-->B
B-->C
C-->D
D-->E
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
click C href "http://www.github.com" _blank
@@ -468,10 +475,10 @@ Beginners tip, a full example using interactive links in a html context:
```html
<body>
<div class="mermaid">
flowchart LR;
A-->B;
B-->C;
C-->D;
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C call callback() "Tooltip"
@@ -587,9 +594,9 @@ below:
```mermaid-example
flowchart LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
A-->B[AAA<span>BBB</span>]
B-->D
class A cssClass
```
@@ -613,7 +620,7 @@ flowchart TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
B-->E(A fa:fa-camera-retro perhaps?)
```

5
docs/pie.md
View File

@@ -16,13 +16,14 @@ pie title Pets adopted by volunteers
## Syntax
Drawing a pie chart is really simple in mermaid.
- Start with `pie` keyword to begin the diagram
- `showData` to render the actual data values after the legend text. This is ***OPTIONAL***
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
- Followed by dataSet
- `label` for a section in the pie diagram within `" "` quotes.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported upto two decimal places)
[pie]
[pie] [showData] (OPTIONAL)
[title] [titlevalue] (OPTIONAL)
"[datakey1]" : [dataValue1]
"[datakey2]" : [dataValue2]
@@ -32,7 +33,7 @@ Drawing a pie chart is really simple in mermaid.
## Example
```mermaid-example
pie
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05

26
docs/theming.md
View File

@@ -2,14 +2,27 @@
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)
With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of the diagram themes. The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of Styling for mermaid diagrams.
Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
## Deployable Themes
The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
1. **Base**- Designed to modified, as the name implies it is supposed to be used as the base for making custom themes.
2. **Forest**- A theme full of light greens that is easy on the eyes.
3. **Dark**- A theme that would go well with other dark colored elements.
4. **Default**- The default theme for all diagrams.
5. **Neutral**- The theme to be used for black and white printing
**These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, to maximize customizability.
## Site-wide Themes
Site-wide themes are still declared via `initialize` by site owners.
Site-wide themes are declared via `initialize` by site owners.
Example of `Initalize` call setting `theme` to `base`:
```javascript
@@ -49,8 +62,9 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
G
end
```
# List of Themes
# Making a Custom Theme with `themeVariables`
# Customizing Themes with `themeVariables`
The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
@@ -59,7 +73,7 @@ The easiest way to make a custom theme is to start with the base theme, and just
| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
## Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.
**Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**
```mermaid-example
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%

36
docs/usage.md
View File

@@ -50,7 +50,8 @@ The easiest way to integrate mermaid on a web page requires three elements:
2. The `mermaidAPI` call, in a separate `script` tag. Example:
```html
<script>mermaid.initialize({startOnLoad:true});</script>
<script>mermaid.initialize({startOnLoad:true});
</script>
```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
@@ -82,7 +83,8 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
B-->D(fa:fa-spinner);
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script>mermaid.initialize({startOnLoad:true});
</script>
</body>
</html>
```
@@ -105,17 +107,19 @@ Mermaid can load multiple diagrams, in the same page.
| Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securityLevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
| securityLevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript , sandbox|
Values:
- **strict**: (**default**) tags in text are encoded, click functionality is disabled
- **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
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any javascript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
```note
This changes the default behaviour of mermaid so that after upgrade to 8.2,unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
**sandbox** security level is still in the beta version.
```
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
@@ -203,20 +207,10 @@ The example below show an outline of how this could be used. The example just lo
<script src="mermaid.js"></script>
<script>
mermaid.mermaidAPI.initialize({
startOnLoad:false
});
$(function(){
// Example of using the API
var element = document.querySelector("#graphDiv");
var insertSvg = function(svgCode, bindFunctions){
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TB\na-->b';
var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
});
mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
</script>
```
@@ -345,13 +339,7 @@ on what kind of integration you use.
```html
<script src="../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad:true,
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } };
mermaid.initialize(config);
</script>
```