mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3678 from emersonbottero/develop 

Improved New Documentation
This commit is contained in:
Sidharth Vinod 2022-11-02 14:27:16 +05:30 committed by GitHub
parent 7c07bc02af 05fd856d62
commit 549c2b8d04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
258 changed files with 1676 additions and 22343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/docs.yml vendored
View File

@ -21,7 +21,7 @@ jobs:
- uses: actions/setup-node@v3
name: Setup node
with:
node-version: '16'
node-version: '18'
- run: npm install -g cspell
name: Install cSpell
- run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress

1
.github/workflows/lint.yml vendored
View File

@ -39,4 +39,5 @@ jobs:
run: pnpm run lint
- name: Verify Docs
working-directory: ./packages/mermaid
run: pnpm run docs:verify

62
.github/workflows/publish-docs.yml vendored Normal file
View File

@ -0,0 +1,62 @@
name: Deploy Vitepress docs to Pages
on:
# Runs on pushes targeting the default branch
push:
branches:
- master
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
- name: Setup Node.js
uses: actions/setup-node@v3
with:
cache: pnpm
node-version: 18
- name: Install Packages
run: pnpm install --frozen-lockfile
- name: Setup Pages
uses: actions/configure-pages@v2
- name: Run Build
run: pnpm --filter mermaid run docs:build:vitepress
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: packages/mermaid/src/vitepress/.vitepress/dist
# Deployment job
deploy:
environment:
name: github-pages
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1

5
.lintstagedrc.json
View File

@ -1,6 +1,3 @@
{
"packages/mermaid/src/docs/**": ["pnpm run docs:build --git"],
"packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"],
"*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
"*.jison": ["pnpm run lint:jison"]
"!(docs/**/*)*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"]
}

11
.vscode/launch.json vendored
View File

@ -12,6 +12,17 @@
"args": ["run", "${relativeFile}"],
"smartStep": true,
"console": "integratedTerminal"
},
{
"name": "Docs generation",
"type": "node",
"request": "launch",
"args": ["src/docs.mts"],
"runtimeArgs": ["--loader", "ts-node/esm"],
"cwd": "${workspaceRoot}/packages/mermaid",
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
"smartStep": true,
"internalConsoleOptions": "openOnSessionStart"
}
]
}

27
CONTRIBUTING.md
View File

@ -32,7 +32,7 @@ We make all changes via pull requests. As we have many pull requests from develo
- Large changes reviewed by knsv or other developer asked to review by knsv
- Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (updates to the `src/docs` folder is also allowed via direct commits)
- Documentation (updates to the `package/mermaid/src/docs` folder is also allowed via direct commits)
To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
@ -67,31 +67,22 @@ flowchart LR
### The official documentation site
**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.**
If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
If you want to preview the whole documentation site on your machine:
```sh
$ npm i docsify-cli -g
cd mermaid
pnpm i
pnpm docs:dev
```
If you are more familiar with Yarn, you can use the following command:
You can now build and serve the documentation site:
```sh
$ yarn global add docsify-cli
pnpm docs:serve
```
The above command will install `docsify-cli` globally.
If the installation is successful, the command `docsify` will be available in your `PATH`.
You can now run the following command to serve the documentation site:
```sh
$ docsify serve docs
```
Once the local HTTP server is listening, you can point your browser at http://localhost:3000.
## Branching
Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop.
@ -152,7 +143,7 @@ The source files for documentation are in `/packages/mermaid/src/docs` and are w
#### Adding to or changing the documentation organization
If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `src/docs/_sidebar.md`.
If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`.
When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/

6
README.md
View File

@ -354,7 +354,11 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
A quick note from Knut Sveidqvist:
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
>
> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
>
> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
>
> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_

28
cSpell.json
View File

@ -2,21 +2,35 @@
"version": "0.2",
"language": "en",
"words": [
"blockquotes",
"customizability",
"Gantt",
"jison",
"knsv",
"Knut",
"mermiad",
"mindmap",
"Mindmaps",
"mitigations",
"sandboxed",
"Sveidqvist",
"shiki",
"verdana",
"Visio",
"mermiad"
"Visio"
],
"ignoreWords": [
"Alois",
"Klink",
"knsv",
"Knut",
"Matthieu",
"Sidharth",
"Sveidqvist",
"Vinod",
"Faber",
"Orlandoni",
"Klemm",
"Mindaugas",
"Laganeckas",
"Cuzon",
"Yash",
"Adamiecki",
"applitools",
"Asciidoctor",
@ -63,7 +77,9 @@
"Kaufmann",
"viewports",
"edgechromium",
"statediagram"
"statediagram",
"Brolin",
"Greywolf"
],
"patterns": [
{

10
docs/CHANGELOG.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/CHANGELOG.md](../packages/mermaid/src/docs/CHANGELOG.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/CHANGELOG.md](../packages/mermaid/src/docs/CHANGELOG.md).
# Change Log
@ -13,10 +17,10 @@ All changes are in descending order, beginning with the newest (latest) version.
🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0)
This version brings with it a system for [dynamic and integrated configuration of the diagram themes](./theming.md).
This version brings with it a system for [dynamic and integrated configuration of the diagram themes](config/theming.md).
The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
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](../getting-started/8.6.0_docs.md).
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](config/8.6.0_docs.md).
**These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.**

22
docs/Configuration.md
View File

@ -1,22 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/Configuration.md](../packages/mermaid/src/docs/Configuration.md).
# Configuration
Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams.
The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
## Configuration Section in the [Live Editor](https://mermaid.live/).
## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag.
## [Directives](./directives.md),
Directives allows limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
## Theme Creation:
An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams.
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes

17
docs/SUMMARY.md
View File

@ -1,17 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/SUMMARY.md](../packages/mermaid/src/docs/SUMMARY.md).
# Summary
- [mermaid](README.md)
- [FAQ](faq.md)
- [Breaking changes](breakingChanges.md)
- [Usage](usage.md)
- [Flowchart](flowchart.md)
- [Sequence diagram](sequenceDiagram.md)
- [Gantt diagram](gantt.md)
- [mermaid CLI](mermaidCLI.md)
- [Demos](demos.md)
- [mermaidAPI](mermaidAPI.md)
- [Development](development.md)
- [Upgrading](upgrading.md)
- [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook)

1629
docs/Setup.md
View File

File diff suppressed because it is too large Load Diff

15
docs/_navbar.md
View File

@ -1,15 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/\_navbar.md](../packages/mermaid/src/docs/_navbar.md).
- Getting started
- [Quick start](quickstart.md)
- [Writing more pages](more-pages.md)
- [Custom navbar](custom-navbar.md)
- [Cover page](cover.md)
- Configuration
- [Configuration](configuration.md)
- [Themes](themes.md)
- [Using plugins](plugins.md)
- [Markdown configuration](markdown.md)
- [Language highlight](language-highlight.md)

46
docs/_sidebar.md
View File

@ -1,46 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/\_sidebar.md](../packages/mermaid/src/docs/_sidebar.md).
- 📔 Introduction
- [About Mermaid](README.md)
- [Deployment](n00b-gettingStarted.md)
- [Syntax and Configuration](n00b-syntaxReference.md)
- 📊 Diagram Syntax
- [Flowchart](flowchart.md)
- [Sequence Diagram](sequenceDiagram.md)
- [Class Diagram](classDiagram.md)
- [State Diagram](stateDiagram.md)
- [Entity Relationship Diagram](entityRelationshipDiagram.md)
- [User Journey](user-journey.md)
- [Gantt](gantt.md)
- [Pie Chart](pie.md)
- [Requirement Diagram](requirementDiagram.md)
- [Gitgraph (Git) Diagram 🔥](gitgraph.md)
- [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md)
- [Mindmaps 🦺⚠️](mindmap.md)
- [Other Examples](examples.md)
- ⚙️ Deployment and Configuration
- [Tutorials](Tutorials.md)
- [API-Usage](usage.md)
- [Mermaid API Configuration](Setup.md)
- [Directives](directives.md)
- [Theming](theming.md)
- [Accessibility](accessibility.md)
- [Mermaid CLI](mermaidCLI.md)
- [Advanced usage](n00b-advanced.md)
- 📚 Misc
- [Use-Cases and Integrations](integrations.md)
- [FAQ](faq.md)
- 🙌 Contributions and Community
- [Overview for Beginners](n00b-overview.md)
- [Development and Contribution ](development.md)
- [Changelog](CHANGELOG.md)
- [Adding Diagrams ](newDiagram.md)
- [Security ](security.md)

51
docs/breakingChanges.md
View File

@ -1,51 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/breakingChanges.md](../packages/mermaid/src/docs/breakingChanges.md).
# Breaking changes
### Breaking changes from history version to latest version:
## #1
```javascript
mermaid.initialize({
sequenceDiagram:{
...
}
})
```
has been changed to
```javascript
mermaid.initialize({
sequence:{
...
}
})
```
## #2
In old versions you needed to reference a CSS file in your HTML:
```html
<link rel="stylesheet" href="mermaid.min.css" />
```
or
```html
<link rel="stylesheet" href="mermaid.forest.min.css" />
```
Now it is not needed, and there are no more CSS files in the distribution files.
You just:
```javascript
mermaid.initialize({
theme: 'forest',
});
```
and it works like a charm because now the CSS is inline with the SVG to allow simpler portability.

6
docs/development.md → docs/community/development.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/development.md](../packages/mermaid/src/docs/development.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/development.md](../../packages/mermaid/src/docs/community/development.md).
# Development and Contribution 🙌

0
vdocs/community/img/er.png → docs/community/img/er.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

10
docs/n00b-overview.md → docs/community/n00b-overview.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/n00b-overview.md](../packages/mermaid/src/docs/n00b-overview.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/n00b-overview.md](../../packages/mermaid/src/docs/community/n00b-overview.md).
# Overview for Beginners
@ -41,7 +45,7 @@ It is a relatively straightforward solution to a significant hurdle with the sof
**Nodes**
> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference)
> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](../intro/n00b-syntaxReference)
## Advantages of using Mermaid
@ -65,6 +69,6 @@ In fact one can pick up the syntax for it quite easily from the examples given a
## Mermaid is for everyone.
Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
Video [Tutorials](https://mermaid-js.github.io/mermaid/#/../config/Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.

27
docs/newDiagram.md → docs/community/newDiagram.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/newDiagram.md](../packages/mermaid/src/docs/newDiagram.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/newDiagram.md](../../packages/mermaid/src/docs/community/newDiagram.md).
# Adding a New Diagram/Chart 📊
@ -28,9 +32,8 @@ statement
In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.
```tip
Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
```
> **Note**
> Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
For more info look in the example diagram type:
@ -45,8 +48,7 @@ exports.parseError = function (err, hash) {
when parsing the `yy` object is initialized as per below:
```javascript
var parser;
parser = exampleParser.parser;
const parser = exampleParser.parser;
parser.yy = db;
```
@ -69,8 +71,8 @@ At this point when mermaid is trying to render the diagram, it will detect it as
### Setup
```javascript
var graph = require('./graphDb');
var flow = require('./parser/flow');
const graph = require('./graphDb');
const flow = require('./parser/flow');
flow.parser.yy = graph;
```
@ -91,7 +93,7 @@ graph.getEdges();
The parser is also exposed in the mermaid api by calling:
```javascript
var parser = mermaid.getParser();
const parser = mermaid.getParser();
```
Note that the parse needs a graph object to store the data as per:
@ -117,13 +119,12 @@ There are a few features that are common between the different types of diagrams
Here some pointers on how to handle these different areas.
#### [Directives](./directives.md)
#### [Directives](../config/directives.md)
Here is example handling from flowcharts:
Jison:
```jison
/* lexical grammar */
%lex
%x open_directive
@ -180,6 +181,7 @@ The syntax for adding title and description looks like this:
In a similar way to the directives the jison syntax are quite similar between the diagrams.
```jison
* lexical grammar */
%lex
%x acc_title
@ -199,6 +201,7 @@ statement
: acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
```
The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
@ -226,7 +229,7 @@ addSVGAccessibilityFields(parser.yy, svg, id);
## Theming
Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](./theming.md).
Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](../config/theming.md).
When adding themes to a diagram it comes down to a few important locations in the code.

