2014-12-31 11:32:25 +01:00
2014-12-13 21:34:39 +01:00
mermaid [![Build Status ](https://travis-ci.org/knsv/mermaid.svg?branch=master )](https://travis-ci.org/knsv/mermaid) [![Code Climate ](https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg )](https://codeclimate.com/github/knsv/mermaid)
2014-11-02 00:52:32 +01:00
=======
2015-06-07 21:09:09 +02:00
2015-10-23 20:12:08 +02:00
[![Join the chat at https://gitter.im/knsv/mermaid ](https://badges.gitter.im/Join%20Chat.svg )](https://gitter.im/knsv/mermaid?utm_source=badge& utm_medium=badge& utm_campaign=pr-badge& utm_content=badge)
2014-11-16 19:00:01 +01:00
Generation of diagrams and flowcharts from text in a similar manner as markdown.
2014-11-02 01:01:23 +01:00
2014-11-16 19:00:01 +01:00
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
2014-11-02 01:01:23 +01:00
2014-11-15 21:28:26 +01:00
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
2014-11-02 01:01:23 +01:00
2014-11-16 19:00:01 +01:00
The code below would render the following image
2014-12-22 13:22:45 +01:00
< table >
2016-07-27 13:29:15 +02:00
< tr > < th > Code< / th > < th > Rendered diagram< / th > < / tr >
< tr >
< td >
< pre >
< code >
2016-07-27 13:31:21 +02:00
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
2016-07-27 13:29:15 +02:00
< / code >
< / pre >
< / td >
2016-07-27 13:55:39 +02:00
< td >
< p align = "center" >
< img src = 'http://www.sveido.com/mermaid/img/ex1.png' alt = 'Example 1' >
< / p >
2016-07-27 13:29:15 +02:00
< / td >
< / tr >
< tr >
< td >
< pre >
< code >
2016-07-27 13:31:21 +02:00
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
2016-07-27 13:57:50 +02:00
John->>John: Fight against hypochondria
2016-07-27 13:31:21 +02:00
end
Note right of John: Rational thoughts < br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
2016-07-27 13:29:15 +02:00
< / code >
< / pre >
< / td >
< td >
< img src = 'http://www.sveido.com/mermaid/img/seq1.png' alt = 'Example 2' >
< / td >
< / tr >
< tr >
< td >
< pre >
< code >
2016-07-27 13:31:21 +02:00
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
2016-07-27 13:29:15 +02:00
< / code >
< / pre >
< / td >
< td >
< img src = './docs/img/class-diagram.png' alt = 'Example 3' >
< / td >
< / tr >
2014-12-22 13:22:45 +01:00
< / table >
2014-11-15 21:28:26 +01:00
2014-12-31 11:32:25 +01:00
## Further reading
2014-12-21 02:46:23 +01:00
2015-10-30 07:06:36 +01:00
* [Usage ](http://knsv.github.io/mermaid/#usage )
* [Flowchart syntax ](http://knsv.github.io/mermaid/#flowcharts-basic-syntax )
* [Sequence diagram syntax ](http://knsv.github.io/mermaid/#sequence-diagrams )
* [Mermaid client ](http://knsv.github.io/mermaid/#mermaid-cli )
* [Demos ](http://knsv.github.io/mermaid/#demos )
2014-12-03 20:03:15 +01:00
2014-11-15 21:28:26 +01:00
# Credits
2014-12-31 11:32:25 +01:00
Many thanks to the [d3 ](http://d3js.org/ ) and [dagre-d3 ](https://github.com/cpettitt/dagre-d3 ) projects for providing
the graphical layout and drawing libraries! Thanks also to the
[js-sequence-diagram ](http://bramp.github.io/js-sequence-diagrams ) project for usage of the grammar for the
2015-03-01 16:29:41 +01:00
sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.
2014-12-12 19:05:27 +01:00
*Mermaid was created by Knut Sveidqvist for easier documentation.*
2014-12-31 11:32:25 +01:00
Knut has not done all work by him self, here is the full list of the projects [contributors ](https://github.com/knsv/mermaid/graphs/contributors ).