mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-04 03:24:13 +01:00
Merge branch 'develop' into resolve-info-html-assignment
This commit is contained in:
Reda Al Sulais
@@ -223,6 +223,9 @@ If the users have no way to know that things have changed, then you haven't real
|
||||
Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
|
||||
|
||||
The documentation has to be updated to users know that things have changed and added!
|
||||
If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
|
||||
|
||||
eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
|
||||
|
||||
We know it can sometimes be hard to code _and_ write user documentation.
|
||||
|
||||
|
||||
@@ -124,53 +124,6 @@ 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](../config/directives.md)
|
||||
|
||||
Here is example handling from flowcharts:
|
||||
Jison:
|
||||
|
||||
```jison
|
||||
/* lexical grammar */
|
||||
%lex
|
||||
%x open_directive
|
||||
%x type_directive
|
||||
%x arg_directive
|
||||
%x close_directive
|
||||
|
||||
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
|
||||
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
|
||||
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
|
||||
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
|
||||
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
|
||||
|
||||
/* language grammar */
|
||||
|
||||
/* ... */
|
||||
|
||||
directive
|
||||
: openDirective typeDirective closeDirective separator
|
||||
| openDirective typeDirective ':' argDirective closeDirective separator
|
||||
;
|
||||
|
||||
openDirective
|
||||
: open_directive { yy.parseDirective('%%{', 'open_directive'); }
|
||||
;
|
||||
|
||||
typeDirective
|
||||
: type_directive { yy.parseDirective($1, 'type_directive'); }
|
||||
;
|
||||
|
||||
argDirective
|
||||
: arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
|
||||
;
|
||||
|
||||
closeDirective
|
||||
: close_directive { yy.parseDirective('}%%', 'close_directive', 'flowchart'); }
|
||||
;
|
||||
```
|
||||
|
||||
It is probably a good idea to keep the handling similar to this in your new diagram. The parseDirective function is provided by the mermaidAPI.
|
||||
|
||||
## Accessibility
|
||||
|
||||
Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
|
||||
@@ -189,7 +142,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
|
||||
|
||||
The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
|
||||
|
||||
In a similar way to the directives, the jison syntax are quite similar between the diagrams.
|
||||
As a design goal, the jison syntax should be similar between the diagrams.
|
||||
|
||||
```jison
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293)
|
||||
[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
|
||||
|
||||
---
|
||||
|
||||
@@ -22,35 +22,12 @@
|
||||
|
||||
• `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)].**
|
||||
Default mermaid configuration options.
|
||||
|
||||
## **What follows are config instructions for older versions**
|
||||
|
||||
These are the default options which can be overridden with the initialization call like so:
|
||||
|
||||
**Example 1:**
|
||||
|
||||
```js
|
||||
mermaid.initialize({ flowchart: { htmlLabels: false } });
|
||||
```
|
||||
|
||||
**Example 2:**
|
||||
|
||||
```html
|
||||
<script>
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
|
||||
A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
|
||||
A description of each option follows below.
|
||||
Please see the Mermaid config JSON Schema for the default JSON values.
|
||||
Non-JSON JS default values are listed in this file, e.g. functions, or
|
||||
`undefined` (explicitly set so that `configKeys` finds them).
|
||||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)
|
||||
[defaultConfig.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L16)
|
||||
|
||||
@@ -73,9 +73,9 @@ To make a custom theme, modify `themeVariables` via `init`.
|
||||
|
||||
You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
|
||||
|
||||
| Parameter | Description | Type | Properties |
|
||||
| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- |
|
||||
| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) |
|
||||
| Parameter | Description | Type | Properties |
|
||||
| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
|
||||
| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
|
||||
|
||||
Example of modifying `themeVariables` using the `init` directive:
|
||||
|
||||
|
||||
@@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
|
||||
|
||||
The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
|
||||
|
||||
The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
|
||||
The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
|
||||
@@ -161,6 +161,8 @@ They also serve as proof of concept, for the variety of things that can be built
|
||||
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
|
||||
- [CKEditor](https://github.com/ckeditor/ckeditor5)
|
||||
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
|
||||
- [Standard Notes](https://standardnotes.com/)
|
||||
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
|
||||
|
||||
## Document Generation
|
||||
|
||||
@@ -185,6 +187,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
||||
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
|
||||
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
|
||||
- [Quarto](https://quarto.org/)
|
||||
- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
|
||||
|
||||
## Browser Extensions
|
||||
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
|
||||
# Announcements
|
||||
|
||||
## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
|
||||
## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
|
||||
|
||||
8 June 2023 · 7 mins
|
||||
17 July 2023 · 3 mins
|
||||
|
||||
A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set.
|
||||
New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
|
||||
|
||||
@@ -6,6 +6,24 @@
|
||||
|
||||
# Blog
|
||||
|
||||
## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
|
||||
|
||||
17 July 2023 · 3 mins
|
||||
|
||||
New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
|
||||
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
|
||||
29 June 2023 · 4 mins
|
||||
|
||||
Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
|
||||
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
|
||||
15 June 2023 · 12 mins
|
||||
|
||||
Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
|
||||
|
||||
## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
|
||||
|
||||
8 June 2023 · 7 mins
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4c.md](../../packages/mermaid/src/docs/syntax/c4c.md).
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4.md](../../packages/mermaid/src/docs/syntax/c4.md).
|
||||
|
||||
# C4 Diagrams
|
||||
|
||||
> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
|
||||
|
||||
Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
|
||||
Mermaid's C4 diagram syntax is compatible with plantUML. See example below:
|
||||
|
||||
```mermaid-example
|
||||
C4Context
|
||||
@@ -114,7 +114,7 @@ For an example, see the source code demos/index.html
|
||||
- Dynamic diagram (C4Dynamic)
|
||||
- Deployment diagram (C4Deployment)
|
||||
|
||||
Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
|
||||
Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the C4 diagram.
|
||||
|
||||
C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
|
||||
updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.
|
||||
@@ -123,10 +123,10 @@ The layout does not use a fully automated layout algorithm. The position of shap
|
||||
The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
|
||||
|
||||
- Layout
|
||||
- - Lay_U, Lay_Up
|
||||
- - Lay_D, Lay_Down
|
||||
- - Lay_L, Lay_Left
|
||||
- - Lay_R, Lay_Right
|
||||
- Lay_U, Lay_Up
|
||||
- Lay_D, Lay_Down
|
||||
- Lay_L, Lay_Left
|
||||
- Lay_R, Lay_Right
|
||||
|
||||
The following unfinished features are not supported in the short term.
|
||||
|
||||
@@ -140,111 +140,70 @@ The following unfinished features are not supported in the short term.
|
||||
|
||||
- [x] System Context
|
||||
|
||||
- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||
|
||||
- - [x] Person_Ext
|
||||
|
||||
- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||
|
||||
- - [x] SystemDb
|
||||
|
||||
- - [x] SystemQueue
|
||||
|
||||
- - [x] System_Ext
|
||||
|
||||
- - [x] SystemDb_Ext
|
||||
|
||||
- - [x] SystemQueue_Ext
|
||||
|
||||
- - [x] Boundary(alias, label, ?type, ?tags, $link)
|
||||
|
||||
- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
|
||||
|
||||
- - [x] System_Boundary
|
||||
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] Person_Ext
|
||||
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] SystemDb
|
||||
- [x] SystemQueue
|
||||
- [x] System_Ext
|
||||
- [x] SystemDb_Ext
|
||||
- [x] SystemQueue_Ext
|
||||
- [x] Boundary(alias, label, ?type, ?tags, $link)
|
||||
- [x] Enterprise_Boundary(alias, label, ?tags, $link)
|
||||
- [x] System_Boundary
|
||||
|
||||
- [x] Container diagram
|
||||
|
||||
- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
|
||||
- - [x] ContainerDb
|
||||
|
||||
- - [x] ContainerQueue
|
||||
|
||||
- - [x] Container_Ext
|
||||
|
||||
- - [x] ContainerDb_Ext
|
||||
|
||||
- - [x] ContainerQueue_Ext
|
||||
|
||||
- - [x] Container_Boundary(alias, label, ?tags, $link)
|
||||
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] ContainerDb
|
||||
- [x] ContainerQueue
|
||||
- [x] Container_Ext
|
||||
- [x] ContainerDb_Ext
|
||||
- [x] ContainerQueue_Ext
|
||||
- [x] Container_Boundary(alias, label, ?tags, $link)
|
||||
|
||||
- [x] Component diagram
|
||||
|
||||
- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
|
||||
- - [x] ComponentDb
|
||||
|
||||
- - [x] ComponentQueue
|
||||
|
||||
- - [x] Component_Ext
|
||||
|
||||
- - [x] ComponentDb_Ext
|
||||
|
||||
- - [x] ComponentQueue_Ext
|
||||
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] ComponentDb
|
||||
- [x] ComponentQueue
|
||||
- [x] Component_Ext
|
||||
- [x] ComponentDb_Ext
|
||||
- [x] ComponentQueue_Ext
|
||||
|
||||
- [x] Dynamic diagram
|
||||
|
||||
- - [x] RelIndex(index, from, to, label, ?tags, $link)
|
||||
- [x] RelIndex(index, from, to, label, ?tags, $link)
|
||||
|
||||
- [x] Deployment diagram
|
||||
|
||||
- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
||||
|
||||
- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
||||
|
||||
- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
||||
|
||||
- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
||||
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
||||
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
||||
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
||||
|
||||
- [x] Relationship Types
|
||||
|
||||
- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
|
||||
- - [x] BiRel (bidirectional relationship)
|
||||
|
||||
- - [x] Rel_U, Rel_Up
|
||||
|
||||
- - [x] Rel_D, Rel_Down
|
||||
|
||||
- - [x] Rel_L, Rel_Left
|
||||
|
||||
- - [x] Rel_R, Rel_Right
|
||||
|
||||
- - [x] Rel_Back
|
||||
|
||||
- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
|
||||
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] BiRel (bidirectional relationship)
|
||||
- [x] Rel_U, Rel_Up
|
||||
- [x] Rel_D, Rel_Down
|
||||
- [x] Rel_L, Rel_Left
|
||||
- [x] Rel_R, Rel_Right
|
||||
- [x] Rel_Back
|
||||
- [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
|
||||
|
||||
- [ ] Custom tags/stereotypes support and skin param updates
|
||||
|
||||
- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
|
||||
|
||||
- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
|
||||
|
||||
- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
|
||||
|
||||
- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
|
||||
|
||||
- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
|
||||
|
||||
- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
|
||||
|
||||
- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
|
||||
|
||||
- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
|
||||
|
||||
- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
|
||||
|
||||
- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
|
||||
- [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
|
||||
- [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
|
||||
- [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
|
||||
- [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
|
||||
- [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
|
||||
- [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
|
||||
- [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
|
||||
- [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
|
||||
- [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
|
||||
- [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
|
||||
|
||||
There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
|
||||
|
||||
@@ -196,7 +196,7 @@ erDiagram
|
||||
}
|
||||
```
|
||||
|
||||
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
||||
The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
||||
|
||||
#### Attribute Keys and Comments
|
||||
|
||||
|
||||
@@ -991,6 +991,24 @@ flowchart LR
|
||||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
This form can be used when declaring multiple links between nodes:
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
### Css classes
|
||||
|
||||
It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
|
||||
|
||||
@@ -25,25 +25,25 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas
|
||||
```mermaid-example
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
## Syntax
|
||||
@@ -117,17 +117,17 @@ gantt
|
||||
It is possible to set multiple dependencies separated by space:
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
apple :a, 2017-07-20, 1w
|
||||
banana :crit, b, 2017-07-23, 1d
|
||||
cherry :active, c, after b a, 1d
|
||||
gantt
|
||||
apple :a, 2017-07-20, 1w
|
||||
banana :crit, b, 2017-07-23, 1d
|
||||
cherry :active, c, after b a, 1d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
apple :a, 2017-07-20, 1w
|
||||
banana :crit, b, 2017-07-23, 1d
|
||||
cherry :active, c, after b a, 1d
|
||||
gantt
|
||||
apple :a, 2017-07-20, 1w
|
||||
banana :crit, b, 2017-07-23, 1d
|
||||
cherry :active, c, after b a, 1d
|
||||
```
|
||||
|
||||
### Title
|
||||
@@ -146,22 +146,22 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49,2min
|
||||
taska2 : 10min
|
||||
taska3 : 5min
|
||||
Final milestone : milestone, m2, 18:14, 2min
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49, 2m
|
||||
Task A : 10m
|
||||
Task B : 5m
|
||||
Final milestone : milestone, m2, 18:08, 4m
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49,2min
|
||||
taska2 : 10min
|
||||
taska3 : 5min
|
||||
Final milestone : milestone, m2, 18:14, 2min
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49, 2m
|
||||
Task A : 10m
|
||||
Task B : 5m
|
||||
Final milestone : milestone, m2, 18:08, 4m
|
||||
```
|
||||
|
||||
## Setting dates
|
||||
@@ -257,6 +257,22 @@ The pattern is:
|
||||
|
||||
More info in: <https://github.com/d3/d3-time#interval_every>
|
||||
|
||||
Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
tickInterval 1week
|
||||
weekday monday
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
tickInterval 1week
|
||||
weekday monday
|
||||
```
|
||||
|
||||
Support: v10.3.0+
|
||||
|
||||
## Output in compact mode
|
||||
|
||||
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
|
||||
@@ -296,29 +312,27 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
|
||||
```mermaid-example
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
%% this is a comment
|
||||
dateFormat YYYY-MM-DD
|
||||
%% This is a comment
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
%% this is a comment
|
||||
dateFormat YYYY-MM-DD
|
||||
%% This is a comment
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1 , 20d
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
## Styling
|
||||
@@ -440,7 +454,7 @@ Beginner's tip—a full example using interactive links in an html context:
|
||||
dateFormat YYYY-MM-DD
|
||||
|
||||
section Clickable
|
||||
Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
||||
Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
||||
Print arguments :cl2, after cl1, 3d
|
||||
Print task :cl3, after cl2, 3d
|
||||
|
||||
|
||||
@@ -825,6 +825,82 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
|
||||
|
||||
Here, we have changed the default main branch name to `MetroLine1`.
|
||||
|
||||
## Orientation (v10.3.0+)
|
||||
|
||||
In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
|
||||
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**.
|
||||
|
||||
In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`.
|
||||
|
||||
Usage example:
|
||||
|
||||
```mermaid-example
|
||||
gitGraph TB:
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gitGraph TB:
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
## 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](../config/theming.md).
|
||||
|
||||
294
docs/syntax/sankey.md
Normal file
294
docs/syntax/sankey.md
Normal file
@@ -0,0 +1,294 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md).
|
||||
|
||||
# Sankey diagram (v10.3.0+)
|
||||
|
||||
> A sankey diagram is a visualization used to depict a flow from one set of values to another.
|
||||
|
||||
::: warning
|
||||
This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
|
||||
:::
|
||||
|
||||
The things being connected are called nodes and the connections are called links.
|
||||
|
||||
## Example
|
||||
|
||||
This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors.
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
Agricultural 'waste',Bio-conversion,124.729
|
||||
Bio-conversion,Liquid,0.597
|
||||
Bio-conversion,Losses,26.862
|
||||
Bio-conversion,Solid,280.322
|
||||
Bio-conversion,Gas,81.144
|
||||
Biofuel imports,Liquid,35
|
||||
Biomass imports,Solid,35
|
||||
Coal imports,Coal,11.606
|
||||
Coal reserves,Coal,63.965
|
||||
Coal,Solid,75.571
|
||||
District heating,Industry,10.639
|
||||
District heating,Heating and cooling - commercial,22.505
|
||||
District heating,Heating and cooling - homes,46.184
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
Electricity grid,Industry,342.165
|
||||
Electricity grid,Road transport,37.797
|
||||
Electricity grid,Agriculture,4.412
|
||||
Electricity grid,Heating and cooling - commercial,40.858
|
||||
Electricity grid,Losses,56.691
|
||||
Electricity grid,Rail transport,7.863
|
||||
Electricity grid,Lighting & appliances - commercial,90.008
|
||||
Electricity grid,Lighting & appliances - homes,93.494
|
||||
Gas imports,Ngas,40.719
|
||||
Gas reserves,Ngas,82.233
|
||||
Gas,Heating and cooling - commercial,0.129
|
||||
Gas,Losses,1.401
|
||||
Gas,Thermal generation,151.891
|
||||
Gas,Agriculture,2.096
|
||||
Gas,Industry,48.58
|
||||
Geothermal,Electricity grid,7.013
|
||||
H2 conversion,H2,20.897
|
||||
H2 conversion,Losses,6.242
|
||||
H2,Road transport,20.897
|
||||
Hydro,Electricity grid,6.995
|
||||
Liquid,Industry,121.066
|
||||
Liquid,International shipping,128.69
|
||||
Liquid,Road transport,135.835
|
||||
Liquid,Domestic aviation,14.458
|
||||
Liquid,International aviation,206.267
|
||||
Liquid,Agriculture,3.64
|
||||
Liquid,National navigation,33.218
|
||||
Liquid,Rail transport,4.413
|
||||
Marine algae,Bio-conversion,4.375
|
||||
Ngas,Gas,122.952
|
||||
Nuclear,Thermal generation,839.978
|
||||
Oil imports,Oil,504.287
|
||||
Oil reserves,Oil,107.703
|
||||
Oil,Liquid,611.99
|
||||
Other waste,Solid,56.587
|
||||
Other waste,Bio-conversion,77.81
|
||||
Pumped heat,Heating and cooling - homes,193.026
|
||||
Pumped heat,Heating and cooling - commercial,70.672
|
||||
Solar PV,Electricity grid,59.901
|
||||
Solar Thermal,Heating and cooling - homes,19.263
|
||||
Solar,Solar Thermal,19.263
|
||||
Solar,Solar PV,59.901
|
||||
Solid,Agriculture,0.882
|
||||
Solid,Thermal generation,400.12
|
||||
Solid,Industry,46.477
|
||||
Thermal generation,Electricity grid,525.531
|
||||
Thermal generation,Losses,787.129
|
||||
Thermal generation,District heating,79.329
|
||||
Tidal,Electricity grid,9.452
|
||||
UK land based bioenergy,Bio-conversion,182.01
|
||||
Wave,Electricity grid,19.013
|
||||
Wind,Electricity grid,289.366
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Agricultural 'waste',Bio-conversion,124.729
|
||||
Bio-conversion,Liquid,0.597
|
||||
Bio-conversion,Losses,26.862
|
||||
Bio-conversion,Solid,280.322
|
||||
Bio-conversion,Gas,81.144
|
||||
Biofuel imports,Liquid,35
|
||||
Biomass imports,Solid,35
|
||||
Coal imports,Coal,11.606
|
||||
Coal reserves,Coal,63.965
|
||||
Coal,Solid,75.571
|
||||
District heating,Industry,10.639
|
||||
District heating,Heating and cooling - commercial,22.505
|
||||
District heating,Heating and cooling - homes,46.184
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
Electricity grid,Industry,342.165
|
||||
Electricity grid,Road transport,37.797
|
||||
Electricity grid,Agriculture,4.412
|
||||
Electricity grid,Heating and cooling - commercial,40.858
|
||||
Electricity grid,Losses,56.691
|
||||
Electricity grid,Rail transport,7.863
|
||||
Electricity grid,Lighting & appliances - commercial,90.008
|
||||
Electricity grid,Lighting & appliances - homes,93.494
|
||||
Gas imports,Ngas,40.719
|
||||
Gas reserves,Ngas,82.233
|
||||
Gas,Heating and cooling - commercial,0.129
|
||||
Gas,Losses,1.401
|
||||
Gas,Thermal generation,151.891
|
||||
Gas,Agriculture,2.096
|
||||
Gas,Industry,48.58
|
||||
Geothermal,Electricity grid,7.013
|
||||
H2 conversion,H2,20.897
|
||||
H2 conversion,Losses,6.242
|
||||
H2,Road transport,20.897
|
||||
Hydro,Electricity grid,6.995
|
||||
Liquid,Industry,121.066
|
||||
Liquid,International shipping,128.69
|
||||
Liquid,Road transport,135.835
|
||||
Liquid,Domestic aviation,14.458
|
||||
Liquid,International aviation,206.267
|
||||
Liquid,Agriculture,3.64
|
||||
Liquid,National navigation,33.218
|
||||
Liquid,Rail transport,4.413
|
||||
Marine algae,Bio-conversion,4.375
|
||||
Ngas,Gas,122.952
|
||||
Nuclear,Thermal generation,839.978
|
||||
Oil imports,Oil,504.287
|
||||
Oil reserves,Oil,107.703
|
||||
Oil,Liquid,611.99
|
||||
Other waste,Solid,56.587
|
||||
Other waste,Bio-conversion,77.81
|
||||
Pumped heat,Heating and cooling - homes,193.026
|
||||
Pumped heat,Heating and cooling - commercial,70.672
|
||||
Solar PV,Electricity grid,59.901
|
||||
Solar Thermal,Heating and cooling - homes,19.263
|
||||
Solar,Solar Thermal,19.263
|
||||
Solar,Solar PV,59.901
|
||||
Solid,Agriculture,0.882
|
||||
Solid,Thermal generation,400.12
|
||||
Solid,Industry,46.477
|
||||
Thermal generation,Electricity grid,525.531
|
||||
Thermal generation,Losses,787.129
|
||||
Thermal generation,District heating,79.329
|
||||
Tidal,Electricity grid,9.452
|
||||
UK land based bioenergy,Bio-conversion,182.01
|
||||
Wave,Electricity grid,19.013
|
||||
Wind,Electricity grid,289.366
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
|
||||
|
||||
It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
|
||||
|
||||
- CSV must contain **3 columns only**
|
||||
- It is **allowed** to have **empty lines** without comma separators for visual purposes
|
||||
|
||||
### Basic
|
||||
|
||||
It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
%% source,target,value
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
%% source,target,value
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
```
|
||||
|
||||
### Empty Lines
|
||||
|
||||
CSV does not support empty lines without comma delimeters by default. But you can add them if needed:
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
### Commas
|
||||
|
||||
If you need to have a comma, wrap it in double quotes:
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
Pumped heat,"Heating and cooling, homes",193.026
|
||||
Pumped heat,"Heating and cooling, commercial",70.672
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Pumped heat,"Heating and cooling, homes",193.026
|
||||
Pumped heat,"Heating and cooling, commercial",70.672
|
||||
```
|
||||
|
||||
### Double Quotes
|
||||
|
||||
If you need to have double quote, put a pair of them inside quoted string:
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
Pumped heat,"Heating and cooling, ""homes""",193.026
|
||||
Pumped heat,"Heating and cooling, ""commercial""",70.672
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Pumped heat,"Heating and cooling, ""homes""",193.026
|
||||
Pumped heat,"Heating and cooling, ""commercial""",70.672
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
You can customize link colors, node alignments and diagram dimensions.
|
||||
|
||||
```html
|
||||
<script>
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
sankey: {
|
||||
width: 800,
|
||||
height: 400,
|
||||
linkColor: 'source',
|
||||
nodeAlignment: 'left',
|
||||
},
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
|
||||
### Links Coloring
|
||||
|
||||
You can adjust links' color by setting `linkColor` to one of those:
|
||||
|
||||
- `source` - link will be of a source node color
|
||||
- `target` - link will be of a target node color
|
||||
- `gradient` - link color will be smoothly transient between source and target node colors
|
||||
- hex code of color, like `#a1a1a1`
|
||||
|
||||
### Node Alignment
|
||||
|
||||
Graph layout can be changed by setting `nodeAlignment` to:
|
||||
|
||||
- `justify`
|
||||
- `center`
|
||||
- `left`
|
||||
- `right`
|
||||
@@ -94,6 +94,43 @@ sequenceDiagram
|
||||
J->>A: Great!
|
||||
```
|
||||
|
||||
### Actor Creation and Destruction (v10.3.0+)
|
||||
|
||||
It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
|
||||
|
||||
create participant B
|
||||
A --> B: Hello
|
||||
|
||||
Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
Alice->>Bob: Hello Bob, how are you ?
|
||||
Bob->>Alice: Fine, thank you. And you?
|
||||
create participant Carl
|
||||
Alice->>Carl: Hi Carl!
|
||||
create actor D as Donald
|
||||
Carl->>D: Hi!
|
||||
destroy Carl
|
||||
Alice-xCarl: We are too many
|
||||
destroy Bob
|
||||
Bob->>Alice: I agree
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>Bob: Hello Bob, how are you ?
|
||||
Bob->>Alice: Fine, thank you. And you?
|
||||
create participant Carl
|
||||
Alice->>Carl: Hi Carl!
|
||||
create actor D as Donald
|
||||
Carl->>D: Hi!
|
||||
destroy Carl
|
||||
Alice-xCarl: We are too many
|
||||
destroy Bob
|
||||
Bob->>Alice: I agree
|
||||
```
|
||||
|
||||
### Grouping / Box
|
||||
|
||||
The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
|
||||
|
||||
@@ -487,7 +487,7 @@ where
|
||||
- the second _property_ is `color` and its _value_ is `white`
|
||||
- the third _property_ is `font-weight` and its _value_ is `bold`
|
||||
- the fourth _property_ is `stroke-width` and its _value_ is `2px`
|
||||
- the fifth _property_ is `stroke` and its _value_ is `yello`
|
||||
- the fifth _property_ is `stroke` and its _value_ is `yellow`
|
||||
|
||||
### Apply classDef styles to states
|
||||
|
||||
|
||||
Reference in New Issue
Block a user