6
docs/security.md → docs/community/security.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/security.md](../packages/mermaid/src/docs/security.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/security.md](../../packages/mermaid/src/docs/community/security.md).
# Security

105
docs/8.6.0_docs.md → docs/config/8.6.0_docs.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/8.6.0_docs.md](../packages/mermaid/src/docs/8.6.0_docs.md).
> **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
@ -8,8 +12,8 @@
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](./Setup.md).
This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams.
`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](../config/configuration).
This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](directives), 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.**
@ -48,9 +52,8 @@ Implementors can only modify configurations using directives, and cannot change
The Two types of directives: are `init` (or `initialize`) and `wrap`.
```note
All directives are enclosed in `%%{ }%%`
```
> **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.
@ -62,18 +65,17 @@ Older versions of mermaid will not parse directives because `%%` will comment ou
| --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
| 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.
```
> **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**:
@ -107,19 +109,18 @@ When deployed within code, init is called before the graph/diagram description.
| --------- | ----------------------------- | --------- | -------- | ---------- |
| 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}%%` .
```
> **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%20text.png)
!\[Image showing wrapped text]\(img/wrapped text.png)
# Resetting Configurations:
@ -143,7 +144,7 @@ Example of **assignWithDepth**:
Example of **object.Assign**:
![Image showing object.assign without depth](img/object.assign%20without%20depth.png)
!\[Image showing object.assign without depth]\(img/object.assign without depth.png)
• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height.
@ -157,13 +158,12 @@ Example of **object.Assign**:
| --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
| `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
```
> **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
@ -171,9 +171,8 @@ Default value: will mirror Global Config
| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
| `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |
```note
Returns any values in siteConfig.
```
> **Note**
> Returns any values in siteConfig.
## setConfig
@ -181,11 +180,10 @@ Returns any values in siteConfig.
| ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- |
| `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.
```
> **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
@ -193,9 +191,8 @@ siteConfig value.
| ----------- | --------------------------- | ----------- | ------------------------------- |
| `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |
```note
Returns any values in currentConfig.
```
> **Note**
> Returns any values in currentConfig.
## sanitize
@ -203,10 +200,9 @@ Returns any values in currentConfig.
| ---------- | ---------------------------------------- | -------------- | ------ |
| `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.
```
> **Note**
> modifies options in-place
> Ensures options parameter does not attempt to override siteConfig secure keys.
## reset
@ -220,8 +216,7 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
| --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- |
| `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()`)
```
> **Note**
> default: current siteConfig (optional, default `getSiteConfig()`)
## For more information, read [Setup](Setup.md).
## For more information, read [Setup](setup/README).

10
docs/Tutorials.md → docs/config/Tutorials.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/Tutorials.md](../packages/mermaid/src/docs/Tutorials.md).
> **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
@ -6,7 +10,7 @@ This is list of publicly available Tutorials for using Mermaid.JS . This is inte
**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-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.
For most purposes, you can use the [Live Editor](https://mermaid.live), to quickly and easily render a diagram.
## Live-Editor Tutorials
@ -24,7 +28,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati
## Mermaid with HTML
Examples are provided in [Getting Started](n00b-gettingStarted.md)
Examples are provided in [Getting Started](../intro/n00b-gettingStarted)
**CodePen Examples:**

6
docs/accessibility.md → docs/config/accessibility.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/accessibility.md](../packages/mermaid/src/docs/accessibility.md).
> **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

6
docs/developer-docs/configuration.md → docs/config/configuration.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/developer-docs/configuration.md](../../packages/mermaid/src/docs/developer-docs/configuration.md).
> **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

22
docs/directives.md → docs/config/directives.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/directives.md](../packages/mermaid/src/docs/directives.md).
> **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
@ -84,7 +88,13 @@ Here the directive declaration will set the `logLevel` to `debug` and the `theme
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:
```mmd2
```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 } }%%
...
@ -92,11 +102,11 @@ Note: You can use 'init' or 'initialize' as both acceptable as init directives.
parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
```json5
```json
{
logLevel: 'fatal',
theme: 'dark',
startOnLoad: true,
"logLevel": "fatal",
"theme": "dark",
"startOnLoad": true
}
```

0
docs/img/accessibility-div-example-2.png → docs/config/img/accessibility-div-example-2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 120 KiB

0
docs/img/accessibility-div-example.png → docs/config/img/accessibility-div-example.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 119 KiB

0
docs/img/assignWithDepth.png → docs/config/img/assignWithDepth.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

0
docs/img/object.assign without depth.png → docs/config/img/object.assign without depth.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

0
docs/img/python-mermaid-integration.png → docs/config/img/python-mermaid-integration.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

0
docs/img/wrapped text.png → docs/config/img/wrapped text.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 103 KiB

9
docs/config/mermaidCLI.md Normal file
View 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.

6
docs/n00b-advanced.md → docs/config/n00b-advanced.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/n00b-advanced.md](../packages/mermaid/src/docs/n00b-advanced.md).
> **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..)

13
docs/config/setup/README.md Normal file
View 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
View 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:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191)
---
### 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:136](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L136)
---
### 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:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
---
### 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:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
---
### 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:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L151)
---
### saveConfigFromInitialize
▸ **saveConfigFromInitialize**(`conf`): `void`
#### Parameters
| Name | Type |
| :----- | :-------------- |
| `conf` | `MermaidConfig` |
#### Returns
`void`
#### Defined in
[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
---
### 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:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
---
### 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:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
---
### 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:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)

56
docs/config/setup/modules/defaultConfig.md Normal file
View 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:1882](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1882)
---
### 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)

123
docs/config/setup/modules/mermaidAPI.md Normal file
View File

@ -0,0 +1,123 @@
> **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`) => `Promise`<`void`> ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `container?`: `Element`) => `Promise`<`void`> ; `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:546](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L546)
## Functions
### decodeEntities
▸ **decodeEntities**(`text`): `string`
#### Parameters
| Name | Type |
| :----- | :------- |
| `text` | `string` |
#### Returns
`string`
#### Defined in
[mermaidAPI.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L72)
---
### encodeEntities
▸ **encodeEntities**(`text`): `string`
#### Parameters
| Name | Type |
| :----- | :------- |
| `text` | `string` |
#### Returns
`string`
#### Defined in
[mermaidAPI.ts:46](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L46)

47
docs/theming.md → docs/config/theming.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/theming.md](../packages/mermaid/src/docs/theming.md).
> **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
@ -152,9 +156,8 @@ You can create your own themes, by changing any of the given variables below. If
## Theme Variables Reference Table
```note
Variables that are unique to some diagrams can be affected by changes in Theme Variables
```
> **Note**
> Variables that are unique to some diagrams can be affected by changes in Theme Variables
| Variable | Default/Base/Factor value | Calc | Description |
| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
@ -371,42 +374,6 @@ In the following examples, the directive `init` is used, with the `theme` being
end
```
```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

54
docs/usage.md → docs/config/usage.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/usage.md](../packages/mermaid/src/docs/usage.md).
> **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
@ -14,7 +18,7 @@ Please note that you can switch versions through the dropdown box at the top rig
## 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.md).
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).
We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
@ -37,7 +41,7 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
**Hosting mermaid on a web page.**
> Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted)
The easiest way to integrate mermaid on a web page requires two elements:
@ -115,10 +119,9 @@ Values:
- **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.
```
> **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.**
@ -183,9 +186,8 @@ Or with no config object, and a jQuery selection:
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.
```
> **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
@ -224,7 +226,7 @@ The example code below is an extract of what mermaid does when using the API. Th
bind events to an SVG when using the API for rendering.
```javascript
var insertSvg = function (svgCode, bindFunctions) {
const insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode;
if (typeof callback !== 'undefined') {
callback(id);
@ -232,7 +234,7 @@ var insertSvg = function (svgCode, bindFunctions) {
bindFunctions(element);
};
var id = 'theGraph';
const id = 'theGraph';
mermaidAPI.render(id, txt, insertSvg, element);
```
@ -248,7 +250,7 @@ mermaidAPI.render(id, txt, insertSvg, element);
This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
```javascript
var renderer = new marked.Renderer();
const renderer = new marked.Renderer();
renderer.code = function (code, language) {
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<pre class="mermaid">' + code + '</pre>';
@ -299,8 +301,8 @@ mermaid.parseError = function (err, hash) {
displayErrorInGui(err);
};
var textFieldUpdated = function () {
var textStr = getTextFromFormField('code');
const textFieldUpdated = function () {
const textStr = getTextFromFormField('code');
if (mermaid.parse(textStr)) {
reRender(textStr);
@ -324,7 +326,7 @@ setting the options in mermaid.
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.md).
configuration objects are described [in the mermaidAPI documentation](setup/README).
## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
@ -339,9 +341,8 @@ on what kind of integration you use.
</script>
```
```tip
This is the preferred way of configuring mermaid.
```
> **Note**
> This is the preferred way of configuring mermaid.
### The following methods are deprecated and are kept only for backwards compatibility.
@ -357,9 +358,8 @@ approach are:
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.
```
> **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
@ -373,9 +373,8 @@ approach are:
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.
```
> **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
@ -388,6 +387,5 @@ To set some configuration via the mermaid object. The two parameters that are su
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.
```
> **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.

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

@ -1,927 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md](../../packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md).
---
sort: 3
title: Flowchart
---
# Flowcharts - Basic Syntax
## Graph
This statement declares the direction of the flowchart, either from top to bottom (`TD` or `TB`):
```mermaid-example
graph TD
Start --> Stop
```
```mermaid
graph TD
Start --> Stop
```
or left to right (`LR`):
```mermaid-example
graph LR
Start --> Stop
```
```mermaid
graph LR
Start --> Stop
```
## Flowchart Orientation
Possible FlowChart orientations are:
- TB - top to bottom
- TD - top-down (same as top to bottom)
- BT - bottom to top
- RL - right to left
- LR - left to right
## Flowcharts
This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs.
Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.
> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
## Nodes and shapes
### A node (default)
```mermaid-example
graph LR
id
```
```mermaid
graph LR
id
```
> **Note** The id is what is displayed in the box.
### A node with text
It is also possible to set text in the box that differs from the id. If this is done several times, only the last text
found for the node will be rendered. Also if you define edges for the node later on, you can omit text definitions. The
text previously defined will be used when rendering the box.
```mermaid-example
graph LR
id1[This is the text in the box]
```
```mermaid
graph LR
id1[This is the text in the box]
```
## Node Shapes
### A node with round edges
```mermaid-example
graph LR
id1(This is the text in the box)
```
```mermaid
graph LR
id1(This is the text in the box)
```
### A stadium-shaped node
```mermaid-example
graph LR
id1([This is the text in the box])
```
```mermaid
graph LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```mermaid-example
graph LR
id1[[This is the text in the box]]
```
```mermaid
graph LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```mermaid-example
graph LR
id1[(Database)]
```
```mermaid
graph LR
id1[(Database)]
```
### A node in the form of a circle
```mermaid-example
graph LR
id1((This is the text in the circle))
```
```mermaid
graph LR
id1((This is the text in the circle))
```
### A node in an asymmetric shape
```mermaid-example
graph LR
id1>This is the text in the box]
```
```mermaid
graph LR
id1>This is the text in the box]
```
Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
### A node (rhombus)
```mermaid-example
graph LR
id1{This is the text in the box}
```
```mermaid
graph LR
id1{This is the text in the box}
```
### A hexagonal node
```mermaid-example
graph LR
id1{{This is the text in the box}}
```
```mermaid
graph LR
id1{{This is the text in the box}}
```
### Parallelogram
```mermaid-example
graph TD
id1[/This is the text in the box/]
```
```mermaid
graph TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```mermaid-example
graph TD
id1[\This is the text in the box\]
```
```mermaid
graph TD
id1[\This is the text in the box\]
```
### Trapezoid
```mermaid-example
graph TD
A[/Christmas\]
```
```mermaid
graph TD
A[/Christmas\]
```
### Trapezoid alt
```mermaid-example
graph TD
B[\Go shopping/]
```
```mermaid
graph TD
B[\Go shopping/]
```
## Links between nodes
Nodes can be connected with links/edges. It is possible to have different types of links, or attach a text string on a link.
### Link with arrow head
```mermaid-example
graph LR
A-->B
```
```mermaid
graph LR
A-->B
```
### Open link
```mermaid-example
graph LR
A --- B
```
```mermaid
graph LR
A --- B
```
### Text on links
```mermaid-example
graph LR
A-- This is the text! ---B
```
```mermaid
graph LR
A-- This is the text! ---B
```
or
```mermaid-example
graph LR
A---|This is the text|B
```
```mermaid
graph LR
A---|This is the text|B
```
### Link with arrow head and text
```mermaid-example
graph LR
A-->|text|B
```
```mermaid
graph LR
A-->|text|B
```
or
```mermaid-example
graph LR
A-- text -->B
```
```mermaid
graph LR
A-- text -->B
```
### Dotted link
```mermaid-example
graph LR;
A-.->B;
```
```mermaid
graph LR;
A-.->B;
```
### Dotted link with text
```mermaid-example
graph LR
A-. text .-> B
```
```mermaid
graph LR
A-. text .-> B
```
### Thick link
```mermaid-example
graph LR
A ==> B
```
```mermaid
graph LR
A ==> B
```
### Thick link with text
```mermaid-example
graph LR
A == text ==> B
```
```mermaid
graph LR
A == text ==> B
```
### Chaining of links
It is possible to declare many links on the same line as per below:
```mermaid-example
graph LR
A -- text --> B -- text2 --> C
```
```mermaid
graph LR
A -- text --> B -- text2 --> C
```
It is also possible to declare multiple nodes links in the same line as per below:
```mermaid-example
graph LR
a --> b & c--> d
```
```mermaid
graph LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example
graph TB
A & B--> C & D
```
```mermaid
graph TB
A & B--> C & D
```
If you describe the same diagram using the the basic syntax, it will take four lines:
```mermaid-example
graph TB
A --> C
A --> D
B --> C
B --> D
```
```mermaid
graph TB
A --> C
A --> D
B --> C
B --> D
```
A word of warning, one could go overboard with this, making the graph harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
### New arrow types
When using flowchart instead of graph there are new types of arrows supported as per below:
```mermaid-example
flowchart LR
A --o B
B --x C
```
```mermaid
flowchart LR
A --o B
B --x C
```
### Multi directional arrows
When using flowchart instead of graph there is the possibility to use multidirectional arrows.
```mermaid-example
flowchart LR
A o--o B
B <--> C
C x--x D
```
```mermaid
flowchart LR
A o--o B
B <--> C
C x--x D
```
### Minimum length of a link
Each node in the flowchart is ultimately assigned to a rank in the rendered
graph, i.e. to a vertical or horizontal level (depending on the flowchart
orientation), based on the nodes to which it is linked. By default, links
can span any number of ranks, but you can ask for any link to be longer
than the others by adding extra dashes in the link definition.
In the following example, two extra dashes are added in the link from node _B_
to node _E_, so that it spans two more ranks than regular links:
```mermaid-example
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
```
```mermaid
graph TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
```
> **Note** The rendering engine may cause some links to be longer than
> the number of ranks requested in order to accommodate the overall topology.
When the link label is written in the middle of the link, the extra dashes must
be added on the right side of the link. The following example is equivalent to
the previous one:
```mermaid-example
graph TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
```
```mermaid
graph TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
```
For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table:
| Length | 1 | 2 | 3 |
| ----------------- | :----: | :-----: | :------: |
| Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` |
| Dotted | `-.-` | `-..-` | `-...-` |
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
## Special characters that break syntax
Use quotes around text in order to render more troublesome characters, as in the example below:
```mermaid-example
graph LR
id1["This is the (text) in the box"]
```
```mermaid
graph LR
id1["This is the (text) in the box"]
```
### Entity codes to escape characters
Special characters (including Unicode) can be included by using HTML escaping syntax:
```mermaid-example
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
```mermaid
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
## Subgraphs
subgraph title
graph definition
end
An example:
```mermaid-example
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
```mermaid
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
You can also set an explicit id for the subgraph:
```mermaid-example
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
```mermaid
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
## Flowcharts
With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
```mermaid-example
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
## Interaction
A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
click nodeId callback
click nodeId call callback()
- nodeId is the id of the node
- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.
```html
<script>
const callback = function (nodeId) {
alert('A callback was triggered on ' + nodeId);
};
</script>
```
Examples of tooltip usage:
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
```mermaid-example
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link"
```
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link"
```
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
```mermaid-example
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
```
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
D-->E;
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
```
Beginner's tip—here's a full example of using interactive links in HTML:
```html
<body>
<pre class="mermaid">
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script>
const callback = function () {
alert('A callback was triggered');
};
const config = {
startOnLoad: true,
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'cardinal',
},
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>
```
### Comments
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including all punctuation and any flow syntax.
```mermaid-example
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
```
```mermaid
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
```
## Styling and classes
### Styling links
It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links
have no ids in the same way as nodes, some other way of attaching style is required.
So instead of ids, the order number of when the link was defined in the graph is used, starting with zero. Here's a linkStyle statement that would apply style to the fourth link in the graph:
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
You can specify a `default` to apply to all links, or you can give a comma-separated list of link order numbers.
Instead of giving a styles option, you can also use custom d3 curve types with the following syntax:
linkStyle default|numList|num interpolate curveType
If you want to add both D3 and style options, instead of writing:
linkStyle default interpolate cardinal
linkStyle default stroke:#ff3,stroke-width:4px,color:red;
You can combine them:
linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;
### Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to a node.
```mermaid-example
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
#### Classes
More convenient than defining the style every time is to define a class of styles and attach this class reference to multiple nodes.
here's a class definition:
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
and then attaching this class to a node is simply:
class nodeId1 className;
It is also possible to attach a class to multiple nodes in one statement:
class nodeId1,nodeId2 className;
An even shorter form of adding a class is to attach the classname to the node using the `:::`operator:
```mermaid-example
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
```
```mermaid
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
```
### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition:
**Example style**
```css
.cssClass > rect {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 4px;
}
```
**Example definition**
```mermaid-example
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
```mermaid
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
### Default class
If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
## Basic support for fontawesome
It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
```mermaid-example
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
```
```mermaid
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
```
## Graph declarations with spaces between vertices and link and without semicolon
- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges.
```mermaid-example
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
```mermaid
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
## Configuration...
Is it possible to adjust the width of the rendered flowchart.
This is done by defining **mermaid.flowchartConfig**, or by the CLI to use a json file with the configuration (which is described in the mermaidCLI page).
In Javascript config parameters can be set by using `mermaid.flowchartConfig`:
```javascript
mermaid.flowchartConfig = {
width: '100%',
};
```

BIN
docs/img/Configuration.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/img/Editing-process.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
docs/img/EditingHistory+Links.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
docs/img/GitHub-Mark-32px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 878 B

BIN
docs/img/Live-Editor-Usage.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
docs/img/book-banner-post-release.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

BIN
docs/img/book-banner-post-release.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 809 KiB

BIN
docs/img/book-banner-pre-release.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
docs/img/book-banner-pre-release.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 809 KiB

BIN
docs/img/class.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/img/flow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB

BIN
docs/img/gantt.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/img/git.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/img/n00b-firstFlow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/img/new-diagrams.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
docs/img/sequence.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/img/simple-er.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.8 KiB

BIN
docs/img/user-journey.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/img/without wrap.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 155 KiB

192
docs/index.html
View File

@ -1,192 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/index.html](../packages/mermaid/src/docs/index.html).--><head>
<meta charset="UTF-8" />
<title>
mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
gantt charts and git graphs.
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="description"
content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
/>
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta property="og:title" content="Mermaid" />
<meta property="og:url" content="https://mermaid-js.github.io/mermaid/" />
<meta property="og:image" content="https://mermaid-js.github.io/mermaid/img/header.png" />
<meta
property="og:description"
content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
/>
<meta property="og:type" content="website" />
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
/>
<script
defer=""
data-domain="mermaid-js.github.io"
src="https://plausible.io/js/plausible.js"
></script>
<script>
const require = {
paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' },
};
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"
integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.min.js"
integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.js"
integrity="sha512-u4eMtetNbBJvHXdLXs2kWZvJiVlg3cmkVcxrLzSPa1eNFuHygPYvyMWyK9PsD6Eq2MZSo+mTyjds8uuhPzVxHA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
exports = {};
</script>
<script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
<style>
.markdown-section {
max-width: 1200px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
window.mermaid = mermaid;
</script>
<script>
let initEditor = exports.default;
let parser = new DOMParser();
let currentCodeExample = 0;
let colorize = [];
let num = 0;
function colorizeEverything(html) {
initEditor(monaco);
return new Promise((resolve, reject) => {
monaco.editor.setTheme('mermaid');
const parsed = parser.parseFromString(html, 'text/html').body;
Promise.all(
[...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
monaco.editor.colorize(codeBlock.innerText, 'mermaid')
)
).then((result) => {
parsed
.querySelectorAll('pre[id*="code"]')
.forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
resolve(parsed.innerHTML);
});
});
}
function escapeHTML(html) {
return html
.replaceAll('&', '&amp;')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&apos;');
}
window.$docsify = {
search: 'auto',
name: 'mermaid',
repo: 'https://github.com/mermaid-js/mermaid',
loadSidebar: true,
mergeNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
markdown: {
renderer: {
code: function (code, lang) {
if (lang === 'mermaid-example') {
currentCodeExample++;
colorize.push(currentCodeExample);
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') {
// TODO: This will need to be updated when render is async.
return (
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
);
}
return this.origin.code.apply(this, arguments);
},
heading: function (text) {
if (text.includes('THIS IS AN AUTOGENERATED FILE. DO NOT EDIT')) {
return '';
}
return this.origin.heading.apply(this, arguments);
},
},
},
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
const editHtml = '[:memo: Edit this Page](' + url + ')\n';
return editHtml + html;
});
hook.afterEach(function (html, next) {
next(html);
(async () => {
while (!window.hasOwnProperty('monaco')) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
colorizeEverything(html).then(
(newHTML) =>
(document.querySelector('article.markdown-section').innerHTML = newHTML)
);
})();
});
},
],
};
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {
logLevel: 4,
startOnLoad: false,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
};
if (isDarkMode) {
conf.theme = 'dark';
}
mermaid.initialize(conf);
</script>
<script>
window.onhashchange = function (a) {
//code
if (location) {
ga('send', 'pageview', location.hash);
}
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
</body>
</html>

0
docs/img/Code-Preview-Config.png → docs/intro/img/Code-Preview-Config.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 145 KiB

After

Width:  |  Height:  |  Size: 145 KiB

0
docs/img/Live-Editor-Choices.png → docs/intro/img/Live-Editor-Choices.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

0
docs/img/book-banner-post-release.jpg → docs/intro/img/book-banner-post-release.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

107
docs/README.md → docs/intro/index.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/README.md](../packages/mermaid/src/docs/README.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/index.md](../../packages/mermaid/src/docs/intro/index.md).
# About Mermaid
@ -6,9 +10,9 @@
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](n00b-syntaxReference).
<img src="img/header.png" alt="" />
<img src="/header.png" alt="" />
[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
@ -26,12 +30,12 @@ Diagramming and documentation costs precious developer time and gets outdated qu
But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/>
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
[Tutorials](./Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
[Tutorials](../config/Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../misc/integrations.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 🔌 [Plug-Ins](../misc/integrations.md)
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
@ -47,7 +51,7 @@ In our release process we rely heavily on visual regression tests using [applito
## Diagram Types
### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax)
### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
```mermaid-example
graph TD;
@ -65,9 +69,7 @@ graph TD;
C-->D;
```
![Flowchart](img/flow.png)
### [Sequence diagram](./sequenceDiagram.md)
### [Sequence diagram](../syntax/sequenceDiagram.md)
```mermaid-example
sequenceDiagram
@ -97,9 +99,7 @@ sequenceDiagram
Bob-->>John: Jolly good!
```
![Sequence diagram](img/sequence.png)
### [Gantt diagram](./gantt.md)
### [Gantt diagram](../syntax/gantt.md)
```mermaid-example
gantt
@ -127,9 +127,7 @@ Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
![Gantt diagram](img/gantt.png)
### [Class diagram](./classDiagram.md)
### [Class diagram](../syntax/classDiagram.md)
```mermaid-example
classDiagram
@ -165,8 +163,6 @@ Class01 : int gorilla
Class08 <--> C2: Cool label
```
![Class diagram](img/class.png)
### Git graph
```mermaid-example
@ -195,7 +191,7 @@ Class08 <--> C2: Cool label
commit
```
### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
```mermaid-example
erDiagram
@ -213,9 +209,7 @@ erDiagram
```
![ER diagram](img/simple-er.png)
### [User Journey Diagram](./user-journey.md)
### [User Journey Diagram](../syntax/userJourney.md)
```mermaid-example
journey
@ -241,13 +235,11 @@ journey
Sit down: 5: Me
```
![Journey diagram](img/user-journey.png)
## Installation
**In depth guides and examples can be found at [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
**In depth guides and examples can be found at [Getting Started](n00b-gettingStarted) and [Usage](../config/usage).**
**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).**
**It would also be helpful to learn more about mermaid's [Syntax](n00b-syntaxReference).**
### CDN
@ -264,12 +256,12 @@ Latest Version: <https://unpkg.com/browse/mermaid@8.8.0/>
To Deploy Mermaid:
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. You can then add mermaid as a dev dependency using this command:
`yarn add --dev mermaid`
2. Install mermaid
- NPM: `npm i mermaid`
- Yarn: `yarn add mermaid`
- Pnpm: `pnpm add mermaid`
### [Mermaid API](./Setup.md):
### [Mermaid API](../config/setup/README):
**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
@ -282,7 +274,7 @@ To Deploy Mermaid:
**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
**Examples can be found at** [Other examples](/examples)
**Examples can be found at** [Other examples](../syntax/examples)
## Sibling projects
@ -308,22 +300,26 @@ Don't hesitate to contact me if you want to get involved!
## For contributors
### Setup
### Requirements
```sh
yarn install
```
- [volta](https://volta.sh/) to manage node versions.
- [Node.js](https://nodejs.org/en/). `volta install node`
- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
### Build
## Development Installation
```sh
yarn build:watch
```bash
git clone git@github.com:mermaid-js/mermaid.git
cd mermaid
# npx is required for first install as volta support for pnpm is not added yet.
npx pnpm install
pnpm test
```
### Lint
```sh
yarn lint
pnpm lint
```
We use [eslint](https://eslint.org/).
@ -332,7 +328,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/
### Test
```sh
yarn test
pnpm test
```
Manual test in browser: open `dist/index.html`
@ -359,7 +355,7 @@ The above command generates files into the `dist` folder and publishes them to \
Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
Detailed information about how to contribute can be found in the [contribution guide](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
## Security and safe diagrams
@ -377,10 +373,33 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
A quick note from Knut Sveidqvist:
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
>
> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
>
> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
>
> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
---
_Mermaid was created by Knut Sveidqvist for easier documentation._
<style scoped>
#contributors + p,
#about-mermaid + p + p + blockquote + img + p
{
display: flex
}
#contributors + p a,
#about-mermaid + p + p + blockquote + img + p a
{
margin: 0 0.5rem
}
.dark #VPContent > div > div > div.content > div > main > div > div > img
{
filter: invert(1) hue-rotate(217deg) contrast(0.72);
}
</style>

42
docs/n00b-gettingStarted.md → docs/intro/n00b-gettingStarted.md
View File

@ -1,35 +1,59 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/n00b-gettingStarted.md](../packages/mermaid/src/docs/n00b-gettingStarted.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-gettingStarted.md](../../packages/mermaid/src/docs/intro/n00b-gettingStarted.md).
# A Mermaid User-Guide for Beginners
Mermaid is composed of three parts: Deployment, Syntax and Configuration.
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) would be of great help to the beginner.
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](n00b-syntaxReference.md) would be of great help to the beginner.
> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
**Absolute beginners are advised to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
**Absolute beginners are advised to view the Video [Tutorials](../config/Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
## Four ways of using mermaid:
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
2. Using [mermaid plugins](./integrations.md) with programs you are familiar with.
2. Using [mermaid plugins](../misc/integrations.md) with programs you are familiar with.
3. Calling the Mermaid JavaScript API.
4. Deploying Mermaid as a dependency.
**Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.**
> More in depth information can be found at [Usage](./usage.md).
> More in depth information can be found at [Usage](../config/usage.md).
## 1. Using the Live Editor
Available at [mermaid.live](https://mermaid.live)
![EditingProcess](./img/Editing-process.png)
```mermaid-example
graph TD
A[Enter Chart Definition] --> B(Preview)
B --> C{decide}
C --> D[Keep]
C --> E[Edit Definition]
E --> B
D --> F[Save Image and Code]
F --> B
```
```mermaid
graph TD
A[Enter Chart Definition] --> B(Preview)
B --> C{decide}
C --> D[Keep]
C --> E[Edit Definition]
E --> B
D --> F[Save Image and Code]
F --> B
```
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](Setup.md) page.
The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README) page.
![Code,Config and Preview](./img/Code-Preview-Config.png)
@ -61,9 +85,9 @@ and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/
## 2. Using Mermaid Plugins:
You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](./integrations.md).
You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../misc/integrations.md).
**This is covered in greater detail in the [Usage section](usage.md)**
**This is covered in greater detail in the [Usage section](../config/usage.md)**
## 3. Calling the JavaScript API

38
docs/n00b-syntaxReference.md → docs/intro/n00b-syntaxReference.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/n00b-syntaxReference.md](../packages/mermaid/src/docs/n00b-syntaxReference.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-syntaxReference.md](../../packages/mermaid/src/docs/intro/n00b-syntaxReference.md).
# Diagram Syntax
@ -6,7 +10,7 @@ Mermaid's syntax is used to create diagrams. You'll find that it is not too tric
Syntax, together with Deployment and Configuration constitute the whole of Mermaid.
Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area.
Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid.live), it is also a great practice area.
## Syntax Structure
@ -38,33 +42,33 @@ erDiagram
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
The [Getting Started](n00b-gettingStarted) section can also provide some practical examples of mermaid syntax.
## Diagram Breaking
One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
| Diagram Breakers | Reason | Solution |
| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- |
| **Comments** | | |
| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](./directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
| **Flow-Charts** | | |
| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking |
| Diagram Breakers | Reason | Solution |
| -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------- |
| **Comments** | | |
| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". |
| **Flow-Charts** | | |
| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking |
### Mermaid Live Editor
Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid.live).
# Configuration
Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments.
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes.
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README) here. It includes themes.
This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](n00b-gettingStarted) methods.
### Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
### Configuration Section in the [Live Editor](https://mermaid.live).
Here you can edit certain values to change the behavior and appearance of the diagram.
@ -72,10 +76,10 @@ Here you can edit certain values to change the behavior and appearance of the di
Used when Mermaid is called via an API, or through a `<script>` tag.
### [Directives](./directives.md),
### [Directives](../config/directives.md),
Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
### [Theme Manipulation](./theming.md):
### [Theme Manipulation](../config/theming.md):
An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.

