-stateDiagram
+stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index fc35980bc..d5c59a0fd 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -324,5 +324,37 @@ end
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
+ it('59: handle styling of subgraphs and links', () => {
+ imgSnapshotTest(
+ `
+flowchart TD
+ A[Christmas] ==> D
+ A[Christmas] -->|Get money| B(Go shopping)
+ A[Christmas] ==> C
+ subgraph T ["Test"]
+ A
+ B
+ C
+ end
+
+ classDef Test fill:#F84E68,stroke:#333,color:white;
+ class A,T Test
+ classDef TestSub fill:green;
+ class T TestSub
+ linkStyle 0,1 color:orange, stroke: orange;
+ `,
+ {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ );
+ });
+ it('61: fontawesome icons in edge labels', () => {
+ imgSnapshotTest(
+ `
+ flowchart TD
+ C -->|fa:fa-car Car| F[fa:fa-car Car]
+ `,
+ {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ );
+ });
+
});
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index eb8c8cf81..763dde713 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -787,5 +787,14 @@ describe('Flowchart', () => {
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
+ it('61: fontawesome icons in edge labels', () => {
+ imgSnapshotTest(
+ `
+graph TD
+ C -->|fa:fa-car Car| F[fa:fa-car Car]
+ `,
+ {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ );
+ });
});
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index d7a5cee31..558de5f9d 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -23,35 +23,45 @@
info below
-flowchart TD
- subgraph main
- subgraph subcontainer
- subcontainer-child
- end
- subcontainer-child--> subcontainer-sibling
+graph TD
+ A[Christmas] ==> D
+ A[Christmas] -->|Get money| B(Go shopping)
+ A[Christmas] ==> C
+ subgraph T ["Test"]
+ A
+ B
+ C
end
+ classDef Test fill:#F84E68,stroke:#333,color:white;
+ class A,T Test
+ classDef TestSub fill:green;
+ class T TestSub
+ linkStyle 0,1 color:orange, stroke: orange;
-
-flowchart TB
- b-->B
- a-->c
- subgraph B
- c
- end
- subgraph A
- a
- b
- B
- end
+
+flowchart TD
+ A[Christmas] ==> D
+ A[Christmas] -->|Get money| B(Go shopping)
+ A[Christmas] ==> C
+ subgraph T ["Test"]
+ A
+ B
+ C
+ end
+
+ classDef Test fill:#F84E68,stroke:#333,color:white;
+ class A,T Test
+ classDef TestSub fill:green;
+ class T TestSub
+ linkStyle 0,1 color:orange, stroke: orange;
- flowchart TB
-subgraph A
-a -->b
-end
-subgraph B
-b
-end
+graph TD
+ C -->|fa:fa-car Car| F[fa:fa-car Car]
+
+
+flowchart TD
+ C -->|fa:fa-car Car| F[fa:fa-car Car]
%%{init: {"fontFamily": "arial2"}}%%
diff --git a/docs/README.md b/docs/README.md
index 5882c65e2..5a6e26ac4 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -21,7 +21,7 @@ With Mermaid less time needs to be spent on making diagrams, as a separate docum
> Mermaid is a Diagramming tool for everyone.
-Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor), Visit the [Tutorials Page](href='https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md) for the Live Editor video tutorials.
+Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](https://github.com/mermaid-js/mermaid/blob/develop/docs/getting-started/Tutorials.md) for the Live Editor video tutorials.
Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](overview/integrations.md).
@@ -196,8 +196,8 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
## Examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md)
# Sibling projects
-- [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor)
-- [Mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
+- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
+- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
diff --git a/docs/diagrams-and-syntax-and-examples/classDiagram.md b/docs/diagrams-and-syntax-and-examples/classDiagram.md
index 489c7370e..5dd1e2c64 100644
--- a/docs/diagrams-and-syntax-and-examples/classDiagram.md
+++ b/docs/diagrams-and-syntax-and-examples/classDiagram.md
@@ -231,7 +231,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes
- `#` Protected
- `~` Package/Internal
-> _note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
+> _note_ you can also include additional _classifiers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
> - `*` Abstract e.g.: `someAbstractMethod()*`
> - `$` Static e.g.: `someStaticMethod()$`
@@ -349,7 +349,7 @@ The different cardinality options are :
- `0..n` zero to n {where n>1}
- `1..n` one to n {where n>1}
-Cardinality can be easily defined by placing cardinality text within qoutes `"` before(optional) and after(optional) a given arrow.
+Cardinality can be easily defined by placing cardinality text within quotes `"` before(optional) and after(optional) a given arrow.
```
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
@@ -606,7 +606,7 @@ The main styling of the class diagram is done with a preset number of css classe
| g.classGroup line | Styles for class diagram line |
| .classLabel .box | Styles for class label box |
| .classLabel .label | Styles for class label text |
-| composition | Styles for componsition arrow head and arrow line |
+| composition | Styles for composition arrow head and arrow line |
| aggregation | Styles for aggregation arrow head and arrow line(dashed or solid) |
| dependency | Styles for dependency arrow head and arrow line |
diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md
index 6a9245e23..c332d4d94 100644
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@@ -139,7 +139,7 @@ graph LR
id1((This is the text in the circle))
```
-### A node in an asymetric shape
+### A node in an asymmetric shape
```
graph LR
@@ -356,7 +356,7 @@ graph LR
a --> b & c--> d
```
-You can then describe dependencies in a very expressive way. Like the onliner below:
+You can then describe dependencies in a very expressive way. Like the oneliner below:
```
graph TB
A & B--> C & D
@@ -493,7 +493,7 @@ graph LR
### Entity codes to escape characters
-It is possible to escape characters using the syntax examplified here.
+It is possible to escape characters using the syntax exemplified here.
```
graph LR
@@ -541,7 +541,7 @@ graph TB
end
```
- You can also set an excplicit id for the subgraph.
+ You can also set an explicit id for the subgraph.
```
graph TB
@@ -808,7 +808,7 @@ If a class is named default it will be assigned to all classes without specific
It is possible to add icons from fontawesome.
-The icons are acessed via the syntax fa:#icon class name#.
+The icons are accessed via the syntax fa:#icon class name#.
```
graph TD
diff --git a/docs/diagrams-and-syntax-and-examples/gantt.md b/docs/diagrams-and-syntax-and-examples/gantt.md
index 08dccb8da..9f0f53b24 100644
--- a/docs/diagrams-and-syntax-and-examples/gantt.md
+++ b/docs/diagrams-and-syntax-and-examples/gantt.md
@@ -10,11 +10,13 @@ title: Gantt
## A note to users
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
+
It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task.
- As shown here 
+ As shown here 
+
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
- As shown here 
+ As shown here 
A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
@@ -107,7 +109,7 @@ gantt
Add another diagram to demo page :48h
```
-It is possible to set multiple depenendenies separated by space:
+It is possible to set multiple dependencies separated by space:
```
gantt
apple :a, 2017-07-20, 1w
@@ -339,7 +341,7 @@ mermaid.ganttConfig = {
Param | Descriotion | Default value
--- | --- | ---
mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
-bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1
+bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1
## Interaction
diff --git a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md b/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md
index 8eb4ae2c9..ebc593803 100644
--- a/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md
+++ b/docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md
@@ -8,7 +8,7 @@ title: Diagram syntax intro
If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid.
Video Tutorials can be found at the bottom of the Overview Section.
-This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that can be called.
+This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called.
They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
diff --git a/docs/diagrams-and-syntax-and-examples/pie.md b/docs/diagrams-and-syntax-and-examples/pie.md
index 22bade7b8..0ff549409 100644
--- a/docs/diagrams-and-syntax-and-examples/pie.md
+++ b/docs/diagrams-and-syntax-and-examples/pie.md
@@ -30,7 +30,7 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
- Followed by dataSet
- `label` for a section in the pie diagram within `" "` quotes.
- - Followed by `:` semi-colon as separator
+ - Followed by `:` colon as separator
- Followed by `positive numeric value` (supported upto two decimal places)
[pie]
diff --git a/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md b/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md
index 1c56dc198..8ff4ccdd5 100644
--- a/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md
+++ b/docs/diagrams-and-syntax-and-examples/sequenceDiagram.md
@@ -508,11 +508,11 @@ mermaid.sequenceConfig = {
};
```
-### Possible configuration params:
+### Possible configuration parameters:
-| Param | Description | Default value |
+| Parameter | Description | Default value |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
-| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
+| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
| actorFontSize | Sets the font size for the actor's description | 14 |
| actorFontFamily | Sets the font family for the actor's description | "Open-Sans", "sans-serif" |
diff --git a/docs/getting-started/Tutorials.md b/docs/getting-started/Tutorials.md
index 87ce7d1ab..1ab371d3d 100644
--- a/docs/getting-started/Tutorials.md
+++ b/docs/getting-started/Tutorials.md
@@ -1,24 +1,21 @@
# Tutorials
-This is list of publicly available Tutorials in Mermaid. This is intended as a basic introduction for the use of the Live Editor and HTML with mermaid.
+This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
-For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it.
+For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.
## Live-Editor Tutorials
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
-https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s
+[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
-https://www.youtube.com/watch?v=5RQqht3NNSE
+[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
-https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
+[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
-https://www.youtube.com/watch?v=9HZzKkAqrX8
+[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
-https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
-
-https://www.youtube.com/watch?v=9HZzKkAqrX8
## Mermaid with HTML:
Examples are provided in [Gettting Started](n00b-gettingStarted.md)
diff --git a/docs/getting-started/n00b-gettingStarted.md b/docs/getting-started/n00b-gettingStarted.md
index adb51835f..17a154674 100644
--- a/docs/getting-started/n00b-gettingStarted.md
+++ b/docs/getting-started/n00b-gettingStarted.md
@@ -235,7 +235,7 @@ This method is similar to 3, if only a little more involved. The difference may
**Three additional comments from Knut Sveidqvist, creator of mermaid:**
-- In early versions of mermaid, the ` |