Add Class-diagram example

README.md

@@ -12,44 +12,70 @@ 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>
-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>
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts &lt;br/>prevail...
-    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>
+    <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>
+                    sequenceDiagram
+                        participant Alice
+                        participant Bob
+                        Alice->>John: Hello John, how are you?
+                        loop Healthcheck
+                        John->>John: Fight against hypochondria
+                        end
+                        Note right of John: Rational thoughts &lt;br/>prevail...
+                        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>
+    <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