From 6a2f62a084f858da5a62e2d4862ef32dab0eebe8 Mon Sep 17 00:00:00 2001 From: Tyler Long Date: Sat, 16 Sep 2017 10:27:17 +0800 Subject: [PATCH] Update readme --- README.md | 149 ++++++++++++++++++++++-------------------------------- 1 file changed, 61 insertions(+), 88 deletions(-) diff --git a/README.md b/README.md index e4be2cb56..06c260cac 100644 --- a/README.md +++ b/README.md @@ -12,31 +12,22 @@ 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. -The code below would render the following image - - - - - - - - - - - - - - - - - - - - - - +commit +branch newbranch +checkout newbranch +commit +commit +checkout master +commit +commit +merge newbranch -
CodeRendered diagram
- 
-                
+
+### Flowchart
+
+```
 graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
-                
-
- 		-

- Flowchart -

-
- 
-                
+```
+![Flowchart](./img/flow.png)
+
+
+### Sequence diagram
+
+```
 sequenceDiagram
     participant Alice
     participant Bob
@@ -44,21 +35,17 @@ sequenceDiagram
     loop Healthcheck
         John->>John: Fight against hypochondria
     end
-    Note right of John: Rational thoughts <br/>prevail...
+    Note right of John: Rational thoughts 
prevail...
     John-->>Alice: Great!
     John->>Bob: How about you?
     Bob-->>John: Jolly good!
-                
-
- 		- Sequence Diagram -
- 
-                
+```
+![Sequence diagram](./img/sequence.png)
+
+
+### Gantt diagram
+
+```
 gantt
 dateFormat  YYYY-MM-DD
 title Adding GANTT diagram to mermaid
@@ -68,68 +55,54 @@ Completed task            :done,    des1, 2014-01-06,2014-01-08
 Active task               :active,  des2, 2014-01-09, 3d
 Future task               :         des3, after des2, 5d
 Future task2               :         des4, after des3, 5d
-                
-
- 		- Gantt Diagram -
- 
-                
+```
+![Gantt diagram](./img/gantt.png)
+
+
+### Class diagram - experimental
+
+```
 classDiagram
-    Class01 <|-- AveryLongClass : Cool
-    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 Diagram -
- 
-                
-gitGraph :
+Class01 <|-- AveryLongClass : Cool
+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 diagram](./img/class.png)
+
+
+### Git graph - experimental
+
+```
+gitGraph:
 options
 {
-    "key": "value",
-    "nodeWidth": 150,
-    "nodeSpacing" : 150
+    "nodeSpacing": 150,
+    "nodeRadius": 10
 }
 end
-    commit
-    branch newbranch
-    checkout newbranch
-    commit
-    commit
-    checkout master
-    commit
-    commit
-    merge newbranch
-                
-
- 		- Git Graph -
+``` + +![Git graph](./img/git.png) ## Installation