1
docs/introduction.md
View File

@ -1 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/introduction.md](../packages/mermaid/src/docs/introduction.md).

BIN
docs/landing/class.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
docs/landing/cover.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/landing/er.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/landing/flowchart.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/landing/gantt.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 42 KiB

337
docs/landing/index.html
View File

@ -1,337 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/landing/index.html](../../packages/mermaid/src/docs/landing/index.html).--><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>The Official Guide to Mermaid.js</title>
<meta
name="description"
content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code"
/>
<meta
name="keywords"
content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts"
/>
<meta name="author" content="Knut Sveidqvist, Ashish Jain" />
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
<!--Replace with your tailwind.css once created-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
<!-- Define your gradient here - use online tools to find a gradient matching your branding-->
<style>
.gradient {
background: linear-gradient(90deg, #7557c9 0%, #f4f4f4 100%);
}
.p-shadow {
text-shadow: #7557c9 0px 0px 5px;
}
</style>
<!-- Google Analytics -->
<script>
// prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-153180559-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body
class="leading-normal tracking-normal text-white gradient"
style="font-family: 'Source Sans Pro', sans-serif"
>
<!--Nav-->
<!--Hero-->
<div class="pt-24">
<div
style=""
class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center"
>
<!--Left Col-->
<div class="w-full md:w-1/2">
<div class="flex flex-col justify-center items-start text-center md:text-left">
<div class="flex flex-col items-center">
<p class="uppercase tracking-loose w-full p-shadow">MermaidPress</p>
<h1 class="my-4 text-5xl font-bold leading-tight p-shadow">
The Official Guide to Mermaid.js
</h1>
<p class="leading-normal text-2xl mb-8 p-shadow">
Learn to create complex diagrams and beautiful flowcharts easily using text and code
using Mermaid.js.
</p>
<a
href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&amp;me=&amp;qid=1628153965"
>
<button
style="background: #ffa41c; border: 1px solid #ff8f00"
class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
>
Purchase on Amazon
</button>
</a>
</div>
</div>
</div>
<!--Right Col-->
<div class="flex-1 md:w-3/5 py-6 text-center flex justify-end">
<img class="z-50" style="max-width: 350px" src="cover.jpg" />
</div>
</div>
</div>
<div class="relative -mt-0 lg:-mt-12">
<svg
viewBox="0 0 1428 174"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
opacity="0.100000001"
></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path
d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
id="Path-4"
opacity="0.200000003"
></path>
</g>
<g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M0.457,34.035 C57.086,53.198 98.208,65.809 123.822,71.865 C181.454,85.495 234.295,90.29 272.033,93.459 C311.355,96.759 396.635,95.801 461.025,91.663 C486.76,90.01 518.727,86.372 556.926,80.752 C595.747,74.596 622.372,70.008 636.799,66.991 C663.913,61.324 712.501,49.503 727.605,46.128 C780.47,34.317 818.839,22.532 856.324,15.904 C922.689,4.169 955.676,2.522 1011.185,0.432 C1060.705,1.477 1097.39,3.129 1121.236,5.387 C1161.703,9.219 1208.621,17.821 1235.4,22.304 C1285.855,30.748 1354.351,47.432 1440.886,72.354 L1441.191,104.352 L1.121,104.031 L0.457,34.035 Z"
></path>
</g>
</g>
</svg>
</div>
<section class="bg-white border-b py-8">
<div class="container max-w-5xl mx-auto m-8">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Get up to speed with using Mermaid diagrams along with real-world examples and expert tips
from the authors to facilitate a seamless development workflow
</h2>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Flowcharts is a diagram type that visualizes a process or an algorithm by showing the
steps in order, as well as the different paths the execution can take.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
<img class="z-50" src="flowchart.png" />
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="sequence-diagram.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Sequence diagrams lets you model and visualize interactions between different actors
or objects in a system, as well as the order of those interactions
</p>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
A class diagram is a graphical representation that is used to visualize and describe
an object-oriented system.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
<img class="z-50" style="" src="class.png" />
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="er.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
An entity-relationship diagram is a graphical representation that is used to
visualize the different types of entities that exist within a system.
</p>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6 flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
Use State diagrams to model and document state machines, an abstract way of
representing a system or an algorithm.
</p>
</div>
<div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
<img class="z-50" style="" src="state.png" />
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
<div class="w-full sm:w-1/2 p-6 mt-6">
<img class="z-50 w-full" style="" src="gantt.png" />
</div>
<div class="w-full sm:w-1/2 p-6 mt-6">
<div class="align-middle flex items-center">
<p class="text-3xl text-gray-800 font-normal leading-none mb-3">
A Gantt chart is a graphical representation that is used to visualize and describe
tasks (events or activities) over time.
</p>
</div>
</div>
</div>
</div>
<p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">
These were a few of the diagrams supported by Mermaid.
</p>
</section>
<section class="bg-gray-100 border-b py-8">
<div class="container mx-auto flex flex-wrap max-w-5xl mx-auto m-8 pt-4 pb-12 px-8">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Book description
</h1>
<div class="w-full mb-4">
<p class="text-black mb-4">
Mermaid lets you represent diagrams using text and code which simplifies the maintenance
of complex diagrams. This is a great option for developers as they’re more familiar with
code, rather than special tools for generating diagrams. Besides, diagrams in code
simplify maintenance and ensure that the code is supported by version control systems.
In some cases, Mermaid makes refactoring support for name changes possible while also
enabling team collaboration for review distribution and updates.
</p>
<p class="text-black mb-4">
Developers working with any system will be able to put their knowledge to work with this
practical guide to using Mermaid for documentation. The book is also a great reference
for looking up the syntax for specific diagrams when authoring diagrams.
</p>
<p class="text-black mb-4">
You’ll start by getting up to speed with the importance of accurate and visual
documentation. Next, the book introduces Mermaid and establishes how to use it to create
effective documentation. By using different tools, editors, or a custom documentation
platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later
chapters cover advanced configuration settings and theme options to manipulate your
diagram as per your needs.
</p>
<p class="text-black mb-4">
By the end of this Mermaid book, you’ll have become well-versed with the different types
of Mermaid diagrams and how they can be used in your workflows.
</p>
</div>
</div>
</section>
<section class="bg-white py-8">
<div class="container mx-auto px-2 pt-4 pb-12 text-gray-800">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
What you will learn
</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="flex flex-col sm:flex-row justify-center items-center pt-12 my-12 sm:my-4">
<div class="flex flex-col mx-4 rounded-lg bg-white mt-4 sm:-mt-6 shadow-lg z-10">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
<ul class="w-full text-base font-bold px-4">
<li class="border-b py-4 px-4">
Understand good and bad documentation, and the art of effective documentation
</li>
<li class="border-b py-4 px-4">
Become well-versed with maintaining complex diagrams with ease
</li>
<li class="border-b py-4 px-4">
Learn how to set up a custom documentation system
</li>
<li class="border-b py-4 px-4">
Learn how to implement Mermaid diagrams in your workflows
</li>
<li class="border-b py-4 px-4">
Understand how to set up themes for a Mermaid diagram for an entire site
</li>
<li class="border-b py-4 px-4">
Discover how to draw different types of diagrams such as flowcharts, class
diagrams, Gantt charts, and more
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Change the colour #f8fafc to match the previous section colour -->
<svg
class="wave-top"
viewBox="0 0 1439 147"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
<g class="wave" fill="#f8fafc">
<path
d="M1440,84 C1383.555,64.3 1342.555,51.3 1317,45 C1259.5,30.824 1206.707,25.526 1169,22 C1129.711,18.326 1044.426,18.475 980,22 C954.25,23.409 922.25,26.742 884,32 C845.122,37.787 818.455,42.121 804,45 C776.833,50.41 728.136,61.77 713,65 C660.023,76.309 621.544,87.729 584,94 C517.525,105.104 484.525,106.438 429,108 C379.49,106.484 342.823,104.484 319,102 C278.571,97.783 231.737,88.736 205,84 C154.629,75.076 86.296,57.743 0,32 L0,0 L1440,0 L1440,84 Z"
></path>
</g>
<g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
<g
transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) "
>
<path
d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
opacity="0.100000001"
></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path
d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
opacity="0.200000003"
></path>
</g>
</g>
</g>
</g>
</svg>
<section class="container mx-auto text-center py-6 mb-12">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-white p-shadow">
Purchase The Official Guide to Mermaid.js
</h1>
<div class="w-full mb-4">
<div class="h-1 mx-auto bg-white w-1/6 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<h3 class="my-4 text-3xl leading-tight">
<p class="mb-4 p-shadow">Written by Knut Sveidqvist and Ashish Jain.</p>
<p class="p-shadow">
Knut is the creator of Mermaid and both authors are active core team members of the
Mermaid open-source project.
</p>
</h3>
<a
href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&amp;me=&amp;qid=1628153965"
>
<button
style="background: #ffa41c; border: 1px solid #ff8f00"
class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
>
Purchase Now on Amazon
</button>
</a>
</section>
<!--Footer-->
</body>
</html>

