Updated documentation with comment syntax

mermaid-js · Nov 26, 2019 · d26a672 · d26a672
1 parent 4ff5c3b
commit d26a672
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 0 deletions.
diff --git 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 <<interface>>
+class Shape{
+    <<interface>>
+    noOfVertices
+    draw()
+}
+
+```
 
 ## Styling
 

diff --git a/docs/flowchart.md b/docs/flowchart.md
@@ -424,6 +424,16 @@ Beginners tip, a full example using interactive links in a html context:
 </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 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
@@ -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/sequenceDiagram.md b/docs/sequenceDiagram.md
@@ -271,7 +271,16 @@ sequenceDiagram
 
 ```
 
+## Comments
 
+Comments can be entered within a sequence 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 diagram syntax
+
+```
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    %% this is a comment
+    John-->>Alice: Great!
+```
 
 ## Styling
 

diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md
@@ -322,6 +322,21 @@ As in plantUml you can specify concurrency using the -- symbol.
         }
 ```
 
+## Comments
+
+Comments can be entered within a state diagram 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
+
+```
+stateDiagram
+    [*] --> Still
+    Still --> [*]
+%% this is a comment
+    Still --> Moving
+    Moving --> Still %% another comment
+    Moving --> Crash
+    Crash --> [*]
+```
+
 ## Styling
 
 Styling of the a state diagram is done by defining a number of css classes.  During rendering these classes are extracted from the file located at src/themes/state.scss