1 | # mermaid
|
2 |
|
3 | [![Build Status](https://travis-ci.org/knsv/mermaid.svg?branch=master)](https://travis-ci.org/knsv/mermaid)
|
4 | [![Code Climate](https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg)](https://codeclimate.com/github/knsv/mermaid)
|
5 | [![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)
|
6 |
|
7 | ![banner](./img/header.png)
|
8 |
|
9 | Generation of diagrams and flowcharts from text in a similar manner as markdown.
|
10 |
|
11 | Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
|
12 |
|
13 | This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
|
14 |
|
15 | The code below would render the following image
|
16 | <table>
|
17 | <tr><th>Code</th><th>Rendered diagram</th></tr>
|
18 | <tr>
|
19 | <td>
|
20 | <pre>
|
21 | <code>
|
22 | graph TD;
|
23 | A-->B;
|
24 | A-->C;
|
25 | B-->D;
|
26 | C-->D;
|
27 | </code>
|
28 | </pre>
|
29 | </td>
|
30 | <td>
|
31 | <p align="center">
|
32 | <img src='./img/flow.png' alt='Flowchart'>
|
33 | </p>
|
34 | </td>
|
35 | </tr>
|
36 | <tr>
|
37 | <td>
|
38 | <pre>
|
39 | <code>
|
40 | sequenceDiagram
|
41 | participant Alice
|
42 | participant Bob
|
43 | Alice->>John: Hello John, how are you?
|
44 | loop Healthcheck
|
45 | John->>John: Fight against hypochondria
|
46 | end
|
47 | Note right of John: Rational thoughts <br/>prevail...
|
48 | John-->>Alice: Great!
|
49 | John->>Bob: How about you?
|
50 | Bob-->>John: Jolly good!
|
51 | </code>
|
52 | </pre>
|
53 | </td>
|
54 | <td>
|
55 | <img src='./img/sequence.png' alt='Sequence Diagram'>
|
56 | </td>
|
57 | </tr>
|
58 | <tr>
|
59 | <td>
|
60 | <pre>
|
61 | <code>
|
62 | gantt
|
63 | dateFormat YYYY-MM-DD
|
64 | title Adding GANTT diagram to mermaid
|
65 |
|
66 | section A section
|
67 | Completed task :done, des1, 2014-01-06,2014-01-08
|
68 | Active task :active, des2, 2014-01-09, 3d
|
69 | Future task : des3, after des2, 5d
|
70 | Future task2 : des4, after des3, 5d
|
71 | </code>
|
72 | </pre>
|
73 | </td>
|
74 | <td>
|
75 | <img src='./img/gantt.png' alt='Gantt Diagram'>
|
76 | </td>
|
77 | </tr>
|
78 | <tr>
|
79 | <td>
|
80 | <pre>
|
81 | <code>
|
82 | classDiagram
|
83 | Class01 <|-- AveryLongClass : Cool
|
84 | Class03 *-- Class04
|
85 | Class05 o-- Class06
|
86 | Class07 .. Class08
|
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 | Class08 <--> C2: Cool label
|
96 | </code>
|
97 | </pre>
|
98 | </td>
|
99 | <td>
|
100 | <img src='./img/class.png' alt='Class Diagram'>
|
101 | </td>
|
102 | </tr>
|
103 | <tr>
|
104 | <td>
|
105 | <pre>
|
106 | <code>
|
107 | gitGraph :
|
108 | options
|
109 | {
|
110 | "key": "value",
|
111 | "nodeWidth": 150,
|
112 | "nodeSpacing" : 150
|
113 | }
|
114 | end
|
115 | commit
|
116 | branch newbranch
|
117 | checkout newbranch
|
118 | commit
|
119 | commit
|
120 | checkout master
|
121 | commit
|
122 | commit
|
123 | merge newbranch
|
124 | </code>
|
125 | </pre>
|
126 | </td>
|
127 | <td>
|
128 | <img src='./img/git.png' alt='Git Graph'>
|
129 | </td>
|
130 | </tr>
|
131 |
|
132 | </table>
|
133 |
|
134 |
|
135 | ## Installation
|
136 |
|
137 | ### CDN
|
138 |
|
139 | ```
|
140 | https://unpkg.com/mermaid@<version>/dist/
|
141 | ```
|
142 |
|
143 | Replace `<version>` with expected version number.
|
144 |
|
145 | Example: https://unpkg.com/mermaid@7.1.0/dist/
|
146 |
|
147 | ### Node.js
|
148 |
|
149 | ```
|
150 | yarn add mermaid
|
151 | ```
|
152 |
|
153 |
|
154 | ## Documentation
|
155 |
|
156 | https://mermaidjs.github.io
|
157 |
|
158 |
|
159 | ## Sibling projects
|
160 |
|
161 | - [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
|
162 | - [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor)
|
163 | - [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo)
|
164 |
|
165 |
|
166 | # Request for assistance
|
167 |
|
168 | Things are piling up and I have hard time keeping up. To remedy this
|
169 | it would be great if we could form a core team of developers to cooperate
|
170 | with the future development mermaid.
|
171 |
|
172 | As part of this team you would get write access to the repository and would
|
173 | represent the project when answering questions and issues.
|
174 |
|
175 | Together we could continue the work with things like:
|
176 | * adding more typers of diagrams like mindmaps, ert digrams etc
|
177 | * improving existing diagrams
|
178 |
|
179 | Don't hesitate to contact me if you want to get involved.
|
180 |
|
181 |
|
182 | # For contributors
|
183 |
|
184 | ## Setup
|
185 |
|
186 | Make sure you have Chrome browser installed, this project uses Chrome headless to running tests.
|
187 |
|
188 | yarn install
|
189 |
|
190 |
|
191 | ## Build
|
192 |
|
193 | yarn build
|
194 |
|
195 | If you want real time incremental build:
|
196 |
|
197 | yarn build:watch
|
198 |
|
199 |
|
200 | ## Lint
|
201 |
|
202 | yarn lint
|
203 |
|
204 | We use [JavaScript Standard Style](https://github.com/feross/standard).
|
205 | We recommend you installing [editor plugins](https://github.com/feross/standard#are-there-text-editor-plugins) so you can get real time lint result.
|
206 |
|
207 |
|
208 | ## Test
|
209 |
|
210 | yarn test
|
211 |
|
212 | Manual test in browser:
|
213 |
|
214 | open dist/demo/index.html
|
215 |
|
216 |
|
217 | ## Release
|
218 |
|
219 | For those who have the permission to do so:
|
220 |
|
221 | Update version number in `package.json`.
|
222 |
|
223 | npm publish
|
224 |
|
225 | Command above generates files into the `dist` folder and publishes them to npmjs.org.
|
226 |
|
227 |
|
228 | # Credits
|
229 |
|
230 | 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!
|
231 |
|
232 | 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.
|
233 |
|
234 | *Mermaid was created by Knut Sveidqvist for easier documentation.*
|
235 |
|
236 | *[Tyler Long](https://github.com/tylerlong) has became a collaborator since April 2017.*
|
237 |
|
238 | Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
|