BIN
docs/landing/sequence-diagram.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
docs/landing/state.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

5
docs/mermaidCLI.md
View File

@ -1,5 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/mermaidCLI.md](../packages/mermaid/src/docs/mermaidCLI.md).
# mermaid CLI
mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead.

6
docs/faq.md → docs/misc/faq.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/faq.md](../packages/mermaid/src/docs/faq.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/misc/faq.md](../../packages/mermaid/src/docs/misc/faq.md).
# Frequently Asked Questions

6
docs/integrations.md → docs/misc/integrations.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/integrations.md](../packages/mermaid/src/docs/integrations.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/misc/integrations.md](../../packages/mermaid/src/docs/misc/integrations.md).
# Integrations

0
docs/.nojekyll → docs/public/.nojekyll
View File

BIN
docs/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
docs/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

6
docs/public/favicon.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 491 491" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" style="fill:rgb(255,54,112);"/>
<path d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" style="fill:white;fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

0
docs/img/header.png → docs/public/header.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

14
docs/public/manifest.json Normal file
View File

@ -0,0 +1,14 @@
{
"short_name": "Mermaid",
"name": "Mermaid JS",
"icons": [
{
"src": "/favicon.png",
"type": "image/png",
"sizes": "512x512"
}
],
"background_color": "#6366F1",
"display": "standalone",
"theme_color": "#6366F1"
}

