1 | # 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)
|
2 |
|
3 | ![banner](./img/header.png)
|
4 | **Edit this Page** [![N|Solid](./docs/assets/img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
|
5 |
|
6 | :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
7 |
|
8 | **Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
9 |
|
10 | ## About
|
11 |
|
12 | -->
|
13 | Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
|
14 |
|
15 | > Doc-Rot is a Catch-22 that Mermaid helps to solve.
|
16 |
|
17 | Diagramming and documentation costs precious developer time and gets outdated quickly.
|
18 | But not having diagrams or docs ruins productivity and hurts organizational learning. <br/>
|
19 | Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
|
20 | The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code).
|
21 | So less time needs be spent on documenting, as a separate and laborious task. <br/>
|
22 | Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor). <br/>
|
23 | [Tutorials](./docs/getting-started/Tutorials.md) has video tutorials.
|
24 | Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/overview/integrations.md).
|
25 |
|
26 | For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](./docs/overview/n00b-overview.md) and [Usage](./docs/getting-started/usage.md).
|
27 |
|
28 | 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/tutorials-and-community/CHANGELOG.md)
|
29 |
|
30 | -->
|
31 |
|
32 | ## Examples
|
33 |
|
34 | __The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__
|
35 | <table>
|
36 | -->
|
37 | <tr><td colspan=2 align="center">
|
38 | <b>Flow</b></br>
|
39 | [<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>]
|
40 | </td></tr>
|
41 | <tr>
|
42 | <td><pre>
|
43 | graph TD
|
44 | A[Hard] -->|Text| B(Round)
|
45 | B --> C{Decision}
|
46 | C -->|One| D[Result 1]
|
47 | C -->|Two| E[Result 2]
|
48 | </pre></td>
|
49 | <td align="center">
|
50 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-flow.png" />
|
51 | </td>
|
52 | </tr>
|
53 | -->
|
54 | -->
|
55 | <tr><td colspan=2 align="center">
|
56 | <b>Sequence</b><br />
|
57 | [<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>]
|
58 | </td></tr>
|
59 | <tr>
|
60 | <td><pre>
|
61 | sequenceDiagram
|
62 | Alice->>John: Hello John, how are you?
|
63 | loop Healthcheck
|
64 | John->>John: Fight against hypochondria
|
65 | end
|
66 | Note right of John: Rational thoughts!
|
67 | John-->>Alice: Great!
|
68 | John->>Bob: How about you?
|
69 | Bob-->>John: Jolly good!
|
70 | </pre></td>
|
71 | <td align="center">
|
72 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-sequence.png" />
|
73 | </td>
|
74 | </tr>
|
75 | -->
|
76 | -->
|
77 | <tr><td colspan=2 align="center">
|
78 | <b>Gantt</b><br />
|
79 | [<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>]
|
80 | </td></tr>
|
81 | <tr>
|
82 | <td><pre>
|
83 | gantt
|
84 | section Section
|
85 | Completed :done, des1, 2014-01-06,2014-01-08
|
86 | Active :active, des2, 2014-01-07, 3d
|
87 | Parallel 1 : des3, after des1, 1d
|
88 | Parallel 2 : des4, after des1, 1d
|
89 | Parallel 3 : des5, after des3, 1d
|
90 | Parallel 4 : des6, after des4, 1d
|
91 | </pre></td>
|
92 | <td align="center">
|
93 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-gantt.png" />
|
94 | </td>
|
95 | </tr>
|
96 | -->
|
97 | -->
|
98 | <tr><td colspan=2 align="center">
|
99 | <b>Class</b><br />
|
100 | [<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>]
|
101 | </td></tr>
|
102 | <tr>
|
103 | <td><pre>
|
104 | classDiagram
|
105 | Class01 <|-- AveryLongClass : Cool
|
106 | <<interface>> Class01
|
107 | Class09 --> C2 : Where am i?
|
108 | Class09 --* C3
|
109 | Class09 --|> Class07
|
110 | Class07 : equals()
|
111 | Class07 : Object[] elementData
|
112 | Class01 : size()
|
113 | Class01 : int chimp
|
114 | Class01 : int gorilla
|
115 | class Class10 {
|
116 | <<service>>
|
117 | int id
|
118 | size()
|
119 | }
|
120 | </pre></td>
|
121 | <td align="center">
|
122 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-class.png" />
|
123 | </td>
|
124 | </tr>
|
125 | -->
|
126 | -->
|
127 | <tr><td colspan=2 align="center">
|
128 | <b>State</b><br />
|
129 | [<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>]
|
130 | </td></tr>
|
131 | <tr>
|
132 | <td><pre>
|
133 | stateDiagram
|
134 | [*] --> Still
|
135 | Still --> [*]
|
136 | Still --> Moving
|
137 | Moving --> Still
|
138 | Moving --> Crash
|
139 | Crash --> [*]
|
140 | </pre></td>
|
141 | <td align="center">
|
142 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-state.png" />
|
143 | </td>
|
144 | </tr>
|
145 | -->
|
146 | -->
|
147 | <tr><td colspan=2 align="center">
|
148 | <b>Pie</b><br />
|
149 | [<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>]
|
150 | </td></tr>
|
151 | <tr>
|
152 | <td><pre>
|
153 | pie
|
154 | "Dogs" : 386
|
155 | "Cats" : 85
|
156 | "Rats" : 15
|
157 | </pre></td>
|
158 | <td align="center">
|
159 | <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-pie.png" />
|
160 | </td>
|
161 | </tr>
|
162 | -->
|
163 | -->
|
164 | <tr><td colspan=2 align="center">
|
165 | <b>Git</b><br />
|
166 | [experimental - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
|
167 | </td></tr>
|
168 | <tr>
|
169 | <td colspan="2" align="center"><i>Coming soon!</i></td>
|
170 | </tr>
|
171 | -->
|
172 | -->
|
173 | <tr><td colspan=2 align="center">
|
174 | <b>User Journey</b><br />
|
175 | [<a href="http://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
|
176 | </td></tr>
|
177 | <tr>
|
178 | <td>
|
179 | <pre>
|
180 | journey
|
181 | title My working day
|
182 | section Go to work
|
183 | Make tea: 5: Me
|
184 | Go upstairs: 3: Me
|
185 | Do work: 1: Me, Cat
|
186 | section Go home
|
187 | Go downstairs: 5: Me
|
188 | Sit down: 3: Me
|
189 | </pre></td>
|
190 | <td align="center">
|
191 | <img alt="User Journey Diagram" src="img/gray-user-journey.png" />
|
192 | </td>
|
193 | </tr>
|
194 | -->
|
195 |
|
196 | </table>
|
197 |
|
198 | ## Related projects
|
199 |
|
200 | - [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
|
201 | - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
202 | - [HTTP Server](https://github.com/TomWright/mermaid-server)
|
203 |
|
204 | ## 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)
|
205 |
|
206 | 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.
|
207 |
|
208 | Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
|
209 |
|
210 | ## Appreciation
|
211 | A quick note from Knut Sveidqvist:
|
212 | >*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!*
|
213 | >*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.*
|
214 | >*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
|
215 | >
|
216 | >*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
|
217 |
|
218 | ---
|
219 |
|
220 | *Mermaid was created by Knut Sveidqvist for easier documentation.*
|