Merge pull request #379 from HustLion/master

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