6
docs/public/mermaid-logo.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 491 491" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<!-- <path d="M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" style="fill:rgb(255,54,112);"/> -->
<path d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" style="fill:white;fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
docs/c4c.md → docs/syntax/c4c.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/c4c.md](../packages/mermaid/src/docs/c4c.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4c.md](../../packages/mermaid/src/docs/syntax/c4c.md).
# C4 Diagrams

8
docs/classDiagram.md → docs/syntax/classDiagram.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/classDiagram.md](../packages/mermaid/src/docs/classDiagram.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/classDiagram.md](../../packages/mermaid/src/docs/syntax/classDiagram.md).
# Class diagrams
@ -841,4 +845,4 @@ g.classGroup line {
## Configuration
`Coming soon`
`Coming soon!`

6
docs/entityRelationshipDiagram.md → docs/syntax/entityRelationshipDiagram.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/entityRelationshipDiagram.md](../packages/mermaid/src/docs/entityRelationshipDiagram.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md](../../packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md).
# Entity Relationship Diagrams

10
docs/examples.md → docs/syntax/examples.md
View File

@ -1,12 +1,16 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/examples.md](../packages/mermaid/src/docs/examples.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/examples.md](../../packages/mermaid/src/docs/syntax/examples.md).
# Examples
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](/usage?id=usage).**
**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage?id=usage).**
**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](/flowchart?id=flowcharts-basic-syntax) section.**
**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](../syntax/flowchart?id=flowcharts-basic-syntax) section.**
## Basic Pie Chart

