diff --git a/README.md b/README.md index fd13915f4..e8ffba65c 100644 --- a/README.md +++ b/README.md @@ -35,32 +35,29 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo ## Examples __The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Flow
- [docs - live editor] -
-flowchart TD
+
+## Flowchart [docs - live editor]
+
+```
+flowchart LR
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
-
- -
- Sequence
- [docs - live editor] -
+```
+```mermaid
+flowchart LR
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
+
+## Sequence diagram [docs - live editor]
+
+```
 sequenceDiagram
 Alice->>John: Hello John, how are you?
 loop Healthcheck
@@ -70,43 +67,48 @@ Note right of John: Rational thoughts!
 John-->>Alice: Great!
 John->>Bob: How about you?
 Bob-->>John: Jolly good!
-
- -
- Gantt
- [docs - live editor] -
+```
+```mermaid
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+    John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+```
+
+## Gantt chart [docs - live editor]
+
+```
 gantt
-section Section
-Completed :done,    des1, 2014-01-06,2014-01-08
-Active        :active,  des2, 2014-01-07, 3d
-Parallel 1   :         des3, after des1, 1d
-Parallel 2   :         des4, after des1, 1d
-Parallel 3   :         des5, after des3, 1d
-Parallel 4   :         des6, after des4, 1d
-
- -
- Class
- [docs - live editor] -
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+```
+```mermaid
+gantt
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+```
+
+## Class diagram [docs - live editor]
+
+```
 classDiagram
-Class01 <|-- AveryLongClass : Cool
-<<interface>> Class01
+Class01 <|-- AveryLongClass : Cool
+<> Class01
 Class09 --> C2 : Where am i?
 Class09 --* C3
 Class09 --|> Class07
@@ -116,23 +118,32 @@ Class01 : size()
 Class01 : int chimp
 Class01 : int gorilla
 class Class10 {
-  <<service>>
+  <>
   int id
   size()
 }
-
 - -
- State
- [docs - live editor] -
+```
+```mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<> Class01
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  <>
+  int id
+  size()
+}
+```
+
+## State diagram [docs - live editor]
+```
 stateDiagram-v2
 [*] --> Still
 Still --> [*]
@@ -140,46 +151,36 @@ Still --> Moving
 Moving --> Still
 Moving --> Crash
 Crash --> [*]
-
 - -
- Pie
- [docs - live editor] -
+```
+```mermaid
+stateDiagram-v2
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+```
+
+### Pie chart [docs - live editor]
+
+```
 pie
 "Dogs" : 386
 "Cats" : 85
 "Rats" : 15
-
 - -
- Git
- [experimental - live editor] -
Coming soon!
- User Journey
- [docs - live editor] -
- 
+```
+```mermaid
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+```
+
+## Git graph [experimental - live editor]
+
+## User Journey diagram [docs - live editor]
+```
   journey
     title My working day
     section Go to work
@@ -189,14 +190,18 @@ pie
     section Go home
       Go downstairs: 5: Me
       Sit down: 3: Me
-
 - User Journey Diagram -
+``` +```mermaid + journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 3: Me +``` ## Related projects @@ -223,4 +228,4 @@ A quick note from Knut Sveidqvist: --- -*Mermaid was created by Knut Sveidqvist for easier documentation.* +*Mermaid was created by Knut Sveidqvist for easier documentation.* \ No newline at end of file