mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
docs: new Documentation
This commit is contained in:
Emerson Bottero
parent
57b883c7dd
commit
cbcf7f8a11
3
.gitignore
vendored
3
.gitignore
vendored
@ -32,3 +32,6 @@ cypress/snapshots/
|
||||
.eslintcache
|
||||
.tsbuildinfo
|
||||
tsconfig.tsbuildinfo
|
||||
|
||||
#docs generate from code
|
||||
packages/mermaid/docs/config/setup
|
||||
@ -1,15 +1,14 @@
|
||||
import { version } from '../../package.json';
|
||||
import ExampleMarkdown from './mermaid-markdown-all';
|
||||
import MermaidMarkdown from './mermaid-markdown-all';
|
||||
import { defineConfig } from 'vitepress';
|
||||
import { update } from 'lodash';
|
||||
|
||||
export default defineConfig({
|
||||
lang: 'en-US',
|
||||
title: 'Mermaid',
|
||||
description: 'Create diagrams and visualizations using text and code.',
|
||||
base: '/mermaid-docs/',
|
||||
lastUpdated: true,
|
||||
markdown: ExampleMarkdown,
|
||||
markdown: MermaidMarkdown,
|
||||
ignoreDeadLinks: true, //TODO: try to fixe those in autogenerated docs
|
||||
themeConfig: {
|
||||
nav: nav(),
|
||||
|
||||
@ -21,14 +20,6 @@ export default defineConfig({
|
||||
// "/misc/": sidebarMisc(),
|
||||
// "/community/": sidebarCommunity(),
|
||||
},
|
||||
|
||||
// TODO: update to mermaid
|
||||
editLink: {
|
||||
pattern: 'https://github.com/emersonbottero/mermaid/edit/develop/vdocs/:path',
|
||||
text: 'Edit this page on GitHub',
|
||||
},
|
||||
|
||||
socialLinks: [{ icon: 'github', link: 'https://github.com/emersonbottero/mermaid' }],
|
||||
},
|
||||
});
|
||||
|
||||
@ -56,7 +47,7 @@ function nav() {
|
||||
},
|
||||
{
|
||||
text: 'Contributing',
|
||||
link: 'https://github.com/knsv/mermaid/issues/866',
|
||||
link: 'https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -85,6 +76,10 @@ function sidebarAll() {
|
||||
...sidebarConfig(),
|
||||
...sidebarMisc(),
|
||||
...sidebarCommunity(),
|
||||
// {
|
||||
// text: "Generated",
|
||||
// items: [{ text: "modules", link: "docs/code/modules" }],
|
||||
// },
|
||||
];
|
||||
}
|
||||
|
||||
@ -122,12 +117,13 @@ function sidebarConfig() {
|
||||
items: [
|
||||
{ text: 'Tutorials', link: '/config/Tutorials' },
|
||||
{ text: 'API-Usage', link: '/config/usage' },
|
||||
{ text: 'Mermaid API Configuration', link: '/config/Setup' },
|
||||
{ text: 'Mermaid API Configuration', link: '/config/setup/modules' },
|
||||
{ text: 'Directives', link: '/config/directives' },
|
||||
{ text: 'Theming', link: '/config/theming' },
|
||||
{ text: 'Accessibility', link: '/config/accessibility' },
|
||||
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
|
||||
{ text: 'Advanced usage', link: '/config/n00b-advanced' },
|
||||
{ text: 'Configuration', link: '/config/configuration' },
|
||||
],
|
||||
},
|
||||
];
|
||||
13
docs/.vitepress/theme/custom.css
Normal file
13
docs/.vitepress/theme/custom.css
Normal file
@ -0,0 +1,13 @@
|
||||
@media (min-width: 1440px) {
|
||||
.VPDoc:not(.has-sidebar) .container[data-v-10119189] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.VPDoc.has-aside .content-container[data-v-10119189] {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--vp-layout-max-width: 100%;
|
||||
}
|
||||
1050
docs/CHANGELOG.md
1050
docs/CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@ -1,22 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
|
||||
# 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
|
||||
@ -1,17 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
|
||||
# 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
1629
docs/Setup.md
File diff suppressed because it is too large
Load Diff
@ -1,15 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
|
||||
- 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)
|
||||
@ -1,46 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
|
||||
- 📔 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)
|
||||
@ -1,51 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
|
||||
# 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.
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Development and Contribution 🙌
|
||||
|
||||
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Overview for Beginners
|
||||
|
||||
@ -41,7 +41,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 +65,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.
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Adding a New Diagram/Chart 📊
|
||||
|
||||
@ -17,20 +17,18 @@ For instance:
|
||||
|
||||
There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
|
||||
|
||||
```jison
|
||||
statement
|
||||
statement
|
||||
: 'participant' actor { $$='actor'; }
|
||||
| signal { $$='signal'; }
|
||||
| note_statement { $$='note'; }
|
||||
| 'title' message { yy.setTitle($2); }
|
||||
;
|
||||
```
|
||||
|
||||
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
|
||||
::: 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.
|
||||
```
|
||||
:::
|
||||
|
||||
For more info look in the example diagram type:
|
||||
|
||||
@ -117,12 +115,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
|
||||
@ -179,27 +177,25 @@ 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
|
||||
%x acc_descr
|
||||
%x acc_descr_multiline
|
||||
* lexical grammar */
|
||||
%lex
|
||||
%x acc_title
|
||||
%x acc_descr
|
||||
%x acc_descr_multiline
|
||||
|
||||
%%
|
||||
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
|
||||
<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; }
|
||||
accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; }
|
||||
<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; }
|
||||
accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
|
||||
<acc_descr_multiline>[\}] { this.popState(); }
|
||||
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
|
||||
%%
|
||||
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
|
||||
<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; }
|
||||
accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; }
|
||||
<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; }
|
||||
accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
|
||||
<acc_descr_multiline>[\}] { this.popState(); }
|
||||
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
|
||||
|
||||
statement
|
||||
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 +222,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.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Security
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Version 8.6.0 Changes
|
||||
|
||||
@ -8,8 +8,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 +48,9 @@ Implementors can only modify configurations using directives, and cannot change
|
||||
|
||||
The Two types of directives: are `init` (or `initialize`) and `wrap`.
|
||||
|
||||
```note
|
||||
::: 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 +62,18 @@ 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
|
||||
::: 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**:
|
||||
**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 +107,19 @@ When deployed within code, init is called before the graph/diagram description.
|
||||
| --------- | ----------------------------- | --------- | -------- | ---------- |
|
||||
| wrap | a callable text-wrap function | Directive | Optional | %%{wrap}%% |
|
||||
|
||||
```note
|
||||
::: 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.
|
||||
Wrap respects a manually added \<br>, so if the user wants to break up their text, they have full control over line breaks by adding \<br> tags.
|
||||
|
||||
It is a non-argument directive and can be executed thusly:
|
||||
|
||||
`%%{wrap}%%` .
|
||||
```
|
||||
:::
|
||||
|
||||
**An example of text wrapping in a sequence diagram**:
|
||||
|
||||
|
||||
!\[Image showing wrapped text]\(img/wrapped text.png)
|
||||
|
||||
# Resetting Configurations:
|
||||
|
||||
@ -143,7 +143,7 @@ Example of **assignWithDepth**:
|
||||
|
||||
Example of **object.Assign**:
|
||||
|
||||
|
||||
!\[Image showing object.assign without depth]\(img/object.assign without depth.png)
|
||||
|
||||
• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height.
|
||||
|
||||
@ -157,13 +157,13 @@ Example of **object.Assign**:
|
||||
| --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
|
||||
| `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf | siteConfig |
|
||||
|
||||
```note
|
||||
::: 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,9 @@ Default value: will mirror Global Config
|
||||
| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
|
||||
| `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |
|
||||
|
||||
```note
|
||||
::: note
|
||||
Returns any values in siteConfig.
|
||||
```
|
||||
:::
|
||||
|
||||
## setConfig
|
||||
|
||||
@ -181,11 +181,11 @@ 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
|
||||
::: 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 +193,9 @@ siteConfig value.
|
||||
| ----------- | --------------------------- | ----------- | ------------------------------- |
|
||||
| `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |
|
||||
|
||||
```note
|
||||
::: note
|
||||
Returns any values in currentConfig.
|
||||
```
|
||||
:::
|
||||
|
||||
## sanitize
|
||||
|
||||
@ -203,10 +203,10 @@ Returns any values in currentConfig.
|
||||
| ---------- | ---------------------------------------- | -------------- | ------ |
|
||||
| `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None |
|
||||
|
||||
```note
|
||||
::: note
|
||||
modifies options in-place
|
||||
Ensures options parameter does not attempt to override siteConfig secure keys.
|
||||
```
|
||||
:::
|
||||
|
||||
## reset
|
||||
|
||||
@ -220,8 +220,8 @@ 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
|
||||
::: note
|
||||
default: current siteConfig (optional, default `getSiteConfig()`)
|
||||
```
|
||||
::: s
|
||||
|
||||
## For more information, read [Setup](Setup.md).
|
||||
## For more information, read [Setup](setup/README).
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Tutorials
|
||||
|
||||
@ -24,7 +24,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:**
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Accessibility Options
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Configuration
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Directives
|
||||
|
||||
@ -84,7 +84,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 +98,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
|
||||
}
|
||||
```
|
||||
|
||||
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 103 KiB |
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# mermaid CLI
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Advanced n00b mermaid (Coming soon..)
|
||||
|
||||
1
docs/config/setup/.nojekyll
Normal file
1
docs/config/setup/.nojekyll
Normal file
@ -0,0 +1 @@
|
||||
TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
|
||||
9
docs/config/setup/README.md
Normal file
9
docs/config/setup/README.md
Normal file
@ -0,0 +1,9 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# mermaid
|
||||
|
||||
## Modules
|
||||
|
||||
- [config](modules/config.md)
|
||||
- [defaultConfig](modules/defaultConfig.md)
|
||||
- [mermaidAPI](modules/mermaidAPI.md)
|
||||
272
docs/config/setup/modules/config.md
Normal file
272
docs/config/setup/modules/config.md
Normal file
@ -0,0 +1,272 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Module: config
|
||||
|
||||
## Variables
|
||||
|
||||
### <a id="defaultconfig" name="defaultconfig"></a> defaultConfig
|
||||
|
||||
• `Const` **defaultConfig**: `MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:7](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L7)
|
||||
|
||||
## Functions
|
||||
|
||||
### <a id="adddirective" name="adddirective"></a> 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/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L191)
|
||||
|
||||
---
|
||||
|
||||
### <a id="getconfig" name="getconfig"></a> 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/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L136)
|
||||
|
||||
---
|
||||
|
||||
### <a id="getsiteconfig" name="getsiteconfig"></a> 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/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L96)
|
||||
|
||||
---
|
||||
|
||||
### <a id="reset" name="reset"></a> 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 |
|
||||
| :------- | :-------------- | :------------ |
|
||||
| `config` | `MermaidConfig` | `siteConfig` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:222](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L222)
|
||||
|
||||
---
|
||||
|
||||
### <a id="sanitize" name="sanitize"></a> 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/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L151)
|
||||
|
||||
---
|
||||
|
||||
### <a id="saveconfigfrominitialize" name="saveconfigfrominitialize"></a> saveConfigFromInitialize
|
||||
|
||||
▸ **saveConfigFromInitialize**(`conf`): `void`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :-------------- |
|
||||
| `conf` | `MermaidConfig` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:75](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L75)
|
||||
|
||||
---
|
||||
|
||||
### <a id="setconfig" name="setconfig"></a> 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/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L113)
|
||||
|
||||
---
|
||||
|
||||
### <a id="setsiteconfig" name="setsiteconfig"></a> 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 siteConfig
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:61](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L61)
|
||||
|
||||
---
|
||||
|
||||
### <a id="updatecurrentconfig" name="updatecurrentconfig"></a> updateCurrentConfig
|
||||
|
||||
▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :------------ | :-------------- |
|
||||
| `siteCfg` | `MermaidConfig` |
|
||||
| `_directives` | `any`\[] |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:14](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L14)
|
||||
|
||||
---
|
||||
|
||||
### <a id="updatesiteconfig" name="updatesiteconfig"></a> updateSiteConfig
|
||||
|
||||
▸ **updateSiteConfig**(`conf`): `MermaidConfig`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :-------------- |
|
||||
| `conf` | `MermaidConfig` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[config.ts:79](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/config.ts#L79)
|
||||
55
docs/config/setup/modules/defaultConfig.md
Normal file
55
docs/config/setup/modules/defaultConfig.md
Normal file
@ -0,0 +1,55 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Module: defaultConfig
|
||||
|
||||
## Variables
|
||||
|
||||
### <a id="configkeys" name="configkeys"></a> configKeys
|
||||
|
||||
• `Const` **configKeys**: `string`\[]
|
||||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:1855](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/defaultConfig.ts#L1855)
|
||||
|
||||
---
|
||||
|
||||
### <a id="default" name="default"></a> 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:**
|
||||
|
||||
```js
|
||||
let config = {
|
||||
startOnLoad: true,
|
||||
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
|
||||
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
```
|
||||
|
||||
A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
|
||||
A description of each option follows below.
|
||||
|
||||
**`Name`**
|
||||
|
||||
Configuration
|
||||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:31](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/defaultConfig.ts#L31)
|
||||
59
docs/config/setup/modules/mermaidAPI.md
Normal file
59
docs/config/setup/modules/mermaidAPI.md
Normal file
@ -0,0 +1,59 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Module: mermaidAPI
|
||||
|
||||
## References
|
||||
|
||||
### <a id="default" name="default"></a> default
|
||||
|
||||
Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
|
||||
|
||||
## Variables
|
||||
|
||||
### <a id="mermaidapi" name="mermaidapi"></a> 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?`: `Function`) => `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 }>
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:483](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/mermaidAPI.ts#L483)
|
||||
|
||||
## Functions
|
||||
|
||||
### <a id="decodeentities" name="decodeentities"></a> decodeEntities
|
||||
|
||||
▸ **decodeEntities**(`text`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :------- |
|
||||
| `text` | `string` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:73](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/mermaidAPI.ts#L73)
|
||||
|
||||
---
|
||||
|
||||
### <a id="encodeentities" name="encodeentities"></a> encodeEntities
|
||||
|
||||
▸ **encodeEntities**(`text`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :------- |
|
||||
| `text` | `string` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[mermaidAPI.ts:47](https://github.com/emersonbottero/mermaid/blob/57b883c7/packages/mermaid/src/mermaidAPI.ts#L47)
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Theme Configuration
|
||||
|
||||
@ -152,9 +152,9 @@ You can create your own themes, by changing any of the given variables below. If
|
||||
|
||||
## Theme Variables Reference Table
|
||||
|
||||
```note
|
||||
::: 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 +371,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
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Usage
|
||||
|
||||
@ -14,7 +14,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 +37,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 +115,10 @@ 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
|
||||
::: 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 +183,9 @@ Or with no config object, and a jQuery selection:
|
||||
mermaid.init(undefined, $('#someId .yetAnotherClass'));
|
||||
```
|
||||
|
||||
```warning
|
||||
::: 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
|
||||
|
||||
@ -324,7 +324,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 +339,9 @@ on what kind of integration you use.
|
||||
</script>
|
||||
```
|
||||
|
||||
```tip
|
||||
::: tip
|
||||
This is the preferred way of configuring mermaid.
|
||||
```
|
||||
:::
|
||||
|
||||
### The following methods are deprecated and are kept only for backwards compatibility.
|
||||
|
||||
@ -357,9 +357,9 @@ approach are:
|
||||
mermaid.startOnLoad = true;
|
||||
```
|
||||
|
||||
```warning
|
||||
::: 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,9 @@ approach are:
|
||||
mermaid_config.startOnLoad = true;
|
||||
```
|
||||
|
||||
```warning
|
||||
::: 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 +388,6 @@ To set some configuration via the mermaid object. The two parameters that are su
|
||||
mermaid_config.startOnLoad = true;
|
||||
```
|
||||
|
||||
```warning
|
||||
::: 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.
|
||||
```
|
||||
:::
|
||||
@ -1,927 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
|
||||
---
|
||||
|
||||
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%',
|
||||
};
|
||||
```
|
||||
9
docs/edit.md
Normal file
9
docs/edit.md
Normal file
@ -0,0 +1,9 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
---
|
||||
|
||||
layout: home
|
||||
|
||||
## title: Live Mermaid
|
||||
|
||||
<iframe id="editor" src="https://mermaid.live" style="position: fixed;left: 0px;bottom: 0px;right: 0px;top: 80px;width: 100%;height: calc(100% - 80px);"></iframe>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 878 B |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 809 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 809 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
BIN
docs/img/git.png
BIN
docs/img/git.png
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 155 KiB |
165
docs/index.html
165
docs/index.html
@ -1,165 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.--><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"
|
||||
/>
|
||||
<!-- <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.29.1/min/vs' },
|
||||
};
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></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 = [];
|
||||
|
||||
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('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
}
|
||||
|
||||
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>
|
||||
135
docs/index.md
Normal file
135
docs/index.md
Normal file
@ -0,0 +1,135 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
---
|
||||
|
||||
layout: home
|
||||
|
||||
title: Mermaid
|
||||
titleTemplate: Diagramming and charting tool
|
||||
|
||||
hero:
|
||||
name: Mermaid
|
||||
text: Diagramming and charting tool
|
||||
tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
|
||||
image:
|
||||
src: /header.png
|
||||
alt: Mermaid
|
||||
actions:
|
||||
\- theme: brand
|
||||
text: Get Started
|
||||
link: /intro/
|
||||
\- theme: alt
|
||||
text: View on GitHub
|
||||
link: https://github.com/mermaid-js/mermaid
|
||||
|
||||
features:
|
||||
|
||||
- title: ➕ Easy to use!
|
||||
details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
|
||||
- title: 🎥 Video Tutorials!
|
||||
details: Has video tutorials for beginners and advanced users.
|
||||
- title: 🏆 Award winner!
|
||||
details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!
|
||||
- title: 🧩 Integrations available!
|
||||
details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
|
||||
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { VPTeamMembers } from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://avatars.githubusercontent.com/u/5837277?v=4',
|
||||
name: 'Knut Sveidqvist',
|
||||
title: 'Creator',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/knsv' },
|
||||
]
|
||||
},
|
||||
{
|
||||
avatar: 'https://avatars.githubusercontent.com/u/1912783?v=4',
|
||||
name: 'Marc Faber',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://gdfaber.github.io/' },
|
||||
{ icon: 'linkedin', link: 'https://www.linkedin.com/in/marc-faber/' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/1564825?v=4',
|
||||
name: 'Nacho Orlandoni',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/IOrlandoni' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/6552521?v=4',
|
||||
name: 'Christian Klemm',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/klemmchr' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/12032557?v=4',
|
||||
name: 'Mindaugas Laganeckas',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/MindaugasLaganeckas' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/58763315?v=4',
|
||||
name: 'Neil Cuzon',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/NeilCuzon' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/19526120?v=4',
|
||||
name: 'Adrian Hall',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/spopida' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/53054099?v=4',
|
||||
name: 'Yash Singh',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/Yash-Singh1' },
|
||||
]
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="vp-doc" >
|
||||
<h2 id="meet-the-team"> Meet The Team </h2>
|
||||
<VPTeamMembers size="small" :members="members" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.image-container .image-src {
|
||||
margin: 1rem auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dark .image-src{
|
||||
filter: invert(1) hue-rotate(217deg) contrast(0.72);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.vp-doc {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.vp-doc h2 {
|
||||
margin: 48px 0 16px;
|
||||
border-top: 1px solid var(--vp-c-divider-light);
|
||||
padding-top: 24px;
|
||||
letter-spacing: -.02em;
|
||||
line-height: 32px;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 145 KiB After Width: | Height: | Size: 145 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# About Mermaid
|
||||
|
||||
@ -6,9 +6,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="" />
|
||||
|
||||
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
|
||||
|
||||
@ -26,12 +26,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 +47,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 +65,7 @@ graph TD;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Sequence diagram](./sequenceDiagram.md)
|
||||
### [Sequence diagram](../syntax/sequenceDiagram.md)
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
@ -97,9 +95,7 @@ sequenceDiagram
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Gantt diagram](./gantt.md)
|
||||
### [Gantt diagram](../syntax/gantt.md)
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
@ -127,9 +123,7 @@ Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [Class diagram](./classDiagram.md)
|
||||
### [Class diagram](../syntax/classDiagram.md)
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
@ -165,8 +159,6 @@ Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Git graph
|
||||
|
||||
```mermaid-example
|
||||
@ -195,7 +187,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 +205,7 @@ erDiagram
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### [User Journey Diagram](./user-journey.md)
|
||||
### [User Journey Diagram](../syntax/user-journey.md)
|
||||
|
||||
```mermaid-example
|
||||
journey
|
||||
@ -241,13 +231,11 @@ journey
|
||||
Sit down: 5: Me
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
@ -269,7 +257,7 @@ To Deploy Mermaid:
|
||||
4. You can then add mermaid as a dev dependency using this command:
|
||||
`yarn add --dev 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 +270,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
|
||||
|
||||
@ -359,7 +347,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
|
||||
|
||||
@ -384,3 +372,22 @@ A quick note from Knut Sveidqvist:
|
||||
---
|
||||
|
||||
_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>
|
||||
@ -1,35 +1,55 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# 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)
|
||||
|
||||
|
||||
```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.
|
||||
|
||||
|
||||
|
||||
@ -61,9 +81,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
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Diagram Syntax
|
||||
|
||||
@ -38,16 +38,16 @@ 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 "{}". |
|
||||
| [` %%{``}%% `](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 |
|
||||
@ -60,9 +60,9 @@ Now, that you've seen what you should not add to your diagrams, you can play aro
|
||||
|
||||
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).
|
||||
|
||||
@ -72,10 +72,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 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
@ -1,337 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.--><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&me=&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&me=&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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Frequently Asked Questions
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Integrations
|
||||
|
||||
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# C4 Diagrams
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Class diagrams
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Entity Relationship Diagrams
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# 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
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Flowcharts - Basic Syntax
|
||||
|
||||
@ -166,6 +166,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}}
|
||||
@ -315,13 +329,13 @@ flowchart LR
|
||||
### Dotted link
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A-.->B
|
||||
flowchart LR;
|
||||
A-.->B;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A-.->B
|
||||
flowchart LR;
|
||||
A-.->B;
|
||||
```
|
||||
|
||||
### Dotted link with text
|
||||
@ -679,8 +693,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'`.
|
||||
@ -695,7 +707,7 @@ Examples of tooltip usage below:
|
||||
|
||||
```html
|
||||
<script>
|
||||
const callback = function () {
|
||||
var callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
</script>
|
||||
@ -771,10 +783,10 @@ Beginner's tip—a full example using interactive links in a html context:
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
const callback = function () {
|
||||
var callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
const config = {
|
||||
var config = {
|
||||
startOnLoad: true,
|
||||
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
|
||||
securityLevel: 'loose',
|
||||
@ -866,13 +878,13 @@ A shorter form of adding a class is to attach the classname to the node using th
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A:::someclass --> B
|
||||
classDef someclass fill:#f96
|
||||
classDef someclass fill:#f96;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A:::someclass --> B
|
||||
classDef someclass fill:#f96
|
||||
classDef someclass fill:#f96;
|
||||
```
|
||||
|
||||
### Css classes
|
||||
@ -895,14 +907,14 @@ below:
|
||||
**Example definition**
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
flowchart LR;
|
||||
A-->B[AAA<span>BBB</span>]
|
||||
B-->D
|
||||
class A cssClass
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
flowchart LR;
|
||||
A-->B[AAA<span>BBB</span>]
|
||||
B-->D
|
||||
class A cssClass
|
||||
@ -924,7 +936,7 @@ The icons are accessed via the syntax fa:#icon class name#.
|
||||
flowchart TD
|
||||
B["fab:fa-twitter for peace"]
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner)
|
||||
B-->D(fa:fa-spinner);
|
||||
B-->E(A fa:fa-camera-retro perhaps?)
|
||||
```
|
||||
|
||||
@ -932,7 +944,7 @@ flowchart TD
|
||||
flowchart TD
|
||||
B["fab:fa-twitter for peace"]
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner)
|
||||
B-->D(fa:fa-spinner);
|
||||
B-->E(A fa:fa-camera-retro perhaps?)
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Gantt diagrams
|
||||
|
||||
@ -341,7 +341,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.html) page.
|
||||
|
||||
mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Gitgraph Diagrams
|
||||
|
||||
@ -817,7 +817,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 +827,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
|
||||
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Mindmap
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Pie chart diagrams
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Requirement Diagram
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# Sequence diagrams
|
||||
|
||||
@ -20,11 +20,11 @@ sequenceDiagram
|
||||
Alice-)John: See you later!
|
||||
```
|
||||
|
||||
```note
|
||||
::: 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}.
|
||||
```
|
||||
If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\[], to enclose the word "end". i.e : (end), \[end], {end}.
|
||||
:::
|
||||
|
||||
## Syntax
|
||||
|
||||
@ -727,7 +727,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
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# State diagrams
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in docs.
|
||||
|
||||
# User Journey Diagram
|
||||
|
||||
827
docs/theme.css
827
docs/theme.css
@ -1,827 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-touch-callout: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body:not(.ready) {
|
||||
overflow: hidden;
|
||||
}
|
||||
body:not(.ready) .app-nav,
|
||||
body:not(.ready) > nav,
|
||||
body:not(.ready) [data-cloak] {
|
||||
display: none;
|
||||
}
|
||||
div#app {
|
||||
font-size: 30px;
|
||||
font-weight: lighter;
|
||||
margin: 40vh auto;
|
||||
text-align: center;
|
||||
}
|
||||
div#app:empty:before {
|
||||
content: 'Loading...';
|
||||
}
|
||||
.emoji {
|
||||
height: 1.2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.progress {
|
||||
background-color: var(--theme-color, #42b983);
|
||||
height: 2px;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: width 0.2s, opacity 0.4s;
|
||||
width: 0;
|
||||
z-index: 999999;
|
||||
}
|
||||
.search .search-keyword,
|
||||
.search a:hover {
|
||||
color: var(--theme-color, #42b983);
|
||||
}
|
||||
.search .search-keyword {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #34495e;
|
||||
font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
a[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
kbd {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-size: 12px !important;
|
||||
line-height: 12px;
|
||||
margin-bottom: 3px;
|
||||
padding: 3px 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
li input[type='checkbox'] {
|
||||
margin: 0 0.2em 0.25em 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.app-nav {
|
||||
margin: 25px 60px 0 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
z-index: 10;
|
||||
}
|
||||
.app-nav.no-badge {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.app-nav p {
|
||||
margin: 0;
|
||||
}
|
||||
.app-nav > a {
|
||||
margin: 0 1rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.app-nav li,
|
||||
.app-nav ul {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.app-nav a {
|
||||
color: inherit;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.app-nav a.active,
|
||||
.app-nav a:hover {
|
||||
color: var(--theme-color, #42b983);
|
||||
}
|
||||
.app-nav a.active {
|
||||
border-bottom: 2px solid var(--theme-color, #42b983);
|
||||
}
|
||||
.app-nav li {
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.app-nav li ul {
|
||||
background-color: #fff;
|
||||
border: 1px solid;
|
||||
border-color: #ddd #ddd #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
max-height: calc(100vh - 61px);
|
||||
overflow-y: auto;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
text-align: left;
|
||||
top: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.app-nav li ul li {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1rem;
|
||||
margin: 8px 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.app-nav li ul a {
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.app-nav li ul a.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.app-nav li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
.github-corner {
|
||||
border-bottom: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
text-decoration: none;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.github-corner:hover .octo-arm {
|
||||
-webkit-animation: octocat-wave 0.56s ease-in-out;
|
||||
animation: octocat-wave 0.56s ease-in-out;
|
||||
}
|
||||
.github-corner svg {
|
||||
color: #fff;
|
||||
fill: var(--theme-color, #42b983);
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
main {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
main.hidden {
|
||||
display: none;
|
||||
}
|
||||
.anchor {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.anchor span {
|
||||
color: #34495e;
|
||||
}
|
||||
.anchor:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sidebar {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.07);
|
||||
overflow-y: auto;
|
||||
padding: 40px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: transform 0.25s ease-out;
|
||||
width: 300px;
|
||||
z-index: 20;
|
||||
}
|
||||
.sidebar > h1 {
|
||||
margin: 0 auto 1rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
.sidebar > h1 a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sidebar > h1 .app-nav {
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
.sidebar .sidebar-nav {
|
||||
line-height: 2em;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.sidebar li.collapse .app-sub-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.sidebar ul {
|
||||
margin: 0 0 0 15px;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar li > p {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar ul,
|
||||
.sidebar ul li {
|
||||
list-style: none;
|
||||
}
|
||||
.sidebar ul li a {
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
}
|
||||
.sidebar ul li ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sidebar:hover::-webkit-scrollbar-thumb {
|
||||
background: hsla(0, 0%, 53.3%, 0.4);
|
||||
}
|
||||
.sidebar:hover::-webkit-scrollbar-track {
|
||||
background: hsla(0, 0%, 53.3%, 0.1);
|
||||
}
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
background-color: hsla(0, 0%, 100%, 0.8);
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
transition: opacity 0.3s;
|
||||
width: 284px;
|
||||
z-index: 30;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sidebar-toggle:hover .sidebar-toggle-button {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.sidebar-toggle span {
|
||||
background-color: var(--theme-color, #42b983);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
}
|
||||
body.sticky .sidebar,
|
||||
body.sticky .sidebar-toggle {
|
||||
position: fixed;
|
||||
}
|
||||
.content {
|
||||
padding-top: 60px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 300px;
|
||||
transition: left 0.25s ease;
|
||||
}
|
||||
.markdown-section {
|
||||
margin: 0 auto;
|
||||
max-width: 80%;
|
||||
padding: 30px 15px 40px;
|
||||
position: relative;
|
||||
}
|
||||
.markdown-section > * {
|
||||
box-sizing: border-box;
|
||||
font-size: inherit;
|
||||
}
|
||||
.markdown-section > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.markdown-section hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 2em 0;
|
||||
}
|
||||
.markdown-section iframe {
|
||||
border: 1px solid #eee;
|
||||
width: 1px;
|
||||
min-width: 100%;
|
||||
}
|
||||
.markdown-section table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.markdown-section th {
|
||||
font-weight: 700;
|
||||
}
|
||||
.markdown-section td,
|
||||
.markdown-section th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
.markdown-section tr {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.markdown-section p.tip,
|
||||
.markdown-section tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.markdown-section p.tip {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-left: 4px solid #f66;
|
||||
border-top-right-radius: 2px;
|
||||
margin: 2em 0;
|
||||
padding: 12px 24px 12px 30px;
|
||||
position: relative;
|
||||
}
|
||||
.markdown-section p.tip:before {
|
||||
background-color: #f66;
|
||||
border-radius: 100%;
|
||||
color: #fff;
|
||||
content: '!';
|
||||
font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
left: -12px;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
top: 14px;
|
||||
}
|
||||
.markdown-section p.tip code {
|
||||
background-color: #efefef;
|
||||
}
|
||||
.markdown-section p.tip em {
|
||||
color: #34495e;
|
||||
}
|
||||
.markdown-section p.warn {
|
||||
background: rgba(66, 185, 131, 0.1);
|
||||
border-radius: 2px;
|
||||
padding: 1rem;
|
||||
}
|
||||
.markdown-section ul.task-list > li {
|
||||
list-style-type: none;
|
||||
}
|
||||
body.close .sidebar {
|
||||
transform: translateX(-300px);
|
||||
}
|
||||
body.close .sidebar-toggle {
|
||||
width: auto;
|
||||
}
|
||||
body.close .content {
|
||||
left: 0;
|
||||
}
|
||||
@media print {
|
||||
.app-nav,
|
||||
.github-corner,
|
||||
.sidebar,
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.github-corner,
|
||||
.sidebar,
|
||||
.sidebar-toggle {
|
||||
position: fixed;
|
||||
}
|
||||
.app-nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.app-nav li ul {
|
||||
top: 30px;
|
||||
}
|
||||
main {
|
||||
height: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
.content {
|
||||
left: 0;
|
||||
max-width: 100vw;
|
||||
position: static;
|
||||
padding-top: 20px;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.app-nav,
|
||||
.github-corner {
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
padding: 30px 30px 10px 10px;
|
||||
}
|
||||
body.close .sidebar {
|
||||
transform: translateX(300px);
|
||||
}
|
||||
body.close .sidebar-toggle {
|
||||
background-color: hsla(0, 0%, 100%, 0.8);
|
||||
transition: background-color 1s;
|
||||
width: 284px;
|
||||
padding: 10px;
|
||||
}
|
||||
body.close .content {
|
||||
transform: translateX(300px);
|
||||
}
|
||||
body.close .app-nav,
|
||||
body.close .github-corner {
|
||||
display: none;
|
||||
}
|
||||
.github-corner:hover .octo-arm {
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
.github-corner .octo-arm {
|
||||
-webkit-animation: octocat-wave 0.56s ease-in-out;
|
||||
animation: octocat-wave 0.56s ease-in-out;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes octocat-wave {
|
||||
0%,
|
||||
to {
|
||||
transform: rotate(0);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
@keyframes octocat-wave {
|
||||
0%,
|
||||
to {
|
||||
transform: rotate(0);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
section.cover {
|
||||
align-items: center;
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: none;
|
||||
}
|
||||
section.cover.show {
|
||||
display: flex;
|
||||
}
|
||||
section.cover.has-mask .mask {
|
||||
background-color: #fff;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
section.cover .cover-main {
|
||||
flex: 1;
|
||||
margin: -20px 16px 0;
|
||||
text-align: center;
|
||||
}
|
||||
section.cover a {
|
||||
color: inherit;
|
||||
}
|
||||
section.cover a,
|
||||
section.cover a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
section.cover p {
|
||||
line-height: 1.5rem;
|
||||
margin: 1em 0;
|
||||
}
|
||||
section.cover h1 {
|
||||
color: inherit;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
margin: 0.625rem 0 2.5rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
section.cover h1 a {
|
||||
display: block;
|
||||
}
|
||||
section.cover h1 small {
|
||||
bottom: -0.4375rem;
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
}
|
||||
section.cover blockquote {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
section.cover ul {
|
||||
line-height: 1.8;
|
||||
list-style-type: none;
|
||||
margin: 1em auto;
|
||||
max-width: 500px;
|
||||
padding: 0;
|
||||
}
|
||||
section.cover .cover-main > p:last-child a {
|
||||
border-radius: 2rem;
|
||||
border: 1px solid var(--theme-color, #42b983);
|
||||
box-sizing: border-box;
|
||||
color: var(--theme-color, #42b983);
|
||||
display: inline-block;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.1rem;
|
||||
margin: 0.5rem 1rem;
|
||||
padding: 0.75em 2rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
section.cover .cover-main > p:last-child a:last-child {
|
||||
background-color: var(--theme-color, #42b983);
|
||||
color: #fff;
|
||||
}
|
||||
section.cover .cover-main > p:last-child a:last-child:hover {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
}
|
||||
section.cover .cover-main > p:last-child a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
section.cover blockquote > p > a {
|
||||
border-bottom: 2px solid var(--theme-color, #42b983);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
section.cover blockquote > p > a:hover {
|
||||
color: var(--theme-color, #42b983);
|
||||
}
|
||||
.sidebar,
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
.sidebar {
|
||||
color: #364149;
|
||||
}
|
||||
.sidebar li {
|
||||
margin: 6px 0;
|
||||
}
|
||||
.sidebar ul li a {
|
||||
color: #505d6b;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sidebar ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sidebar ul li ul {
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar ul li.active > a {
|
||||
border-right: 2px solid;
|
||||
color: var(--theme-color, #42b983);
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-sub-sidebar li:before {
|
||||
content: '-';
|
||||
padding-right: 4px;
|
||||
float: left;
|
||||
}
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section strong {
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-section a {
|
||||
color: var(--theme-color, #42b983);
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-section h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
.markdown-section h2 {
|
||||
font-size: 1.75rem;
|
||||
margin: 45px 0 0.8rem;
|
||||
}
|
||||
.markdown-section h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 40px 0 0.6rem;
|
||||
}
|
||||
.markdown-section h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.markdown-section h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.markdown-section h6 {
|
||||
color: #777;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.markdown-section figure,
|
||||
.markdown-section p {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
.markdown-section ol,
|
||||
.markdown-section p,
|
||||
.markdown-section ul {
|
||||
line-height: 1.6rem;
|
||||
word-spacing: 0.05rem;
|
||||
}
|
||||
.markdown-section ol,
|
||||
.markdown-section ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.markdown-section blockquote {
|
||||
border-left: 4px solid var(--theme-color, #42b983);
|
||||
color: #858585;
|
||||
margin: 2em 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.markdown-section blockquote p {
|
||||
font-weight: 600;
|
||||
margin-left: 0;
|
||||
}
|
||||
.markdown-section iframe {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.markdown-section em {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.markdown-section code {
|
||||
border-radius: 2px;
|
||||
color: #e96900;
|
||||
font-size: 0.8rem;
|
||||
margin: 0 2px;
|
||||
padding: 3px 5px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.markdown-section code,
|
||||
.markdown-section pre {
|
||||
background-color: #f8f8f8;
|
||||
font-family: Roboto Mono, Monaco, courier, monospace;
|
||||
}
|
||||
.markdown-section pre {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
line-height: 1.5rem;
|
||||
margin: 1.2em 0;
|
||||
overflow: auto;
|
||||
padding: 0 1.4rem;
|
||||
position: relative;
|
||||
word-wrap: normal;
|
||||
}
|
||||
.token.cdata,
|
||||
.token.comment,
|
||||
.token.doctype,
|
||||
.token.prolog {
|
||||
color: #8e908c;
|
||||
}
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #c76b29;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #525252;
|
||||
}
|
||||
.token.property {
|
||||
color: #c08b30;
|
||||
}
|
||||
.token.tag {
|
||||
color: #2973b7;
|
||||
}
|
||||
.token.string {
|
||||
color: var(--theme-color, #42b983);
|
||||
}
|
||||
.token.selector {
|
||||
color: #6679cc;
|
||||
}
|
||||
.token.attr-name {
|
||||
color: #2973b7;
|
||||
}
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #22a2c9;
|
||||
}
|
||||
.token.attr-value,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: var(--theme-color, #42b983);
|
||||
}
|
||||
.token.function,
|
||||
.token.keyword {
|
||||
color: #e96900;
|
||||
}
|
||||
.token.atrule,
|
||||
.token.regex,
|
||||
.token.statement {
|
||||
color: #22a2c9;
|
||||
}
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #3d8fd1;
|
||||
}
|
||||
.token.deleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.token.inserted {
|
||||
border-bottom: 1px dotted #202746;
|
||||
text-decoration: none;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.bold,
|
||||
.token.important {
|
||||
font-weight: 700;
|
||||
}
|
||||
.token.important {
|
||||
color: #c94922;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
.markdown-section pre > code {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 2px;
|
||||
color: #525252;
|
||||
display: block;
|
||||
font-family: Roboto Mono, Monaco, courier, monospace;
|
||||
font-size: 0.8rem;
|
||||
line-height: inherit;
|
||||
margin: 0 2px;
|
||||
max-width: inherit;
|
||||
overflow: inherit;
|
||||
padding: 2.2em 5px;
|
||||
white-space: inherit;
|
||||
}
|
||||
.markdown-section code:after,
|
||||
.markdown-section code:before {
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
code .token {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
min-height: 1.5rem;
|
||||
position: relative;
|
||||
left: auto;
|
||||
}
|
||||
pre:after {
|
||||
color: #ccc;
|
||||
content: attr(data-lang);
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
padding: 5px 10px 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,27 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
|
||||
|
||||
# Upgrading
|
||||
|
||||
Some of the interfaces has been upgraded.
|
||||
|
||||
## From version 0.4.0 to 0.5.0
|
||||
|
||||
### Initialization
|
||||
|
||||
`mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below:
|
||||
|
||||
#### version 0.4.0
|
||||
|
||||
```javascript
|
||||
mermaid_config = {
|
||||
startOnLoad: true,
|
||||
};
|
||||
```
|
||||
|
||||
#### version 0.5.0
|
||||
|
||||
```javascript
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
});
|
||||
```
|
||||
@ -1,4 +1,4 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import { defineConfig, searchForWorkspaceRoot } from 'vite';
|
||||
import path from 'path';
|
||||
import { SearchPlugin } from 'vitepress-plugin-search';
|
||||
|
||||
@ -32,4 +32,14 @@ export default defineConfig({
|
||||
mermaid: path.join(__dirname, '../dist/mermaid.esm.min.mjs'), // Use this one to build
|
||||
},
|
||||
},
|
||||
server: {
|
||||
fs: {
|
||||
allow: [
|
||||
// search up for workspace root
|
||||
searchForWorkspaceRoot(process.cwd()),
|
||||
// Allow serving files from one level up to the project root
|
||||
path.join(__dirname, '..'),
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
10
package.json
10
package.json
@ -31,15 +31,9 @@
|
||||
"build:watch": "pnpm build:vite --watch",
|
||||
"build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
|
||||
"dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
|
||||
"docs:build": "ts-node-esm --transpileOnly packages/mermaid/src/docs.mts",
|
||||
"docs:verify": "pnpm docs:build --verify",
|
||||
"todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
|
||||
"release": "pnpm build",
|
||||
"lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
|
||||
"vdocs:dev": "vitepress dev vdocs",
|
||||
"vdocs:build": "vitepress build vdocs",
|
||||
"vdocs:serve": "vitepress serve vdocs",
|
||||
"postbuild": "echo 'building docs from code here soon'",
|
||||
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
|
||||
"lint:jison": "ts-node-esm --transpileOnly packages/mermaid/src/jison/lint.mts",
|
||||
"cypress": "cypress run",
|
||||
@ -108,7 +102,6 @@
|
||||
"coveralls": "^3.1.1",
|
||||
"cypress": "^10.0.0",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"documentation": "13.2.0",
|
||||
"esbuild": "^0.15.10",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
@ -138,9 +131,6 @@
|
||||
"typescript": "^4.8.4",
|
||||
"unist-util-flatmap": "^1.0.0",
|
||||
"vite": "^3.1.4",
|
||||
"vitepress": "^1.0.0-alpha.19",
|
||||
"vitepress-plugin-mermaid": "^2.0.8",
|
||||
"vitepress-plugin-search": "^1.0.4-alpha.11",
|
||||
"vitest": "^0.23.4"
|
||||
},
|
||||
"resolutions": {
|
||||
|
||||
162
packages/mermaid/docs/.vitepress/config.ts
Normal file
162
packages/mermaid/docs/.vitepress/config.ts
Normal file
@ -0,0 +1,162 @@
|
||||
import { version } from '../../package.json';
|
||||
import MermaidMarkdown from './mermaid-markdown-all';
|
||||
import { defineConfig } from 'vitepress';
|
||||
|
||||
export default defineConfig({
|
||||
lang: 'en-US',
|
||||
title: 'Mermaid',
|
||||
description: 'Create diagrams and visualizations using text and code.',
|
||||
base: '/mermaid-docs/',
|
||||
markdown: MermaidMarkdown,
|
||||
ignoreDeadLinks: true, //TODO: try to fixe those in autogenerated docs
|
||||
themeConfig: {
|
||||
nav: nav(),
|
||||
|
||||
sidebar: {
|
||||
'/': sidebarAll(),
|
||||
// "/intro/": sidebarIntro(),
|
||||
// "/syntax/": sidebarSyntax(),
|
||||
// "/config": sidebarConfig(),
|
||||
// "/misc/": sidebarMisc(),
|
||||
// "/community/": sidebarCommunity(),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function nav() {
|
||||
return [
|
||||
{ text: 'Intro', link: '/intro/', activeMatch: '/intro/' },
|
||||
{
|
||||
text: 'Configuration',
|
||||
link: '/config/Tutorials',
|
||||
activeMatch: '/config/',
|
||||
},
|
||||
{ text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' },
|
||||
{ text: 'Misc', link: '/misc/integrations', activeMatch: '/misc/' },
|
||||
{
|
||||
text: 'Community',
|
||||
link: '/community/n00b-overview',
|
||||
activeMatch: '/community/',
|
||||
},
|
||||
{
|
||||
text: version,
|
||||
items: [
|
||||
{
|
||||
text: 'Changelog',
|
||||
link: 'https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md',
|
||||
},
|
||||
{
|
||||
text: 'Contributing',
|
||||
link: 'https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '💻 Live Editor',
|
||||
link: '/edit',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarAll() {
|
||||
return [
|
||||
{
|
||||
text: '📔 Introduction',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'About Mermaid', link: '/intro/' },
|
||||
{ text: 'Deployment', link: '/intro/n00b-gettingStarted' },
|
||||
{
|
||||
text: 'Syntax and Configuration',
|
||||
link: '/intro/n00b-syntaxReference',
|
||||
},
|
||||
],
|
||||
},
|
||||
...sidebarSyntax(),
|
||||
...sidebarConfig(),
|
||||
...sidebarMisc(),
|
||||
...sidebarCommunity(),
|
||||
// {
|
||||
// text: "Generated",
|
||||
// items: [{ text: "modules", link: "docs/code/modules" }],
|
||||
// },
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarSyntax() {
|
||||
return [
|
||||
{
|
||||
text: '📊 Diagram Syntax',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Flowchart', link: '/syntax/flowchart' },
|
||||
{ text: 'Sequence Diagram', link: '/syntax/sequenceDiagram' },
|
||||
{ text: 'Class Diagram', link: '/syntax/classDiagram' },
|
||||
{ text: 'State Diagram', link: '/syntax/stateDiagram' },
|
||||
{
|
||||
text: 'Entity Relationship Diagram',
|
||||
link: '/syntax/entityRelationshipDiagram',
|
||||
},
|
||||
{ text: 'User Journey', link: '/syntax/userJourney' },
|
||||
{ text: 'Gantt', link: '/syntax/gantt' },
|
||||
{ text: 'Pie Chart', link: '/syntax/pie' },
|
||||
{ text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
|
||||
{ text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitGraph' },
|
||||
{ text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
|
||||
{ text: 'Other Examples', link: '/syntax/examples' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarConfig() {
|
||||
return [
|
||||
{
|
||||
text: '⚙️ Deployment and Configuration',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Tutorials', link: '/config/Tutorials' },
|
||||
{ text: 'API-Usage', link: '/config/usage' },
|
||||
{ text: 'Mermaid API Configuration', link: '/config/setup/modules' },
|
||||
{ text: 'Directives', link: '/config/directives' },
|
||||
{ text: 'Theming', link: '/config/theming' },
|
||||
{ text: 'Accessibility', link: '/config/accessibility' },
|
||||
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
|
||||
{ text: 'Advanced usage', link: '/config/n00b-advanced' },
|
||||
{ text: 'Configuration', link: '/config/configuration' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarMisc() {
|
||||
return [
|
||||
{
|
||||
text: '📚 Misc',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Use-Cases and Integrations', link: '/misc/integrations' },
|
||||
{ text: 'FAQ', link: '/misc/faq' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarCommunity() {
|
||||
return [
|
||||
{
|
||||
text: '🙌 Contributions and Community',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Overview for Beginners', link: '/community/n00b-overview' },
|
||||
{
|
||||
text: 'Development and Contribution',
|
||||
link: '/community/development',
|
||||
},
|
||||
{ text: 'Changelog', link: '/community/CHANGELOG' },
|
||||
{ text: 'Adding Diagrams', link: '/community/newDiagram' },
|
||||
{ text: 'Security', link: '/community/security' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user