28
docs/flowchart.md → docs/syntax/flowchart.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/flowchart.md](../packages/mermaid/src/docs/flowchart.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/flowchart.md](../../packages/mermaid/src/docs/syntax/flowchart.md).
# Flowcharts - Basic Syntax
@ -6,7 +10,7 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).
### A node (default)
@ -166,6 +170,20 @@ flowchart LR
### A hexagon node
Code:
```mermaid-example
flowchart LR
id1{{This is the text in the box}}
```
```mermaid
flowchart LR
id1{{This is the text in the box}}
```
Render:
```mermaid-example
flowchart LR
id1{{This is the text in the box}}
@ -316,12 +334,12 @@ flowchart LR
```mermaid-example
flowchart LR
A-.->B
A-.->B;
```
```mermaid
flowchart LR
A-.->B
A-.->B;
```
### Dotted link with text
@ -679,8 +697,6 @@ flowchart LR
B1 --> B2
```
**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link.
## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

8
docs/gantt.md → docs/syntax/gantt.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/gantt.md](../packages/mermaid/src/docs/gantt.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gantt.md](../../packages/mermaid/src/docs/syntax/gantt.md).
# Gantt diagrams
@ -353,7 +357,7 @@ To hide the marker, set `todayMarker` to `off`.
It is possible to adjust the margins for rendering the gantt diagram.
This is done by defining the `ganttConfig` part of the configuration object.
How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page.
How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI) page.
mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.

