Add Class-diagram example

This commit is contained in:
HustLion 2016-07-27 19:29:15 +08:00
parent f9491ef193
commit 1026ad7011
2 changed files with 64 additions and 38 deletions

102
README.md
View File

@ -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 The code below would render the following image
<table> <table>
<tr><th>Code</th><th>Rendered diagram</th></tr> <tr><th>Code</th><th>Rendered diagram</th></tr>
<tr><td> <tr>
<pre> <td>
<code> <pre>
graph TD; <code>
A-->B; graph TD;
A-->C; A-->B;
B-->D; A-->C;
C-->D; B-->D;
<code> C-->D;
</pre> </code>
</td> </pre>
<td> </td>
<img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'> <td>
</td> <img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
</tr> </td>
<tr> </tr>
<td> <tr>
<pre> <td>
<code> <pre>
sequenceDiagram <code>
participant Alice sequenceDiagram
participant Bob participant Alice
Alice->>John: Hello John, how are you? participant Bob
loop Healthcheck Alice->>John: Hello John, how are you?
John->>John: Fight against hypochondria loop Healthcheck
end John->>John: Fight against hypochondria
Note right of John: Rational thoughts &lt;br/>prevail... end
John-->>Alice: Great! Note right of John: Rational thoughts &lt;br/>prevail...
John->>Bob: How about you? John-->>Alice: Great!
Bob-->>John: Jolly good! John->>Bob: How about you?
</code> Bob-->>John: Jolly good!
</pre> </code>
</td> </pre>
<td> </td>
<img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'> <td>
</td> <img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
</tr> </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> </table>
## Further reading ## Further reading

BIN
docs/img/class-diagram.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB