1 | -->
|
2 | | :mega: :mega: :mega: |
|
3 | | :----: |
|
4 | | * If you're upgrading from a version __< v8.2.0__, there are [non-backward-compatible changes](http://mermaid-js.github.io/mermaid/#/usage?id=to-enable-click-event-and-tags-in-nodes) related to security issues. Default behaviour of the library might have changed for your implementation.|
|
5 | -->
|
6 |
|
7 | # mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
|
8 | -->
|
9 | __Generate diagrams, charts, graphs or flows from markdown-like text via javascript.__
|
10 | See our [documentation](http://mermaid-js.github.io/mermaid/) and start simplifying yours. Play in our [live editor](https://mermaidjs.github.io/mermaid-live-editor/) or jump straight to the [installation and usage](http://mermaid-js.github.io/mermaid/#/usage).
|
11 | -->
|
12 |
|
13 | :trophy: _"The most exciting use of technology"_ - [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees)
|
14 |
|
15 | <table>
|
16 | -->
|
17 | <tr><td colspan=2 align="center">
|
18 | <b>Flow</b></br>
|
19 | [<a href="http://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
20 | </td></tr>
|
21 | <tr>
|
22 | <td><pre>
|
23 | graph TD
|
24 | A[Hard] -->|Text| B(Round)
|
25 | B --> C{Decision}
|
26 | C -->|One| D[Result 1]
|
27 | C -->|Two| E[Result 2]
|
28 | </pre></td>
|
29 | <td align="center">
|
30 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-flow.png" />
|
31 | </td>
|
32 | </tr>
|
33 | -->
|
34 | -->
|
35 | <tr><td colspan=2 align="center">
|
36 | <b>Sequence</b><br />
|
37 | [<a href="http://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
38 | </td></tr>
|
39 | <tr>
|
40 | <td><pre>
|
41 | sequenceDiagram
|
42 | Alice->>John: Hello John, how are you?
|
43 | loop Healthcheck
|
44 | John->>John: Fight against hypochondria
|
45 | end
|
46 | Note right of John: Rational thoughts!
|
47 | John-->>Alice: Great!
|
48 | John->>Bob: How about you?
|
49 | Bob-->>John: Jolly good!
|
50 | </pre></td>
|
51 | <td align="center">
|
52 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-sequence.png" />
|
53 | </td>
|
54 | </tr>
|
55 | -->
|
56 | -->
|
57 | <tr><td colspan=2 align="center">
|
58 | <b>Gantt</b><br />
|
59 | [<a href="http://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
60 | </td></tr>
|
61 | <tr>
|
62 | <td><pre>
|
63 | gantt
|
64 | section Section
|
65 | Completed :done, des1, 2014-01-06,2014-01-08
|
66 | Active :active, des2, 2014-01-07, 3d
|
67 | Parallel 1 : des3, after des1, 1d
|
68 | Parallel 2 : des4, after des1, 1d
|
69 | Parallel 3 : des5, after des3, 1d
|
70 | Parallel 4 : des6, after des4, 1d
|
71 | </pre></td>
|
72 | <td align="center">
|
73 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-gantt.png" />
|
74 | </td>
|
75 | </tr>
|
76 | -->
|
77 | -->
|
78 | <tr><td colspan=2 align="center">
|
79 | <b>Class</b><br />
|
80 | [<a href="http://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
81 | </td></tr>
|
82 | <tr>
|
83 | <td><pre>
|
84 | classDiagram
|
85 | Class01 <|-- AveryLongClass : Cool
|
86 | <<interface>> Class01
|
87 | Class09 --> C2 : Where am i?
|
88 | Class09 --* C3
|
89 | Class09 --|> Class07
|
90 | Class07 : equals()
|
91 | Class07 : Object[] elementData
|
92 | Class01 : size()
|
93 | Class01 : int chimp
|
94 | Class01 : int gorilla
|
95 | class Class10 {
|
96 | <<service>>
|
97 | int id
|
98 | size()
|
99 | }
|
100 | </pre></td>
|
101 | <td align="center">
|
102 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-class.png" />
|
103 | </td>
|
104 | </tr>
|
105 | -->
|
106 | -->
|
107 | <tr><td colspan=2 align="center">
|
108 | <b>State</b><br />
|
109 | [<a href="http://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
110 | </td></tr>
|
111 | <tr>
|
112 | <td><pre>
|
113 | stateDiagram
|
114 | [*] --> Still
|
115 | Still --> [*]
|
116 | Still --> Moving
|
117 | Moving --> Still
|
118 | Moving --> Crash
|
119 | Crash --> [*]
|
120 | </pre></td>
|
121 | <td align="center">
|
122 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-state.png" />
|
123 | </td>
|
124 | </tr>
|
125 | -->
|
126 | -->
|
127 | <tr><td colspan=2 align="center">
|
128 | <b>Pie</b><br />
|
129 | [<a href="http://mermaid-js.github.io/mermaid/#/pie">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
130 | </td></tr>
|
131 | <tr>
|
132 | <td><pre>
|
133 | pie
|
134 | "Dogs" : 386
|
135 | "Cats" : 85
|
136 | "Rats" : 15
|
137 | </pre></td>
|
138 | <td align="center">
|
139 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-pie.png" />
|
140 | </td>
|
141 | </tr>
|
142 | -->
|
143 | -->
|
144 | <tr><td colspan=2 align="center">
|
145 | <b>Git</b><br />
|
146 | [experimental - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
147 | </td></tr>
|
148 | <tr>
|
149 | <td colspan="2" align="center"><i>Coming soon!</i></td>
|
150 | </tr>
|
151 | -->
|
152 | </table>
|
153 |
|
154 | ## Related projects
|
155 |
|
156 | - [Command Line Interface](https://github.com/mermaid-js/mermaid.cli)
|
157 | - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
158 |
|
159 | # Contributors [![Help wanted](https://img.shields.io/github/labels/mermaid-js/mermaid/Help%20wanted!)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
|
160 |
|
161 | Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
|
162 |
|
163 | Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
|
164 |
|
165 | # Appreciation
|
166 | A quick note from Knut Sveidqvist:
|
167 | >*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!*
|
168 | >*Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
|
169 | >*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
|
170 | >
|
171 | >*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
|
172 |
|
173 | ---
|
174 |
|
175 | *Mermaid was created by Knut Sveidqvist for easier documentation.*
|