10
docs/gitgraph.md → docs/syntax/gitgraph.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/gitgraph.md](../packages/mermaid/src/docs/gitgraph.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md).
# Gitgraph Diagrams
@ -817,7 +821,7 @@ Here, we have changed the default main branch name to `MetroLine1`.
## Themes
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md).
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
The following are the different pre-defined theme options:
@ -827,7 +831,7 @@ The following are the different pre-defined theme options:
- `default`
- `neutral`
**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md)
**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)
Let's put them to use, and see how our sample diagram looks in different themes:
### Base Theme

0
docs/img/Gantt-excluded-days-within.png → docs/syntax/img/Gantt-excluded-days-within.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 78 KiB

0
docs/img/Gantt-long-weekend-look.png → docs/syntax/img/Gantt-long-weekend-look.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 77 KiB

6
docs/mindmap.md → docs/syntax/mindmap.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/mindmap.md](../packages/mermaid/src/docs/mindmap.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/mindmap.md](../../packages/mermaid/src/docs/syntax/mindmap.md).
# Mindmap

6
docs/pie.md → docs/syntax/pie.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/pie.md](../packages/mermaid/src/docs/pie.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/pie.md](../../packages/mermaid/src/docs/syntax/pie.md).
# Pie chart diagrams

6
docs/requirementDiagram.md → docs/syntax/requirementDiagram.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/requirementDiagram.md](../packages/mermaid/src/docs/requirementDiagram.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/requirementDiagram.md](../../packages/mermaid/src/docs/syntax/requirementDiagram.md).
# Requirement Diagram

