mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-02-04 07:13:25 +08:00
Add Class-diagram example
This commit is contained in:
parent
f9491ef193
commit
1026ad7011
102
README.md
102
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
|
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 <br/>prevail...
|
end
|
||||||
John-->>Alice: Great!
|
Note right of John: Rational thoughts <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
BIN
docs/img/class-diagram.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 26 KiB |
Loading…
x
Reference in New Issue
Block a user