You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+34-4Lines changed: 34 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -5,13 +5,43 @@
5
5
<!-- </Remove this in the future> -->
6
6
7
7
# mermaid [](https://travis-ci.org/mermaid-js/mermaid)[](https://www.npmjs.com/package/mermaid)[](https://coveralls.io/github/mermaid-js/mermaid?branch=master)[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)[](https://percy.io/Mermaid/mermaid)
8
+
8
9
<!-- <Main description> -->
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
-
<!-- </Main description> -->
10
+
__mermaid is a Javascript based diagramming and charting tool. It generates diagrams flowcharts and more, using markdown-inspired text for ease and speed.__
11
+
12
+
Check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md)
13
+
14
+
: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"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
15
+
16
+
## New diagrams in 8.4
17
+
18
+
With version 8.4 class diagrams have got some new features, bug fixes and documentation. Another new feature in 8.4 is the new diagram type, state diagrams.
19
+
20
+
21
+
22
+
## Special note regarding version 8.2
12
23
13
-
:trophy:_"The most exciting use of technology"_ - [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees)
24
+
In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced which sets the level of trust to be used on the parsed diagrams.
25
+
26
+
-**true**: (default) tags in text are encoded, click functionality is disabled
27
+
- false: tags in text are allowed, click functionality is enabled
28
+
29
+
Closed issues:
30
+
31
+
⚠️ **Note** : This changes the default behaviour of mermaid so that after upgrade to 8.2, if the securityLevel is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
32
+
33
+
If your application is taking resposibility for the diagram source security you can set the securityLevel accordingly. By doing this clicks and tags are again allowed.
34
+
35
+
```javascript
36
+
mermaidAPI.initialize({
37
+
securityLevel:'loose'
38
+
});
39
+
```
40
+
41
+
For more information and help in getting started, please view our [documentation](http://mermaid-js.github.io/mermaid/) and start simplifying yours. Play with 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).
42
+
<!-- </Main description> -->
14
43
44
+
__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).__
[](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4
6
5
-
# mermaid
7
+
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
+
Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
16
+
17
+
**Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
6
18
7
19
## New diagrams in 8.4
8
20
9
-
With version 8.4 class diagrams has got some new features, bug fixes and documentation. Another new feature in 8.4 is the new diagram
10
-
type, state diagrams.
21
+
With version 8.4 class diagrams have got some new features, bug fixes and documentation. Another new feature in 8.4 is the new diagram type, state diagrams.
11
22
12
23
13
24
14
-
15
25
## Special note regarding version 8.2
16
26
17
27
In version 8.2 a security improvement was introduced. A securityLevel configuration was introduced which sets the level of trust to be used on the parsed diagrams.
18
28
19
-
***true**: (default) tags in text are encoded, click functionality is disabled
20
-
* false: tags in text are allowed, click functionality is enabled
29
+
-**true**: (default) tags in text are encoded, click functionality is disabled
30
+
- false: tags in text are allowed, click functionality is enabled
21
31
22
32
Closed issues:
23
33
@@ -26,22 +36,14 @@ Closed issues:
26
36
If your application is taking resposibility for the diagram source security you can set the securityLevel accordingly. By doing this clicks and tags are again allowed.
27
37
28
38
```javascript
29
-
mermaidAPI.initialize({
30
-
securityLevel:'loose'
31
-
});
39
+
mermaidAPI.initialize({
40
+
securityLevel:'loose'
41
+
});
32
42
```
33
43
34
44
**🖖 Keep a steady pulse: mermaid needs more Collaborators [#866](https://github.com/knsv/mermaid/issues/866)**
35
45
36
-
37
-
38
-
Generation of diagrams and flowcharts from text in a similar manner as markdown.
39
-
40
-
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
41
-
42
-
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
43
-
44
-
**Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
46
+
## Diagrams
45
47
46
48
### Flowchart
47
49
@@ -52,8 +54,8 @@ graph TD;
52
54
B-->D;
53
55
C-->D;
54
56
```
55
-
56
57
58
+
57
59
58
60
### Sequence diagram
59
61
@@ -70,8 +72,8 @@ sequenceDiagram
70
72
John->>Bob: How about you?
71
73
Bob-->>John: Jolly good!
72
74
```
73
-
74
75
76
+
75
77
76
78
### Gantt diagram
77
79
@@ -87,8 +89,8 @@ Active task :active, des2, 2014-01-09, 3d
Things are piling up and I have a hard time keeping up. To remedy this
174
172
it would be great if we could form a core team of developers to cooperate
@@ -178,61 +176,62 @@ As part of this team you would get write access to the repository and would
178
176
represent the project when answering questions and issues.
179
177
180
178
Together we could continue the work with things like:
181
-
* adding more types of diagrams like mindmaps, ert diagrams, etc.
182
-
* improving existing diagrams
183
179
184
-
Don't hesitate to contact me if you want to get involved.
180
+
- Adding more types of diagrams like mindmaps, ert diagrams, etc.
181
+
- Improving existing diagrams
185
182
183
+
Don't hesitate to contact me if you want to get involved.
186
184
187
-
# For contributors
188
-
189
-
## Setup
190
-
191
-
yarn install
185
+
## For contributors
192
186
187
+
### Setup
193
188
194
-
## Build
189
+
```
190
+
yarn install
191
+
```
195
192
196
-
yarn build:watch
193
+
### Build
197
194
195
+
```
196
+
yarn build:watch
197
+
```
198
198
199
-
## Lint
199
+
###Lint
200
200
201
-
yarn lint
201
+
```
202
+
yarn lint
203
+
```
202
204
203
205
We use [eslint](https://eslint.org/).
204
206
We recommend you installing [editor plugins](https://eslint.org/docs/user-guide/integrations) so you can get real time lint result.
205
207
208
+
### Test
206
209
210
+
```
211
+
yarn test
212
+
```
213
+
Manual test in browser: open `dist/index.html`
207
214
208
-
## Test
209
-
210
-
yarn test
211
-
212
-
Manual test in browser:
213
-
214
-
open dist/index.html
215
-
216
-
217
-
## Release
215
+
### Release
218
216
219
217
For those who have the permission to do so:
220
218
221
219
Update version number in `package.json`.
222
220
223
-
npm publish
221
+
```
222
+
npm publish
223
+
```
224
224
225
225
Command above generates files into the `dist` folder and publishes them to npmjs.org.
226
226
227
-
228
-
# Credits
227
+
## Credits
229
228
230
229
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
230
232
231
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
232
234
-
*Mermaid was created by Knut Sveidqvist for easier documentation.*
233
+
_Mermaid was created by Knut Sveidqvist for easier documentation._
235
234
236
-
*[Tyler Long](https://github.com/tylerlong) has became a collaborator since April 2017.*
235
+
_[Tyler Long](https://github.com/tylerlong) has became a collaborator since April 2017._
237
236
238
237
Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
0 commit comments