19
docs/sequenceDiagram.md → docs/syntax/sequenceDiagram.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/sequenceDiagram.md](../packages/mermaid/src/docs/sequenceDiagram.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sequenceDiagram.md](../../packages/mermaid/src/docs/syntax/sequenceDiagram.md).
# Sequence diagrams
@ -20,11 +24,10 @@ sequenceDiagram
Alice-)John: See you later!
```
```note
A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
```
> **Note**
> A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
>
> If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\[], to enclose the word "end". i.e : (end), \[end], {end}.
## Syntax
@ -97,7 +100,7 @@ Messages can be of two displayed either solid or with a dotted line.
[Actor][Arrow][Actor]:Message text
There are eight types of arrows currently supported:
There are six types of arrows currently supported:
| Type | Description |
| ---- | ------------------------------------------------ |
@ -727,7 +730,7 @@ text.actor {
Is it possible to adjust the margins for rendering the sequence diagram.
This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
How to use the CLI is described in the [mermaidCLI](mermaidCLI) page.
How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI) page.
`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
```javascript

6
docs/stateDiagram.md → docs/syntax/stateDiagram.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/stateDiagram.md](../packages/mermaid/src/docs/stateDiagram.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/stateDiagram.md](../../packages/mermaid/src/docs/syntax/stateDiagram.md).
# State diagrams

6
docs/user-journey.md → docs/syntax/userJourney.md
View File

@ -1,4 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the source file in [packages/mermaid/src/docs/user-journey.md](../packages/mermaid/src/docs/user-journey.md).
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/userJourney.md](../../packages/mermaid/src/docs/syntax/userJourney.md).
# User Journey Diagram

Some files were not shown because too many files have changed in this diff Show More