1 | # mermaid
|
2 |
|
3 | [![Build Status](https://travis-ci.org/knsv/mermaid.svg?branch=master)](https://travis-ci.org/knsv/mermaid)
|
4 | [![Coverage Status](https://coveralls.io/repos/github/knsv/mermaid/badge.svg?branch=master)](https://coveralls.io/github/knsv/mermaid?branch=master)
|
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 |
|
16 | ### Flowchart
|
17 |
|
18 | ```
|
19 | graph TD;
|
20 | A-->B;
|
21 | A-->C;
|
22 | B-->D;
|
23 | C-->D;
|
24 | ```
|
25 | ![Flowchart](./img/flow.png)
|
26 |
|
27 |
|
28 | ### Sequence diagram
|
29 |
|
30 | ```
|
31 | sequenceDiagram
|
32 | participant Alice
|
33 | participant Bob
|
34 | Alice->>John: Hello John, how are you?
|
35 | loop Healthcheck
|
36 | John->>John: Fight against hypochondria
|
37 | end
|
38 | Note right of John: Rational thoughts <br/>prevail...
|
39 | John-->>Alice: Great!
|
40 | John->>Bob: How about you?
|
41 | Bob-->>John: Jolly good!
|
42 | ```
|
43 | ![Sequence diagram](./img/sequence.png)
|
44 |
|
45 |
|
46 | ### Gantt diagram
|
47 |
|
48 | ```
|
49 | gantt
|
50 | dateFormat YYYY-MM-DD
|
51 | title Adding GANTT diagram to mermaid
|
52 |
|
53 | section A section
|
54 | Completed task :done, des1, 2014-01-06,2014-01-08
|
55 | Active task :active, des2, 2014-01-09, 3d
|
56 | Future task : des3, after des2, 5d
|
57 | Future task2 : des4, after des3, 5d
|
58 | ```
|
59 | ![Gantt diagram](./img/gantt.png)
|
60 |
|
61 |
|
62 | ### Class diagram - :exclamation: experimental
|
63 |
|
64 | ```
|
65 | classDiagram
|
66 | Class01 <|-- AveryLongClass : Cool
|
67 | Class03 *-- Class04
|
68 | Class05 o-- Class06
|
69 | Class07 .. Class08
|
70 | Class09 --> C2 : Where am i?
|
71 | Class09 --* C3
|
72 | Class09 --|> Class07
|
73 | Class07 : equals()
|
74 | Class07 : Object[] elementData
|
75 | Class01 : size()
|
76 | Class01 : int chimp
|
77 | Class01 : int gorilla
|
78 | Class08 <--> C2: Cool label
|
79 | ```
|
80 | ![Class diagram](./img/class.png)
|
81 |
|
82 |
|
83 | ### Git graph - :exclamation: experimental
|
84 |
|
85 | ```
|
86 | gitGraph:
|
87 | options
|
88 | {
|
89 | "nodeSpacing": 150,
|
90 | "nodeRadius": 10
|
91 | }
|
92 | end
|
93 | commit
|
94 | branch newbranch
|
95 | checkout newbranch
|
96 | commit
|
97 | commit
|
98 | checkout master
|
99 | commit
|
100 | commit
|
101 | merge newbranch
|
102 |
|
103 | ```
|
104 |
|
105 | ![Git graph](./img/git.png)
|
106 |
|
107 |
|
108 | ## Installation
|
109 |
|
110 | ### CDN
|
111 |
|
112 | ```
|
113 | https://unpkg.com/mermaid@<version>/dist/
|
114 | ```
|
115 |
|
116 | Replace `<version>` with expected version number.
|
117 |
|
118 | Example: https://unpkg.com/mermaid@7.1.0/dist/
|
119 |
|
120 | ### Node.js
|
121 |
|
122 | ```
|
123 | yarn add mermaid
|
124 | ```
|
125 |
|
126 |
|
127 | ## Documentation
|
128 |
|
129 | https://mermaidjs.github.io
|
130 |
|
131 |
|
132 | ## Sibling projects
|
133 |
|
134 | - [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
|
135 | - [mermaid live editor](https://github.com/mermaidjs/mermaid-live-editor)
|
136 | - [mermaid webpack demo](https://github.com/mermaidjs/mermaid-webpack-demo)
|
137 | - [mermaid Parcel demo](https://github.com/mermaidjs/mermaid-parcel-demo)
|
138 |
|
139 |
|
140 | # Request for assistance
|
141 |
|
142 | Things are piling up and I have hard time keeping up. To remedy this
|
143 | it would be great if we could form a core team of developers to cooperate
|
144 | with the future development mermaid.
|
145 |
|
146 | As part of this team you would get write access to the repository and would
|
147 | represent the project when answering questions and issues.
|
148 |
|
149 | Together we could continue the work with things like:
|
150 | * adding more typers of diagrams like mindmaps, ert digrams etc
|
151 | * improving existing diagrams
|
152 |
|
153 | Don't hesitate to contact me if you want to get involved.
|
154 |
|
155 |
|
156 | # For contributors
|
157 |
|
158 | ## Setup
|
159 |
|
160 | yarn install
|
161 |
|
162 |
|
163 | ## Build
|
164 |
|
165 | yarn build:watch
|
166 |
|
167 |
|
168 | ## Lint
|
169 |
|
170 | yarn lint
|
171 |
|
172 | We use [JavaScript Standard Style](https://github.com/feross/standard).
|
173 | We recommend you installing [editor plugins](https://github.com/feross/standard#are-there-text-editor-plugins) so you can get real time lint result.
|
174 |
|
175 |
|
176 | ## Test
|
177 |
|
178 | yarn test
|
179 |
|
180 | Manual test in browser:
|
181 |
|
182 | open dist/index.html
|
183 |
|
184 |
|
185 | ## Release
|
186 |
|
187 | For those who have the permission to do so:
|
188 |
|
189 | Update version number in `package.json`.
|
190 |
|
191 | npm publish
|
192 |
|
193 | Command above generates files into the `dist` folder and publishes them to npmjs.org.
|
194 |
|
195 |
|
196 | # Credits
|
197 |
|
198 | 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!
|
199 |
|
200 | 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.
|
201 |
|
202 | *Mermaid was created by Knut Sveidqvist for easier documentation.*
|
203 |
|
204 | *[Tyler Long](https://github.com/tylerlong) has became a collaborator since April 2017.*
|
205 |
|
206 | Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
|