marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-01 14:46:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update readme

Browse Source
This commit is contained in:
Tyler Long
2017-09-16 10:27:17 +08:00
parent 1ec262becf
commit 6a2f62a084
1 changed files with 61 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
README.md
View File

@@ -12,31 +12,22 @@ Ever wanted to simplify documentation and avoid heavy tools like Visio when expl
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
The code below would render the following image
<table> ### Flowchart
<tr><th>Code</th><th>Rendered diagram</th></tr>
<tr> ```
<td>
<pre>
<code>
graph TD; graph TD;
A-->B; A-->B;
A-->C; A-->C;
B-->D; B-->D;
C-->D; C-->D;
</code> ```
</pre> ![Flowchart](./img/flow.png)
</td>
<td>
<p align="center"> ### Sequence diagram
<img src='./img/flow.png' alt='Flowchart'>
</p> ```
</td>
</tr>
<tr>
<td>
<pre>
<code>
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob
@@ -44,21 +35,17 @@ sequenceDiagram
loop Healthcheck loop Healthcheck
John->>John: Fight against hypochondria John->>John: Fight against hypochondria
end end
Note right of John: Rational thoughts &lt;br/>prevail... Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great! John-->>Alice: Great!
John->>Bob: How about you? John->>Bob: How about you?
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
</code> ```
</pre> ![Sequence diagram](./img/sequence.png)
</td>
<td>
<img src='./img/sequence.png' alt='Sequence Diagram'> ### Gantt diagram
</td>
</tr> ```
<tr>
<td>
<pre>
<code>
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid title Adding GANTT diagram to mermaid
@@ -68,68 +55,54 @@ Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d Future task2 : des4, after des3, 5d
</code> ```
</pre> ![Gantt diagram](./img/gantt.png)
</td>
<td>
<img src='./img/gantt.png' alt='Gantt Diagram'> ### Class diagram - experimental
</td>
</tr> ```
<tr>
<td>
<pre>
<code>
classDiagram classDiagram
Class01 &lt;|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04 Class03 *-- Class04
Class05 o-- Class06 Class05 o-- Class06
Class07 .. Class08 Class07 .. Class08
Class09 --> C2 : Where am i? Class09 --> C2 : Where am i?
Class09 --* C3 Class09 --* C3
Class09 --|> Class07 Class09 --|> Class07
Class07 : equals() Class07 : equals()
Class07 : Object[] elementData Class07 : Object[] elementData
Class01 : size() Class01 : size()
Class01 : int chimp Class01 : int chimp
Class01 : int gorilla Class01 : int gorilla
Class08 &lt;--> C2: Cool label Class08 <--> C2: Cool label
</code> ```
</pre> ![Class diagram](./img/class.png)
</td>
<td>
<img src='./img/class.png' alt='Class Diagram'> ### Git graph - experimental
</td>
</tr> ```
<tr> gitGraph:
<td>
<pre>
<code>
gitGraph :
options options
{ {
"key": "value", "nodeSpacing": 150,
"nodeWidth": 150, "nodeRadius": 10
"nodeSpacing" : 150
} }
end end
commit commit
branch newbranch branch newbranch
checkout newbranch checkout newbranch
commit commit
commit commit
checkout master checkout master
commit commit
commit commit
merge newbranch merge newbranch
</code>
</pre>
</td>
<td>
<img src='./img/git.png' alt='Git Graph'>
</td>
</tr>
</table> ```
![Git graph](./img/git.png)
## Installation ## Installation