Added class diagram example to README.md

README.md

@@ -12,26 +12,29 @@ This is why mermaid was born, a simple markdown-like script language for generat
 
 The code below would render the following image
 <table>
-<tr><th>Code</th><th>Rendered diagram</th></tr>
-<tr><td>
-<pre>
-<code>
+    <tr><th>Code</th><th>Rendered diagram</th></tr>
+    <tr>
+        <td>
+            <pre>
+                <code>
 graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
-<code>
-</pre>
-</td>
-<td>
-<img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
-</td>
-</tr>
-<tr>
-<td>
-<pre>
-<code>
+                </code>
+            </pre>
+        </td>
+        <td>
+            <p align="center">
+                <img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
+            </p>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <pre>
+                <code>
 sequenceDiagram
     participant Alice
     participant Bob
@@ -43,13 +46,38 @@ sequenceDiagram
     John-->>Alice: Great!
     John->>Bob: How about you?
     Bob-->>John: Jolly good!
-</code>
-</pre>
-</td>
-<td>
-<img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
-</td>
-</tr>
+                </code>
+            </pre>
+        </td>
+        <td>
+            <img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <pre>
+                <code>
+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
+                </code>
+            </pre>
+        </td>
+        <td>
+            <img src='./docs/img/class-diagram.png' alt='Example 3'>
+        </td>
+    </tr>
 </table>
 
 ## Further reading