diff --git a/babel.config.js b/babel.config.js
index c76a0d028..c0f6a11d4 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,9 +3,7 @@ module.exports = {
[
'@babel/preset-env',
{
- targets: {
- node: 'current'
- }
+ targets: "defaults, ie >= 11, current node"
}
]
]
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index 0125a4373..29c4aba86 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -2,7 +2,7 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('Class diagram', () => {
- it('should render a simple class diagram', () => {
+ it('1: should render a simple class diagram', () => {
imgSnapshotTest(
`
classDiagram
@@ -33,7 +33,8 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
- it('should render a simple class diagrams with cardinality', () => {
+
+ it('2: should render a simple class diagrams with cardinality', () => {
imgSnapshotTest(
`
classDiagram
@@ -132,4 +133,34 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
+
+ it('4: should render a simple class diagram with comments', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ %% this is a comment
+ Class01 <|-- AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 *-- Class04
+ Class05 o-- Class06
+ Class07 .. Class08
+ Class09 --> C2 : Where am i?
+ Class09 --* C3
+ Class09 --|> Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
});
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 5cf75f53e..a27f3b50c 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -14,6 +14,7 @@ describe('Flowcart', () => {
{ flowchart: { htmlLabels: false } }
);
});
+
it('2: should render a simple flowchart with htmlLabels', () => {
imgSnapshotTest(
`graph TD
@@ -26,6 +27,7 @@ describe('Flowcart', () => {
{ flowchart: { htmlLabels: true } }
);
});
+
it('3: should render a simple flowchart with line breaks', () => {
imgSnapshotTest(
`
@@ -99,6 +101,7 @@ describe('Flowcart', () => {
{}
);
});
+
it('6: should render a flowchart full of icons', () => {
imgSnapshotTest(
`
@@ -178,6 +181,7 @@ describe('Flowcart', () => {
{}
);
});
+
it('8: should render subgraphs', () => {
imgSnapshotTest(
`
@@ -190,7 +194,7 @@ describe('Flowcart', () => {
);
});
- it('9: should render subgraphs with a title startign with a digit', () => {
+ it('9: should render subgraphs with a title starting with a digit', () => {
imgSnapshotTest(
`
graph TB
@@ -237,7 +241,7 @@ describe('Flowcart', () => {
);
});
- it('11: should render a flowchart with ling sames and class definitoins', () => {
+ it('11: should render a flowchart with long names and class definitions', () => {
imgSnapshotTest(
`graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -356,6 +360,7 @@ describe('Flowcart', () => {
}
);
});
+
it('13: should render hexagons', () => {
imgSnapshotTest(
`
@@ -377,4 +382,18 @@ describe('Flowcart', () => {
}
);
});
+
+ it('14: should render a simple flowchart with comments', () => {
+ imgSnapshotTest(
+ `graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ %% this is a comment
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ `,
+ { flowchart: { htmlLabels: false } }
+ );
+ });
});
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
new file mode 100644
index 000000000..c586863d9
--- /dev/null
+++ b/cypress/platform/current.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
info below
+
graph TB
+ a --> b
+ a --> c
+ a --> d
+
+
+
+
+
+
diff --git a/docs/README.md b/docs/README.md
index 409d4f40c..a28e1f21a 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -14,10 +14,12 @@ type, state diagrams.
## Special note regarding version 8.2
-In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced wich sets the level of trust to be used on the parsed diagrams.
+In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced which sets the level of trust to be used on the parsed diagrams.
* **true**: (default) tags in text are encoded, click functionality is disabled
-* false: tags in text are allowed, click functionality is enabledClosed issues:
+* false: tags in text are allowed, click functionality is enabled
+
+Closed issues:
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the securityLevel is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
@@ -39,7 +41,7 @@ Ever wanted to simplify documentation and avoid heavy tools like Visio when expl
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
-**Mermaid was nomiated and won the JS Open Source Awards (2019) in the catory The most existing use of technology!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
+**Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
### Flowchart
@@ -168,15 +170,15 @@ https://mermaidjs.github.io
# Request for assistance
-Things are piling up and I have hard time keeping up. To remedy this
+Things are piling up and I have a hard time keeping up. To remedy this
it would be great if we could form a core team of developers to cooperate
-with the future development mermaid.
+with the future development of mermaid.
As part of this team you would get write access to the repository and would
represent the project when answering questions and issues.
Together we could continue the work with things like:
-* adding more types of diagrams like mindmaps, ert diagrams etc
+* adding more types of diagrams like mindmaps, ert diagrams, etc.
* improving existing diagrams
Don't hesitate to contact me if you want to get involved.
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 8bf4b1d33..16dd3de63 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -14,8 +14,15 @@
- [State Diagram](stateDiagram.md)
- [Gantt](gantt.md)
- [Pie Chart](pie.md)
+
- Guide
- [Development](development.md)
- [mermaidAPI](mermaidAPI.md)
- - [Changelog](CHANGELOG.md)
\ No newline at end of file
+ - [Changelog](CHANGELOG.md)
+
+- I'm a n00b
+ - [overview](n00b-overview.md)
+ - [Getting started - easier](n00b-gettingStarted.md)
+ - [Diagram syntax intro](n00b-syntaxReference.md)
+ - [Advanced usage](n00b-advanced.md)
diff --git a/docs/classDiagram.md b/docs/classDiagram.md
index 057618d4a..6e838c6cd 100644
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@@ -322,7 +322,20 @@ class Color{
}
```
+## Comments
+Comments can be entered within a class 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 after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax
+
+```
+classDiagram
+%% This whole line is a comment classDiagram class Shape <>
+class Shape{
+ <>
+ noOfVertices
+ draw()
+}
+
+```
## Styling
diff --git a/docs/flowchart.md b/docs/flowchart.md
index c0fe7ad6e..a8e40a145 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -424,6 +424,16 @@ Beginners tip, a full example using interactive links in a html context:
```
+### 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 after the start of the comment to the next newline will be treated as a comment, including any flow syntax
+
+```
+graph LR
+%% this is a comment A -- text --> B{node}
+ A -- text --> B -- text2 --> C
+```
+
## Styling and classes
### Styling links
diff --git a/docs/gantt.md b/docs/gantt.md
index 6363011d7..80421bb35 100755
--- a/docs/gantt.md
+++ b/docs/gantt.md
@@ -173,6 +173,23 @@ More info in: http://momentjs.com/docs/#/parsing/string-format/
More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
+## Comments
+
+Comments can be entered within a gantt chart, 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 after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+
+```
+gantt
+ title A Gantt Diagram
+ %% this is a comment
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+
+```
## Styling
diff --git a/docs/img/n00b-Confluence1.png b/docs/img/n00b-Confluence1.png
new file mode 100644
index 000000000..106b7dca6
Binary files /dev/null and b/docs/img/n00b-Confluence1.png differ
diff --git a/docs/img/n00b-Confluence2.png b/docs/img/n00b-Confluence2.png
new file mode 100644
index 000000000..2b7ed4362
Binary files /dev/null and b/docs/img/n00b-Confluence2.png differ
diff --git a/docs/img/n00b-Confluence3.png b/docs/img/n00b-Confluence3.png
new file mode 100644
index 000000000..c2c4cc763
Binary files /dev/null and b/docs/img/n00b-Confluence3.png differ
diff --git a/docs/img/n00b-Confluence4.png b/docs/img/n00b-Confluence4.png
new file mode 100644
index 000000000..63b460070
Binary files /dev/null and b/docs/img/n00b-Confluence4.png differ
diff --git a/docs/img/n00b-firstFlow.png b/docs/img/n00b-firstFlow.png
new file mode 100644
index 000000000..c10174151
Binary files /dev/null and b/docs/img/n00b-firstFlow.png differ
diff --git a/docs/img/n00b-liveEditor.png b/docs/img/n00b-liveEditor.png
new file mode 100644
index 000000000..071a44fca
Binary files /dev/null and b/docs/img/n00b-liveEditor.png differ
diff --git a/docs/index.html b/docs/index.html
index 207568bee..6a9ac5a27 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,8 +7,20 @@
+ 
+ 
+ 
+ 
+ 
+ 