mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-25 02:09:50 +02:00
Add docs back
This commit is contained in:
Sidharth Vinod
222
docs/config/8.6.0_docs.md
Normal file
222
docs/config/8.6.0_docs.md
Normal file
@@ -0,0 +1,222 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/8.6.0_docs.md](../../packages/mermaid/src/docs/config/8.6.0_docs.md).
|
||||
|
||||
# Version 8.6.0 Changes
|
||||
|
||||
## [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, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.
|
||||
|
||||
`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](../config/configuration.md).
|
||||
This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](directives.md), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams.
|
||||
|
||||
**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.
|
||||
|
||||
| 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 holding 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, and cannot change the `secure` array.
|
||||
|
||||
# Modifying Configurations and directives:
|
||||
|
||||
The Two types of directives: are `init` (or `initialize`) and `wrap`.
|
||||
|
||||
> **Note**
|
||||
> All directives are enclosed in `%%{ }%%`
|
||||
|
||||
Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible.
|
||||
|
||||
# Init
|
||||
|
||||
`init`, or `initialize`: this directive gives the user the ability to overwrite and change the values for any configuration parameters not set in the secure array.
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
|
||||
| init | modifies configurations | Directive | Optional | Any parameters not included in the secure array |
|
||||
|
||||
> **Note**
|
||||
> 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 a secure array at a higher level. In the event of a collision, mermaid will give priority to secure arrays and parse the request without changing the values of those parameters in conflict.
|
||||
>
|
||||
> When deployed within code, init is called before the graph/diagram description.
|
||||
|
||||
**for example**:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {"theme": "default", "logLevel": 1 }}%%
|
||||
graph LR
|
||||
a-->b
|
||||
b-->c
|
||||
c-->d
|
||||
d-->e
|
||||
e-->f
|
||||
f-->g
|
||||
g-->
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{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}%% |
|
||||
|
||||
> **Note**
|
||||
> Wrap is a function that is currently only deployable for sequence diagrams.
|
||||
>
|
||||
> `Wrap respects a manually added <br>, so if the user wants to break up their text, they have full control over line breaks by adding <br> tags.`
|
||||
>
|
||||
> It is a non-argument directive and can be executed thusly:
|
||||
>
|
||||
> `%%{wrap}%%` .
|
||||
|
||||
**An example of text wrapping in a sequence diagram**:
|
||||
|
||||
!\[Image showing wrapped text]\(img/wrapped text.png)
|
||||
|
||||
# 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 set from 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, and as such implementors have to edit their configs using `init`.
|
||||
|
||||
# Additional Utils to mermaid
|
||||
|
||||
• **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%.
|
||||
|
||||
• **assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth.
|
||||
|
||||
Example of **assignWithDepth**:
|
||||
|
||||
|
||||
|
||||
Example of **object.Assign**:
|
||||
|
||||
!\[Image showing object.assign without depth]\(img/object.assign without depth.png)
|
||||
|
||||
• **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 |
|
||||
|
||||
> **Note**
|
||||
> 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: will mirror Global Config
|
||||
|
||||
## getSiteConfig
|
||||
|
||||
| Function | Description | Type | Values |
|
||||
| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
|
||||
| `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |
|
||||
|
||||
> **Note**
|
||||
> Returns any values in siteConfig.
|
||||
|
||||
## setConfig
|
||||
|
||||
| Function | Description | Type | Values | Parameters | Returns |
|
||||
| ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- |
|
||||
| `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf | `currentConfig` merged with the sanitized conf |
|
||||
|
||||
> **Note**
|
||||
> 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` |
|
||||
|
||||
> **Note**
|
||||
> 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` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array |
|
||||
|
||||
> **Note**
|
||||
> default: current siteConfig (optional, default `getSiteConfig()`)
|
||||
|
||||
## For more information, read [Setup](./setup/README.md).
|
||||
78
docs/config/Tutorials.md
Normal file
78
docs/config/Tutorials.md
Normal file
@@ -0,0 +1,78 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/Tutorials.md](../../packages/mermaid/src/docs/config/Tutorials.md).
|
||||
|
||||
# Tutorials
|
||||
|
||||
This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
|
||||
|
||||
**Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
|
||||
|
||||
For most purposes, you can use the [Live Editor](https://mermaid.live), to quickly and easily render a diagram.
|
||||
|
||||
## Live-Editor Tutorials
|
||||
|
||||
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
|
||||
|
||||
[Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA)
|
||||
|
||||
[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
|
||||
|
||||
[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
|
||||
|
||||
[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
|
||||
|
||||
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
|
||||
|
||||
## Mermaid with HTML
|
||||
|
||||
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
|
||||
|
||||
**CodePen Examples:**
|
||||
|
||||
https://codepen.io/CarlBoneri/pen/BQwZzq
|
||||
|
||||
https://codepen.io/tdkn/pen/vZxQzd
|
||||
|
||||
https://codepen.io/janzeteachesit/pen/OWWZKN
|
||||
|
||||
## Mermaid with Text Area
|
||||
|
||||
https://codepen.io/Ryuno-Ki/pen/LNxwgR
|
||||
|
||||
## Mermaid in open source docs
|
||||
|
||||
[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/)
|
||||
|
||||
[K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
|
||||
|
||||
## Jupyter Integration with mermaid-js
|
||||
|
||||
Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
|
||||
|
||||
```python
|
||||
import base64
|
||||
from IPython.display import Image, display
|
||||
import matplotlib.pyplot as plt
|
||||
|
||||
def mm(graph):
|
||||
graphbytes = graph.encode("ascii")
|
||||
base64_bytes = base64.b64encode(graphbytes)
|
||||
base64_string = base64_bytes.decode("ascii")
|
||||
display(Image(url="https://mermaid.ink/img/" + base64_string))
|
||||
|
||||
mm("""
|
||||
graph LR;
|
||||
A--> B & C & D;
|
||||
B--> A & E;
|
||||
C--> A & E;
|
||||
D--> A & E;
|
||||
E--> B & C & D;
|
||||
""")
|
||||
```
|
||||
|
||||
**Output**
|
||||
|
||||
|
||||
360
docs/config/accessibility.md
Normal file
360
docs/config/accessibility.md
Normal file
@@ -0,0 +1,360 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/accessibility.md](../../packages/mermaid/src/docs/config/accessibility.md).
|
||||
|
||||
# Accessibility Options
|
||||
|
||||
## Accessibility
|
||||
|
||||
Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
|
||||
|
||||
To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
|
||||
|
||||
This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
|
||||
|
||||
## Defining Accessibility Options
|
||||
|
||||
### Single line accessibility values
|
||||
|
||||
The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
|
||||
|
||||
- `accTitle: "Your Accessibility Title"` or
|
||||
- `accDescr: "Your Accessibility Description"`
|
||||
|
||||
**When these two options are defined, they will add a corresponding `<title>` and `<desc>` tag in the SVG.**
|
||||
|
||||
Let us take a look at the following example with a flowchart diagram:
|
||||
|
||||
```mermaid-example
|
||||
graph LR
|
||||
accTitle: Big decisions
|
||||
accDescr: Flow chart of the decision making process
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
accTitle: Big decisions
|
||||
accDescr: Flow chart of the decision making process
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
|
||||
```
|
||||
|
||||
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
|
||||
|
||||
|
||||
|
||||
### Multi-line Accessibility title/description
|
||||
|
||||
You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.
|
||||
|
||||
`accTitle: My single line title value` (**_single line format_**)
|
||||
|
||||
vs
|
||||
|
||||
`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
|
||||
|
||||
Let us look at it in the following example, with same flowchart:
|
||||
|
||||
```mermaid-example
|
||||
graph LR
|
||||
accTitle: Big decisions
|
||||
|
||||
accDescr {
|
||||
My multi-line description
|
||||
of the diagram
|
||||
}
|
||||
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
accTitle: Big decisions
|
||||
|
||||
accDescr {
|
||||
My multi-line description
|
||||
of the diagram
|
||||
}
|
||||
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
|
||||
```
|
||||
|
||||
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
|
||||
|
||||
|
||||
|
||||
### Sample Code Snippet for other diagram types
|
||||
|
||||
#### Sequence Diagram
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
accTitle: My Sequence Diagram
|
||||
accDescr: My Sequence Diagram Description
|
||||
|
||||
Alice->>John: Hello John, how are you?
|
||||
John-->>Alice: Great!
|
||||
Alice-)John: See you later!
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
accTitle: My Sequence Diagram
|
||||
accDescr: My Sequence Diagram Description
|
||||
|
||||
Alice->>John: Hello John, how are you?
|
||||
John-->>Alice: Great!
|
||||
Alice-)John: See you later!
|
||||
```
|
||||
|
||||
#### Class Diagram
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
accTitle: My Class Diagram
|
||||
accDescr: My Class Diagram Description
|
||||
|
||||
Vehicle <|-- Car
|
||||
```
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
accTitle: My Class Diagram
|
||||
accDescr: My Class Diagram Description
|
||||
|
||||
Vehicle <|-- Car
|
||||
```
|
||||
|
||||
#### State Diagram
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram
|
||||
accTitle: My State Diagram
|
||||
accDescr: My State Diagram Description
|
||||
|
||||
s1 --> s2
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
accTitle: My State Diagram
|
||||
accDescr: My State Diagram Description
|
||||
|
||||
s1 --> s2
|
||||
|
||||
```
|
||||
|
||||
#### Entity Relationship Diagram
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
accTitle: My Entity Relationship Diagram
|
||||
accDescr: My Entity Relationship Diagram Description
|
||||
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
accTitle: My Entity Relationship Diagram
|
||||
accDescr: My Entity Relationship Diagram Description
|
||||
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
|
||||
```
|
||||
|
||||
#### User Journey Diagram
|
||||
|
||||
```mermaid-example
|
||||
journey
|
||||
accTitle: My User Journey Diagram
|
||||
accDescr: My User Journey Diagram Description
|
||||
|
||||
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
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
accTitle: My User Journey Diagram
|
||||
accDescr: My User Journey Diagram Description
|
||||
|
||||
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
|
||||
|
||||
```
|
||||
|
||||
#### Gantt Chart
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
accTitle: My Gantt Chart Accessibility Title
|
||||
accDescr: My Gantt Chart Accessibility Description
|
||||
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
accTitle: My Gantt Chart Accessibility Title
|
||||
accDescr: My Gantt Chart Accessibility Description
|
||||
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
|
||||
```
|
||||
|
||||
#### Pie Chart
|
||||
|
||||
```mermaid-example
|
||||
pie
|
||||
accTitle: My Pie Chart Accessibility Title
|
||||
accDescr: My Pie Chart Accessibility Description
|
||||
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
"Potassium" : 50.05
|
||||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie
|
||||
accTitle: My Pie Chart Accessibility Title
|
||||
accDescr: My Pie Chart Accessibility Description
|
||||
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
"Potassium" : 50.05
|
||||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
|
||||
```
|
||||
|
||||
#### Requirement Diagram
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
accTitle: My Requirement Diagram
|
||||
accDescr: My Requirement Diagram Description
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
accTitle: My Requirement Diagram
|
||||
accDescr: My Requirement Diagram Description
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
|
||||
```
|
||||
|
||||
#### Gitgraph
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
accTitle: My Gitgraph Accessibility Title
|
||||
accDescr: My Gitgraph Accessibility Description
|
||||
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
accTitle: My Gitgraph Accessibility Title
|
||||
accDescr: My Gitgraph Accessibility Description
|
||||
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
|
||||
```
|
||||
41
docs/config/configuration.md
Normal file
41
docs/config/configuration.md
Normal file
@@ -0,0 +1,41 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/configuration.md](../../packages/mermaid/src/docs/config/configuration.md).
|
||||
|
||||
# Configuration
|
||||
|
||||
When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:
|
||||
|
||||
- The default configuration
|
||||
- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
|
||||
- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
|
||||
|
||||
**The render config** is configuration that is used when rendering by applying these configurations.
|
||||
|
||||
## Theme configuration
|
||||
|
||||
## Starting mermaid
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
Site->>mermaid: initialize
|
||||
Site->>mermaid: content loaded
|
||||
mermaid->>mermaidAPI: init
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Site->>mermaid: initialize
|
||||
Site->>mermaid: content loaded
|
||||
mermaid->>mermaidAPI: init
|
||||
```
|
||||
|
||||
## Initialize
|
||||
|
||||
The initialize call is applied **only once**. It is called by the site integrator in order to override the default configuration at a site level.
|
||||
|
||||
## configApi.reset
|
||||
|
||||
This method resets the configuration for a diagram to the overall site configuration, which is the configuration provided by the site integrator. Before each rendering of a diagram, reset is called at the very beginning.
|
||||
329
docs/config/directives.md
Normal file
329
docs/config/directives.md
Normal file
@@ -0,0 +1,329 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/directives.md](../../packages/mermaid/src/docs/config/directives.md).
|
||||
|
||||
# Directives
|
||||
|
||||
## Directives
|
||||
|
||||
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
|
||||
|
||||
The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
|
||||
|
||||
While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives.
|
||||
|
||||
## Types of Directives options
|
||||
|
||||
Mermaid basically supports two types of configuration options to be overridden by directives.
|
||||
|
||||
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
|
||||
|
||||
- theme
|
||||
- fontFamily
|
||||
- logLevel
|
||||
- securityLevel
|
||||
- startOnLoad
|
||||
- secure
|
||||
|
||||
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
|
||||
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
|
||||
|
||||
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
|
||||
|
||||
Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs
|
||||
|
||||
## Declaring directives
|
||||
|
||||
Now that we have defined the types of configurations that are available, we can learn how to declare directives.
|
||||
A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`.
|
||||
|
||||
Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
|
||||
|
||||
Following code snippet shows the structure of a directive:
|
||||
|
||||
%%{
|
||||
init: {
|
||||
"theme": "dark",
|
||||
"fontFamily": "monospace",
|
||||
"logLevel": "info",
|
||||
"flowchart": {
|
||||
"htmlLabels": true,
|
||||
"curve": "linear"
|
||||
},
|
||||
"sequence": {
|
||||
"mirrorActors": true
|
||||
}
|
||||
}
|
||||
}%%
|
||||
|
||||
You can also define the directives in a single line, like this:
|
||||
|
||||
%%{init: { **insert argument here**}}%%
|
||||
|
||||
For example, the following code snippet:
|
||||
|
||||
%%{init: { "sequence": { "mirrorActors":false }}}%%
|
||||
|
||||
**Notes:**
|
||||
The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
|
||||
Valid Key Value pairs can be found in config.
|
||||
|
||||
Example with a simple graph:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
graph LR
|
||||
A-->B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
graph LR
|
||||
A-->B
|
||||
```
|
||||
|
||||
Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
|
||||
|
||||
Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
|
||||
...
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
|
||||
...
|
||||
```
|
||||
|
||||
parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
|
||||
|
||||
```json
|
||||
{
|
||||
"logLevel": "fatal",
|
||||
"theme": "dark",
|
||||
"startOnLoad": true
|
||||
}
|
||||
```
|
||||
|
||||
This will then be sent to `mermaid.initialize(...)` for rendering.
|
||||
|
||||
## Directive Examples
|
||||
|
||||
More directive examples for diagram specific configuration overrides
|
||||
Now that the concept of directives has been explained, Let us see some more examples for directives usage:
|
||||
|
||||
### Changing Theme via directive
|
||||
|
||||
The following code snippet changes theme to forest:
|
||||
|
||||
`%%{init: { "theme": "forest" } }%%`
|
||||
|
||||
Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
|
||||
Default Value is `default`.
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "theme": "forest" } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "theme": "forest" } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
### Changing fontFamily via directive
|
||||
|
||||
The following code snippet changes fontFamily to rebuchet MS, Verdana, Arial, Sans-Serif:
|
||||
|
||||
`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
### Changing logLevel via directive
|
||||
|
||||
The following code snippet changes logLevel to 2:
|
||||
|
||||
`%%{init: { "logLevel": 2 } }%%`
|
||||
|
||||
Possible logLevel values are:
|
||||
|
||||
- `1` for _debug_,
|
||||
- `2` for _info_
|
||||
- `3` for _warn_
|
||||
- `4` for _error_
|
||||
- `5` for _only fatal errors_
|
||||
|
||||
Default Value is `5`.
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "logLevel": 2 } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "logLevel": 2 } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
```
|
||||
|
||||
### Changing flowchart config via directive
|
||||
|
||||
Some common flowchart configurations are:
|
||||
|
||||
- _htmlLabels_: true/false
|
||||
- _curve_: linear/curve
|
||||
- _diagramPadding_: number
|
||||
- _useMaxWidth_: number
|
||||
|
||||
For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
|
||||
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
|
||||
|
||||
The following code snippet changes flowchart config:
|
||||
|
||||
`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
|
||||
|
||||
Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
```
|
||||
|
||||
### Changing Sequence diagram config via directive
|
||||
|
||||
Some common sequence configurations are:
|
||||
|
||||
- _width_: number
|
||||
- _height_: number
|
||||
- _messageAlign_: left, center, right
|
||||
- _mirrorActors_: boolean
|
||||
- _useMaxWidth_: boolean
|
||||
- _rightAngles_: boolean
|
||||
- _showSequenceNumbers_: boolean
|
||||
- _wrap_: boolean
|
||||
|
||||
For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code.
|
||||
_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_
|
||||
|
||||
So, `wrap` by default has a value of `false` for sequence diagrams.
|
||||
|
||||
Let us see an example:
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
|
||||
Alice->Bob: Good.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
|
||||
Alice->Bob: Good.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
|
||||
Now let us enable wrap for sequence diagrams.
|
||||
|
||||
The following code snippet changes sequence diagram config for `wrap` to `true`:
|
||||
|
||||
`%%{init: { "sequence": { "wrap": true} } }%%`
|
||||
|
||||
Using in the diagram above, the wrap will be enabled.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
|
||||
sequenceDiagram
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
|
||||
Alice->Bob: Good.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
|
||||
sequenceDiagram
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
|
||||
Alice->Bob: Good.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
BIN
docs/config/img/accessibility-div-example-2.png
Normal file
BIN
docs/config/img/accessibility-div-example-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
docs/config/img/accessibility-div-example.png
Normal file
BIN
docs/config/img/accessibility-div-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
BIN
docs/config/img/assignWithDepth.png
Normal file
BIN
docs/config/img/assignWithDepth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
docs/config/img/object.assign without depth.png
Normal file
BIN
docs/config/img/object.assign without depth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
docs/config/img/python-mermaid-integration.png
Normal file
BIN
docs/config/img/python-mermaid-integration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
docs/config/img/wrapped text.png
Normal file
BIN
docs/config/img/wrapped text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
9
docs/config/mermaidCLI.md
Normal file
9
docs/config/mermaidCLI.md
Normal file
@@ -0,0 +1,9 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/mermaidCLI.md](../../packages/mermaid/src/docs/config/mermaidCLI.md).
|
||||
|
||||
# mermaid CLI
|
||||
|
||||
mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead.
|
||||
26
docs/config/n00b-advanced.md
Normal file
26
docs/config/n00b-advanced.md
Normal file
@@ -0,0 +1,26 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/n00b-advanced.md](../../packages/mermaid/src/docs/config/n00b-advanced.md).
|
||||
|
||||
# Advanced n00b mermaid (Coming soon..)
|
||||
|
||||
## splitting mermaid code from html
|
||||
|
||||
A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
|
||||
|
||||
stuff stuff
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
The actual mermaid file could for example look like this:
|
||||
|
||||
mermaid content...
|
||||
|
||||
---
|
||||
|
||||
## mermaid configuration options
|
||||
|
||||
...
|
||||
13
docs/config/setup/README.md
Normal file
13
docs/config/setup/README.md
Normal file
@@ -0,0 +1,13 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/README.md](../../../packages/mermaid/src/docs/config/setup/README.md).
|
||||
|
||||
# mermaid
|
||||
|
||||
## Modules
|
||||
|
||||
- [config](modules/config.md)
|
||||
- [defaultConfig](modules/defaultConfig.md)
|
||||
- [mermaidAPI](modules/mermaidAPI.md)
|
||||
276
docs/config/setup/modules/config.md
Normal file
276
docs/config/setup/modules/config.md
Normal file
@@ -0,0 +1,276 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/config.md](../../../../packages/mermaid/src/docs/config/setup/modules/config.md).
|
||||
|
||||
# Module: config
|
||||
|
||||
## Variables
|
||||
|
||||
### defaultConfig
|
||||
|
||||
• `Const` **defaultConfig**: `MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7)
|
||||
|
||||
## Functions
|
||||
|
||||
### addDirective
|
||||
|
||||
▸ **addDirective**(`directive`): `void`
|
||||
|
||||
Pushes in a directive to the configuration
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :---------- | :---- | :----------------------- |
|
||||
| `directive` | `any` | The directive to push in |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
|
||||
|
||||
---
|
||||
|
||||
### getConfig
|
||||
|
||||
▸ **getConfig**(): `MermaidConfig`
|
||||
|
||||
## getConfig
|
||||
|
||||
| Function | Description | Type | Return Values |
|
||||
| --------- | ------------------------- | ----------- | ------------------------------ |
|
||||
| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
|
||||
|
||||
**Notes**: Returns **any** the currentConfig
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
The currentConfig
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L138)
|
||||
|
||||
---
|
||||
|
||||
### getSiteConfig
|
||||
|
||||
▸ **getSiteConfig**(): `MermaidConfig`
|
||||
|
||||
## 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
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
The siteConfig
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97)
|
||||
|
||||
---
|
||||
|
||||
### reset
|
||||
|
||||
▸ **reset**(`config?`): `void`
|
||||
|
||||
## reset
|
||||
|
||||
| Function | Description | Type | Required | Values |
|
||||
| -------- | ---------------------------- | ----------- | -------- | ------ |
|
||||
| reset | Resets currentConfig to conf | Put Request | Required | None |
|
||||
|
||||
## conf
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
|
||||
| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
|
||||
|
||||
**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `config` | `MermaidConfig` | `siteConfig` | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L225)
|
||||
|
||||
---
|
||||
|
||||
### sanitize
|
||||
|
||||
▸ **sanitize**(`options`): `void`
|
||||
|
||||
## 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 **Notes**: modifies
|
||||
options in-place
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :-------- | :---- | :-------------------------------- |
|
||||
| `options` | `any` | The potential setConfig parameter |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L153)
|
||||
|
||||
---
|
||||
|
||||
### saveConfigFromInitialize
|
||||
|
||||
▸ **saveConfigFromInitialize**(`conf`): `void`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :-------------- |
|
||||
| `conf` | `MermaidConfig` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76)
|
||||
|
||||
---
|
||||
|
||||
### setConfig
|
||||
|
||||
▸ **setConfig**(`conf`): `MermaidConfig`
|
||||
|
||||
## 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.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :----- | :-------------- | :-------------------------- |
|
||||
| `conf` | `MermaidConfig` | The potential currentConfig |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
The currentConfig merged with the sanitized conf
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114)
|
||||
|
||||
---
|
||||
|
||||
### setSiteConfig
|
||||
|
||||
▸ **setSiteConfig**(`conf`): `MermaidConfig`
|
||||
|
||||
## 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
|
||||
|
||||
| Name | Type | Description |
|
||||
| :----- | :-------------- | :------------------------------------------ |
|
||||
| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
The new siteConfig
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L62)
|
||||
|
||||
---
|
||||
|
||||
### updateCurrentConfig
|
||||
|
||||
▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :------------ | :-------------- |
|
||||
| `siteCfg` | `MermaidConfig` |
|
||||
| `_directives` | `any`\[] |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14)
|
||||
|
||||
---
|
||||
|
||||
### updateSiteConfig
|
||||
|
||||
▸ **updateSiteConfig**(`conf`): `MermaidConfig`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :-------------- |
|
||||
| `conf` | `MermaidConfig` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)
|
||||
56
docs/config/setup/modules/defaultConfig.md
Normal file
56
docs/config/setup/modules/defaultConfig.md
Normal file
@@ -0,0 +1,56 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/defaultConfig.md](../../../../packages/mermaid/src/docs/config/setup/modules/defaultConfig.md).
|
||||
|
||||
# Module: defaultConfig
|
||||
|
||||
## Variables
|
||||
|
||||
### configKeys
|
||||
|
||||
• `Const` **configKeys**: `string`\[]
|
||||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:1881](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1881)
|
||||
|
||||
---
|
||||
|
||||
### default
|
||||
|
||||
• `Const` **default**: `Partial`<`MermaidConfig`>
|
||||
|
||||
**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:**
|
||||
|
||||
```js
|
||||
mermaid.initialize({ flowchart: { htmlLabels: false } });
|
||||
```
|
||||
|
||||
**Example 2:**
|
||||
|
||||
```html
|
||||
<script>
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
|
||||
A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
|
||||
A description of each option follows below.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)
|
||||
308
docs/config/setup/modules/mermaidAPI.md
Normal file
308
docs/config/setup/modules/mermaidAPI.md
Normal file
@@ -0,0 +1,308 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md).
|
||||
|
||||
# Module: mermaidAPI
|
||||
|
||||
## References
|
||||
|
||||
### default
|
||||
|
||||
Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
|
||||
|
||||
## Variables
|
||||
|
||||
### mermaidAPI
|
||||
|
||||
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseAsync`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `string` ; `renderAsync`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `Promise`<`string`> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
|
||||
|
||||
## mermaidAPI configuration defaults
|
||||
|
||||
```ts
|
||||
const config = {
|
||||
theme: 'default',
|
||||
logLevel: 'fatal',
|
||||
securityLevel: 'strict',
|
||||
startOnLoad: true,
|
||||
arrowMarkerAbsolute: false,
|
||||
|
||||
er: {
|
||||
diagramPadding: 20,
|
||||
layoutDirection: 'TB',
|
||||
minEntityWidth: 100,
|
||||
minEntityHeight: 75,
|
||||
entityPadding: 15,
|
||||
stroke: 'gray',
|
||||
fill: 'honeydew',
|
||||
fontSize: 12,
|
||||
useMaxWidth: true,
|
||||
},
|
||||
flowchart: {
|
||||
diagramPadding: 8,
|
||||
htmlLabels: true,
|
||||
curve: 'basis',
|
||||
},
|
||||
sequence: {
|
||||
diagramMarginX: 50,
|
||||
diagramMarginY: 10,
|
||||
actorMargin: 50,
|
||||
width: 150,
|
||||
height: 65,
|
||||
boxMargin: 10,
|
||||
boxTextMargin: 5,
|
||||
noteMargin: 10,
|
||||
messageMargin: 35,
|
||||
messageAlign: 'center',
|
||||
mirrorActors: true,
|
||||
bottomMarginAdj: 1,
|
||||
useMaxWidth: true,
|
||||
rightAngles: false,
|
||||
showSequenceNumbers: false,
|
||||
},
|
||||
gantt: {
|
||||
titleTopMargin: 25,
|
||||
barHeight: 20,
|
||||
barGap: 4,
|
||||
topPadding: 50,
|
||||
leftPadding: 75,
|
||||
gridLineStartPadding: 35,
|
||||
fontSize: 11,
|
||||
fontFamily: '"Open Sans", sans-serif',
|
||||
numberSectionStyles: 4,
|
||||
axisFormat: '%Y-%m-%d',
|
||||
topAxis: false,
|
||||
},
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
```
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:949](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L949)
|
||||
|
||||
## Functions
|
||||
|
||||
### appendDivSvgG
|
||||
|
||||
▸ **appendDivSvgG**(`parentRoot`, `id`, `enclosingDivId`, `divStyle?`, `svgXlink?`): `any`
|
||||
|
||||
Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes.
|
||||
Only set the style attribute on the enclosing div if divStyle is given.
|
||||
Only set the xmlns:xlink attribute on svg if svgXlink is given.
|
||||
Return the last node appended
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :--------------- | :------- | :----------------------------------------------- |
|
||||
| `parentRoot` | `any` | the d3 node to append things to |
|
||||
| `id` | `string` | the value to set the id attr to |
|
||||
| `enclosingDivId` | `string` | the id to set the enclosing div to |
|
||||
| `divStyle?` | `string` | if given, the style to set the enclosing div to |
|
||||
| `svgXlink?` | `string` | if given, the link to set the new svg element to |
|
||||
|
||||
#### Returns
|
||||
|
||||
`any`
|
||||
|
||||
- returns the parentRoot that had nodes appended
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L292)
|
||||
|
||||
---
|
||||
|
||||
### cleanUpSvgCode
|
||||
|
||||
▸ **cleanUpSvgCode**(`svgCode?`, `inSandboxMode`, `useArrowMarkerUrls`): `string`
|
||||
|
||||
Clean up svgCode. Do replacements needed
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| :------------------- | :-------- | :------------ | :---------------------------------------------------------- |
|
||||
| `svgCode` | `string` | `''` | the code to clean up |
|
||||
| `inSandboxMode` | `boolean` | `undefined` | security level |
|
||||
| `useArrowMarkerUrls` | `boolean` | `undefined` | should arrow marker's use full urls? (vs. just the anchors) |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
the cleaned up svgCode
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:243](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L243)
|
||||
|
||||
---
|
||||
|
||||
### createCssStyles
|
||||
|
||||
▸ **createCssStyles**(`config`, `graphType`, `classDefs?`): `string`
|
||||
|
||||
Create the user styles
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :---------- | :-------------- | :----------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `config` | `MermaidConfig` | configuration that has style and theme settings to use |
|
||||
| `graphType` | `string` | used for checking if classDefs should be applied |
|
||||
| `classDefs` | `undefined` | `null` | `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
the string with all the user styles
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
|
||||
|
||||
---
|
||||
|
||||
### createUserStyles
|
||||
|
||||
▸ **createUserStyles**(`config`, `graphType`, `classDefs`, `svgId`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :---------- | :----------------------------------------- |
|
||||
| `config` | `MermaidConfig` |
|
||||
| `graphType` | `string` |
|
||||
| `classDefs` | `Record`<`string`, `DiagramStyleClassDef`> |
|
||||
| `svgId` | `string` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L220)
|
||||
|
||||
---
|
||||
|
||||
### cssImportantStyles
|
||||
|
||||
▸ **cssImportantStyles**(`cssClass`, `element`, `cssClasses?`): `string`
|
||||
|
||||
Create a CSS style that starts with the given class name, then the element,
|
||||
with an enclosing block that has each of the cssClasses followed by !important;
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| :----------- | :---------- | :------------ | :--------------------------------------------- |
|
||||
| `cssClass` | `string` | `undefined` | CSS class name |
|
||||
| `element` | `string` | `undefined` | CSS element |
|
||||
| `cssClasses` | `string`\[] | `[]` | list of CSS styles to append after the element |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
- the constructed string
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
|
||||
|
||||
---
|
||||
|
||||
### decodeEntities
|
||||
|
||||
▸ **decodeEntities**(`text`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :----- | :------- | :----------------- |
|
||||
| `text` | `string` | text to be decoded |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L128)
|
||||
|
||||
---
|
||||
|
||||
### encodeEntities
|
||||
|
||||
▸ **encodeEntities**(`text`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :----- | :------- | :----------------- |
|
||||
| `text` | `string` | text to be encoded |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L99)
|
||||
|
||||
---
|
||||
|
||||
### putIntoIFrame
|
||||
|
||||
▸ **putIntoIFrame**(`svgCode?`, `svgElement?`): `string`
|
||||
|
||||
Put the svgCode into an iFrame. Return the iFrame code
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| :------------ | :------- | :------------ | :--------------------------------------------------------------------------- |
|
||||
| `svgCode` | `string` | `''` | the svg code to put inside the iFrame |
|
||||
| `svgElement?` | `any` | `undefined` | the d3 node that has the current svgElement so we can get the height from it |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
- the code with the iFrame that now contains the svgCode
|
||||
TODO replace btoa(). Replace with buf.toString('base64')?
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:271](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L271)
|
||||
|
||||
---
|
||||
|
||||
### removeExistingElements
|
||||
|
||||
▸ **removeExistingElements**(`doc`, `isSandboxed`, `id`, `divSelector`, `iFrameSelector`): `void`
|
||||
|
||||
Remove any existing elements from the given document
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :--------------- | :--------- | :---------------------------------------------- |
|
||||
| `doc` | `Document` | the document to removed elements from |
|
||||
| `isSandboxed` | `boolean` | whether or not we are in sandboxed mode |
|
||||
| `id` | `string` | id for any existing SVG element |
|
||||
| `divSelector` | `string` | selector for any existing enclosing div element |
|
||||
| `iFrameSelector` | `string` | selector for any existing iFrame element |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L343)
|
||||
743
docs/config/theming.md
Normal file
743
docs/config/theming.md
Normal file
@@ -0,0 +1,743 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md).
|
||||
|
||||
# Theme Configuration
|
||||
|
||||
With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
|
||||
|
||||
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 be 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.
|
||||
|
||||
## Site-wide Themes
|
||||
|
||||
Site-wide themes are declared via `initialize` by site owners.
|
||||
|
||||
Example of `Initialize` call setting `theme` to `base`:
|
||||
|
||||
```javascript
|
||||
mermaidAPI.initialize({
|
||||
securityLevel: 'loose',
|
||||
theme: 'base',
|
||||
});
|
||||
```
|
||||
|
||||
**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
|
||||
|
||||
## Themes at the Local or Current Level
|
||||
|
||||
When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'theme':'base'}}%%
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme':'base'}}%%
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'theme':'base'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme':'base'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
# List of Themes
|
||||
|
||||
# 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%%`.
|
||||
|
||||
| Parameter | Description | Type | Required | Objects contained |
|
||||
| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
|
||||
| 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%%`.**
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
**Notes:**
|
||||
Leaving it empty will set all variable values to default.
|
||||
|
||||
## Color and Color Calculation:
|
||||
|
||||
Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. Mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
|
||||
|
||||
**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
|
||||
|
||||
You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
|
||||
|
||||
## Theme Variables Reference Table
|
||||
|
||||
> **Note**
|
||||
> Variables that are unique to some diagrams can be affected by changes in Theme Variables
|
||||
|
||||
| Variable | Default/Base/Factor value | Calc | Description |
|
||||
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| darkMode | false | | Boolean Value that dictates how to calculate colors. "true" will activate darkmode. |
|
||||
| background | #f4f4f4 | | Used to calculate color for items that should either be background colored or contrasting to the background. |
|
||||
| fontFamily | "trebuchet ms", verdana, arial | | |
|
||||
| fontSize | 16px | | Font Size, in pixels |
|
||||
| primaryColor | #fff4dd | | Color to be used as background in nodes, other colors will be derived from this |
|
||||
| primaryBorderColor | based on primaryColor | \* | Color to be used as border in nodes using primaryColor |
|
||||
| primaryTextColor | based on darkMode #ddd/#333 | \* | Color to be used as text color in nodes using primaryColor |
|
||||
| secondaryColor | based on primaryColor | \* | |
|
||||
| secondaryBorderColor | based on secondaryColor | \* | Color to be used as border in nodes using secondaryColor |
|
||||
| secondaryTextColor | based on secondaryColor | \* | Color to be used as text color in nodes using secondaryColor |
|
||||
| tertiaryColor | based on primaryColor | \* | |
|
||||
| tertiaryBorderColor | based on tertiaryColor | \* | Color to be used as border in nodes using tertiaryColor |
|
||||
| tertiaryTextColor | based on tertiaryColor | \* | Color to be used as text color in nodes using tertiaryColor |
|
||||
| noteBkgColor | #fff5ad | | Color used as background in notes |
|
||||
| noteTextColor | #333 | | Text color in note rectangles. |
|
||||
| noteBorderColor | based on noteBkgColor | \* | Border color in note rectangles. |
|
||||
| lineColor | based on background | \* | |
|
||||
| textColor | based on primaryTextColor | \* | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
|
||||
| mainBkg | based on primaryColor | \* | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
|
||||
| errorBkgColor | tertiaryColor | \* | Color for syntax error message |
|
||||
| errorTextColor | tertiaryTextColor | \* | Color for syntax error message |
|
||||
|
||||
# What follows are Variables, specific to different diagrams and charts.
|
||||
|
||||
## Some Theme Variables serve as, or affect the Default Values for Specific Diagram Variables, unless changed using `%%init%%` .
|
||||
|
||||
## Flowchart
|
||||
|
||||
| Variable | Default/ Associated Value | Calc | Description |
|
||||
| ------------------- | ------------------------- | ---- | ---------------------------- |
|
||||
| nodeBorder | primaryBorderColor | \* | Node Border Color |
|
||||
| clusterBkg | tertiaryColor | \* | Background in subgraphs |
|
||||
| clusterBorder | tertiaryBorderColor | \* | Cluster Border Color |
|
||||
| defaultLinkColor | lineColor | \* | Link Color |
|
||||
| titleColor | tertiaryTextColor | \* | Title Color |
|
||||
| edgeLabelBackground | based on secondaryColor | \* | |
|
||||
| nodeTextColor | primaryTextColor | \* | Color for text inside Nodes. |
|
||||
|
||||
# sequence diagram
|
||||
|
||||
| name | Default value | Calc | Description |
|
||||
| --------------------- | ----------------------- | ---- | --------------------------- |
|
||||
| actorBorder | primaryBorderColor | \* | Actor Border Color |
|
||||
| actorBkg | mainBkg | \* | Actor Background Color |
|
||||
| actorTextColor | primaryTextColor | \* | Actor Text Color |
|
||||
| actorLineColor | grey | \* | Actor Line Color |
|
||||
| signalColor | textColor | \* | Signal Color |
|
||||
| signalTextColor | textColor | \* | Signal Text Color |
|
||||
| labelBoxBkgColor | actorBkg | \* | Label Box Background Color |
|
||||
| labelBoxBorderColor | actorBorder | \* | Label Box Border Color |
|
||||
| labelTextColor | actorTextColor | \* | Label Text Color |
|
||||
| loopTextColor | actorTextColor | \* | Loop ext Color |
|
||||
| activationBorderColor | based on secondaryColor | \* | Activation Border Color |
|
||||
| activationBkgColor | secondaryColor | \* | Activation Background Color |
|
||||
| sequenceNumberColor | based on lineColor | \* | Sequence Number Color |
|
||||
|
||||
# state colors
|
||||
|
||||
| name | Default value | Calc | Description |
|
||||
| ------------- | ---------------- | ---- | -------------------------------------------- |
|
||||
| labelColor | primaryTextColor | \* | |
|
||||
| altBackground | tertiaryColor | \* | Used for background in deep composite states |
|
||||
|
||||
# class colors
|
||||
|
||||
| name | Default value | Calc | Description |
|
||||
| --------- | ------------- | ---- | ------------------------------- |
|
||||
| classText | textColor | \* | Color of Text in class diagrams |
|
||||
|
||||
# User journey colors
|
||||
|
||||
| name | Default value | Calc | Description |
|
||||
| --------- | ----------------------- | ---- | --------------------------------------- |
|
||||
| fillType0 | primaryColor | \* | Fill for 1st section in journey diagram |
|
||||
| fillType1 | secondaryColor | \* | Fill for 2nd section in journey diagram |
|
||||
| fillType2 | based on primaryColor | \* | Fill for 3rd section in journey diagram |
|
||||
| fillType3 | based on secondaryColor | \* | Fill for 4th section in journey diagram |
|
||||
| fillType4 | based on primaryColor | \* | Fill for 5th section in journey diagram |
|
||||
| fillType5 | based on secondaryColor | \* | Fill for 6th section in journey diagram |
|
||||
| fillType6 | based on primaryColor | \* | Fill for 7th section in journey diagram |
|
||||
| fillType7 | based on secondaryColor | \* | Fill for 8th section in journey diagram |
|
||||
|
||||
\*\*Notes: Values are meant to create an alternating look.
|
||||
|
||||
# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
|
||||
|
||||
- Make the primary color a little lighter
|
||||
- set the tertiary color to a reddish shade as well
|
||||
- make the edge label background differ from the subgraph by setting the edgeLabelBackground
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
|
||||
|
||||
# Common theming activities
|
||||
|
||||
## How to change the color of the arrows
|
||||
|
||||
# Examples:
|
||||
|
||||
When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good.
|
||||
In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
|
||||
|
||||
### Flowchart
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
### Flowchart (beta)
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[Another]
|
||||
C ==>|One| D[Laptop]
|
||||
C x--x|Two| E[iPhone]
|
||||
C o--o|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[Another]
|
||||
C ==>|One| D[Laptop]
|
||||
C x--x|Two| E[iPhone]
|
||||
C o--o|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
### Sequence diagram
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
Alice->>John: Hello John, how are you?
|
||||
and Action 2
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
end
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
Note right of John: John is perceptive
|
||||
John-->>-Alice: I feel great!
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
Alice->>John: Hello John, how are you?
|
||||
and Action 2
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
end
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
Note right of John: John is perceptive
|
||||
John-->>-Alice: I feel great!
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
```
|
||||
|
||||
### Class diagram
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <--o Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <--o Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
```
|
||||
|
||||
### Gantt
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
excludes :excludes the named dates/days from being included in a charted task..
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid :1d
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :active, a1, after des1, 3d
|
||||
Add gantt diagram to demo page :after a1 , 20h
|
||||
Add another diagram to demo page :doc1, after a1 , 48h
|
||||
|
||||
section Last section
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
excludes :excludes the named dates/days from being included in a charted task..
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid :1d
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :active, a1, after des1, 3d
|
||||
Add gantt diagram to demo page :after a1 , 20h
|
||||
Add another diagram to demo page :doc1, after a1 , 48h
|
||||
|
||||
section Last section
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
```
|
||||
|
||||
### State diagram
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||
--
|
||||
[*] --> CapsLockOff
|
||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||
--
|
||||
[*] --> ScrollLockOff
|
||||
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
|
||||
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
|
||||
}
|
||||
state SomethingElse {
|
||||
A --> B
|
||||
B --> A
|
||||
}
|
||||
|
||||
Active --> SomethingElse
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
|
||||
SomethingElse --> [*]
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||
--
|
||||
[*] --> CapsLockOff
|
||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||
--
|
||||
[*] --> ScrollLockOff
|
||||
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
|
||||
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
|
||||
}
|
||||
state SomethingElse {
|
||||
A --> B
|
||||
B --> A
|
||||
}
|
||||
|
||||
Active --> SomethingElse
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
|
||||
SomethingElse --> [*]
|
||||
|
||||
```
|
||||
|
||||
### State diagram (beta)
|
||||
|
||||
```mermaid-example
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||
--
|
||||
[*] --> CapsLockOff
|
||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||
--
|
||||
[*] --> ScrollLockOff
|
||||
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
|
||||
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
|
||||
}
|
||||
state SomethingElse {
|
||||
A --> B
|
||||
B --> A
|
||||
}
|
||||
|
||||
Active --> SomethingElse2
|
||||
note right of SomethingElse2 : This is the note to the right.
|
||||
|
||||
SomethingElse2 --> [*]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||
--
|
||||
[*] --> CapsLockOff
|
||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||
--
|
||||
[*] --> ScrollLockOff
|
||||
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
|
||||
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
|
||||
}
|
||||
state SomethingElse {
|
||||
A --> B
|
||||
B --> A
|
||||
}
|
||||
|
||||
Active --> SomethingElse2
|
||||
note right of SomethingElse2 : This is the note to the right.
|
||||
|
||||
SomethingElse2 --> [*]
|
||||
```
|
||||
|
||||
### Entity Relations diagram
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
```
|
||||
|
||||
### User journey diagram
|
||||
|
||||
```mermaid-example
|
||||
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
|
||||
```
|
||||
|
||||
```mermaid
|
||||
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
|
||||
```
|
||||
391
docs/config/usage.md
Normal file
391
docs/config/usage.md
Normal file
@@ -0,0 +1,391 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/usage.md](../../packages/mermaid/src/docs/config/usage.md).
|
||||
|
||||
# Usage
|
||||
|
||||
Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
|
||||
|
||||
Diagrams can be re-rendered/modified by modifying their descriptions.
|
||||
|
||||
### CDN
|
||||
|
||||
<https://unpkg.com/mermaid/>
|
||||
|
||||
Please note that you can switch versions through the dropdown box at the top right.
|
||||
|
||||
## Using mermaid
|
||||
|
||||
For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md).
|
||||
|
||||
We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
|
||||
|
||||
**Installing and Hosting Mermaid on a Webpage**
|
||||
|
||||
**Using the npm package**
|
||||
|
||||
1. You will need to install node v16, which would have npm.
|
||||
|
||||
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
|
||||
|
||||
**Hosting mermaid on a web page.**
|
||||
|
||||
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)
|
||||
|
||||
The easiest way to integrate mermaid on a web page requires two elements:
|
||||
|
||||
- A graph definition, inside `<pre>` tags labeled `class=mermaid`. Example:
|
||||
|
||||
```html
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</pre>
|
||||
```
|
||||
|
||||
- Inclusion of the mermaid address in the html page body using a `script` tag as an ESM import, and the `mermaidAPI` call.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
```
|
||||
|
||||
**Following these directions, mermaid starts at page load and (when the page has loaded) it will locate the graph definitions inside the `pre` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
|
||||
|
||||
## Simple full example:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Notes:
|
||||
|
||||
An id attribute is also added to mermaid tags without one.
|
||||
|
||||
Mermaid can load multiple diagrams, in the same page.
|
||||
|
||||
> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
|
||||
|
||||
## Enabling Click Event and Tags in Nodes
|
||||
|
||||
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
|
||||
|
||||
**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
|
||||
|
||||
## securityLevel
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
|
||||
| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
|
||||
|
||||
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.**
|
||||
|
||||
**To change `securityLevel`, you have to call `mermaidAPI.initialize`:**
|
||||
|
||||
```javascript
|
||||
mermaidAPI.initialize({
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
```
|
||||
|
||||
### Labels out of bounds
|
||||
|
||||
If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
|
||||
whole page to load (dom + assets, particularly the fonts file).
|
||||
|
||||
```javascript
|
||||
$(document).load(function () {
|
||||
mermaid.initialize();
|
||||
});
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```javascript
|
||||
$(document).ready(function () {
|
||||
mermaid.initialize();
|
||||
});
|
||||
```
|
||||
|
||||
Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering.
|
||||
|
||||
If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
|
||||
|
||||
```css
|
||||
div.mermaid {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
```
|
||||
|
||||
### Calling `mermaid.init`
|
||||
|
||||
By default, `mermaid.init` will be called when the document is ready, finding all elements with
|
||||
`class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
|
||||
finer-grained control of this behavior, you can call `init` yourself with:
|
||||
|
||||
- a configuration object
|
||||
- some nodes, as
|
||||
- a node
|
||||
- an array-like of nodes
|
||||
- or W3C selector that will find your nodes
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
mermaid.init({ noteMargin: 10 }, '.someOtherClass');
|
||||
```
|
||||
|
||||
Or with no config object, and a jQuery selection:
|
||||
|
||||
```javascript
|
||||
mermaid.init(undefined, $('#someId .yetAnotherClass'));
|
||||
```
|
||||
|
||||
> **Warning**
|
||||
> This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
|
||||
|
||||
## Usage with webpack
|
||||
|
||||
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
|
||||
|
||||
## API usage
|
||||
|
||||
The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
|
||||
will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to
|
||||
fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
|
||||
|
||||
The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.mjs';
|
||||
mermaid.mermaidAPI.initialize({ startOnLoad: false });
|
||||
$(async function () {
|
||||
// Example of using the API var
|
||||
element = document.querySelector('#graphDiv');
|
||||
const insertSvg = function (svgCode, bindFunctions) {
|
||||
element.innerHTML = svgCode;
|
||||
};
|
||||
const graphDefinition = 'graph TB\na-->b';
|
||||
const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### Binding events
|
||||
|
||||
Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
|
||||
add those events after the graph has been inserted into the DOM.
|
||||
|
||||
The example code below is an extract of what mermaid does when using the API. The example shows how it is possible to
|
||||
bind events to an SVG when using the API for rendering.
|
||||
|
||||
```javascript
|
||||
const insertSvg = function (svgCode, bindFunctions) {
|
||||
element.innerHTML = svgCode;
|
||||
if (typeof callback !== 'undefined') {
|
||||
callback(id);
|
||||
}
|
||||
bindFunctions(element);
|
||||
};
|
||||
|
||||
const id = 'theGraph';
|
||||
|
||||
mermaidAPI.render(id, txt, insertSvg, element);
|
||||
```
|
||||
|
||||
1. The graph is generated using the render call.
|
||||
2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
|
||||
3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
|
||||
4. Insert the SVG code into the DOM for presentation.
|
||||
5. Call the binding function that binds the events.
|
||||
|
||||
## Example of a marked renderer
|
||||
|
||||
This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
|
||||
|
||||
```javascript
|
||||
const renderer = new marked.Renderer();
|
||||
renderer.code = function (code, language) {
|
||||
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
|
||||
return '<pre class="mermaid">' + code + '</pre>';
|
||||
} else {
|
||||
return '<pre><code>' + code + '</code></pre>';
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Another example in CoffeeScript that also includes the mermaid script tag in the generated markup.
|
||||
|
||||
```coffee
|
||||
marked = require 'marked'
|
||||
|
||||
module.exports = (options) ->
|
||||
hasMermaid = false
|
||||
renderer = new marked.Renderer()
|
||||
renderer.defaultCode = renderer.code
|
||||
renderer.code = (code, language) ->
|
||||
if language is 'mermaid'
|
||||
html = ''
|
||||
if not hasMermaid
|
||||
hasMermaid = true
|
||||
html += '<script src="'+options.mermaidPath+'"></script>'
|
||||
html + '<pre class="mermaid">'+code+'</pre>'
|
||||
else
|
||||
@defaultCode(code, language)
|
||||
|
||||
renderer
|
||||
```
|
||||
|
||||
## Advanced usage
|
||||
|
||||
**Syntax validation without rendering (Work in Progress)**
|
||||
|
||||
The **mermaid.parse(txt)** function validates graph definitions without rendering a graph. **[This function is still a work in progress](https://github.com/mermaid-js/mermaid/issues/1066), find alternatives below.**
|
||||
|
||||
The function **mermaid.parse(txt)**, takes a text string as an argument and returns true if the definition follows mermaid's syntax and
|
||||
false if it does not. The parseError function will be called when the parse function returns false.
|
||||
|
||||
When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
|
||||
function in order to handle the error in an application-specific way.
|
||||
|
||||
The code-example below in meta code illustrates how this could work:
|
||||
|
||||
```javascript
|
||||
mermaid.parseError = function (err, hash) {
|
||||
displayErrorInGui(err);
|
||||
};
|
||||
|
||||
const textFieldUpdated = function () {
|
||||
const textStr = getTextFromFormField('code');
|
||||
|
||||
if (mermaid.parse(textStr)) {
|
||||
reRender(textStr);
|
||||
}
|
||||
};
|
||||
|
||||
bindEventHandler('change', 'code', textFieldUpdated);
|
||||
```
|
||||
|
||||
**Alternative to mermaid.parse():**
|
||||
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
|
||||
|
||||
## Configuration
|
||||
|
||||
Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
|
||||
setting the options in mermaid.
|
||||
|
||||
1. Instantiation of the configuration using the initialize call
|
||||
2. _Using the global mermaid object_ - **Deprecated**
|
||||
3. _using the global mermaid_config object_ - **Deprecated**
|
||||
4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
|
||||
|
||||
The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
|
||||
configuration objects are described [in the mermaidAPI documentation](./setup/README.md).
|
||||
|
||||
## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
|
||||
|
||||
The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending
|
||||
on what kind of integration you use.
|
||||
|
||||
```html
|
||||
<script src="../dist/mermaid.js"></script>
|
||||
<script>
|
||||
let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
|
||||
> **Note**
|
||||
> This is the preferred way of configuring mermaid.
|
||||
|
||||
### The following methods are deprecated and are kept only for backwards compatibility.
|
||||
|
||||
## Using the mermaid object
|
||||
|
||||
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
|
||||
approach are:
|
||||
|
||||
- mermaid.startOnLoad
|
||||
- mermaid.htmlLabels
|
||||
|
||||
```javascript
|
||||
mermaid.startOnLoad = true;
|
||||
```
|
||||
|
||||
> **Warning**
|
||||
> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
|
||||
|
||||
## Using the mermaid_config
|
||||
|
||||
It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
|
||||
approach are:
|
||||
|
||||
- mermaid_config.startOnLoad
|
||||
- mermaid_config.htmlLabels
|
||||
|
||||
```javascript
|
||||
mermaid_config.startOnLoad = true;
|
||||
```
|
||||
|
||||
> **Warning**
|
||||
> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
|
||||
|
||||
## Using the mermaid.init call
|
||||
|
||||
To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
|
||||
|
||||
- mermaid_config.startOnLoad
|
||||
- mermaid_config.htmlLabels
|
||||
|
||||
```javascript
|
||||
mermaid_config.startOnLoad = true;
|
||||
```
|
||||
|
||||
> **Warning**
|
||||
> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
|
||||
Reference in New Issue
Block a user