README.md · grove

23.5 KB471 lines

1	<p align="center">
2	<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
3	</p>
4	<h1 align="center">
5	Mermaid
6	</h1>
7	<p align="center">
8	Generate diagrams from markdown-like text.
9	<p>
10	<p align="center">
11	<a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
12	<p>
13
14	<p align="center">
15	<a href="https://mermaid.ai/live/"><b>Live Editor!</b></a>
16	</p>
17	<p align="center">
18	<a href="https://mermaid.ai/open-source/">📖 Documentation</a> \| <a href="https://mermaid.ai/open-source/intro/">🚀 Getting Started</a> \| <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> \| <a href="https://discord.gg/sKeNQX4Wtj" title="Discord invite">🙌 Join Us</a>
19	</p>
20	<p align="center">
21	<a href="./README.zh-CN.md">简体中文</a>
22	</p>
23	<p align="center">
24	Try Live Editor previews of future releases: <a href="https://develop.git.mermaid.live/" title="Try the mermaid version from the develop branch.">Develop</a> \| <a href="https://next.git.mermaid.live/" title="Try the mermaid version from the next branch.">Next</a>
25	</p>
26
27	<br>
28	<br>
29
30	[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
31	[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
32	[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
33	[![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
34	[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
35	[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
36	[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj)
37	[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
38	[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
39	[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/mermaid-js/mermaid/badge)](https://securityscorecards.dev/viewer/?uri=github.com/mermaid-js/mermaid)
40
41	<img src="./img/header.png" alt="" />
42
43	:trophy: Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!
44
45	Thanks to all involved, people committing pull requests, people answering questions! 🙏
46
47	<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
48
49	## Table of content
50
51	<details>
52	<summary>Expand contents</summary>
53
54	- [About](#about)
55	- [Examples](#examples)
56	- [Release](#release)
57	- [Related projects](#related-projects)
58	- [Contributors](#contributors---)
59	- [Security and safe diagrams](#security-and-safe-diagrams)
60	- [Reporting vulnerabilities](#reporting-vulnerabilities)
61	- [Appreciation](#appreciation)
62
63	</details>
64
65	## About
66
67	<!-- <Main description> -->
68
69	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.
70
71	> Doc-Rot is a Catch-22 that Mermaid helps to solve.
72
73	Diagramming and documentation costs precious developer time and gets outdated quickly.
74	But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
75	Mermaid addresses this problem by enabling users to create easily modifiable diagrams. It can also be made part of production scripts (and other pieces of code).<br/>
76	<br/>
77
78	Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
79	For video tutorials, visit our [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html) page.
80	Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](https://mermaid.js.org/ecosystem/integrations-community.html).
81
82	You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](https://mermaid.js.org/ecosystem/integrations-community.html).
83
84	For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](https://mermaid.js.org/intro/getting-started.html), [Usage](https://mermaid.js.org/config/usage.html) and [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html).
85
86	Our PR Visual Regression Testing is powered by [Argos](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss) with their generous Open Source plan. It makes the process of reviewing PRs with visual changes a breeze.
87
88	[![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
89
90	In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
91
92	<a href="https://applitools.com/">
93	<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
94	</a>
95
96	<!-- </Main description> -->
97
98	## Examples
99
100	The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).
101
102	<!-- <Flowchart> -->
103
104	### Flowchart [<a href="https://mermaid.js.org/syntax/flowchart.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>]
105
106	```
107	flowchart LR
108
109	A[Hard] -->\|Text\| B(Round)
110	B --> C{Decision}
111	C -->\|One\| D[Result 1]
112	C -->\|Two\| E[Result 2]
113	```
114
115	```mermaid
116	flowchart LR
117
118	A[Hard] -->\|Text\| B(Round)
119	B --> C{Decision}
120	C -->\|One\| D[Result 1]
121	C -->\|Two\| E[Result 2]
122	```
123
124	### Sequence diagram [<a href="https://mermaid.js.org/syntax/sequenceDiagram.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>]
125
126	```
127	sequenceDiagram
128	Alice->>John: Hello John, how are you?
129	loop HealthCheck
130	John->>John: Fight against hypochondria
131	end
132	Note right of John: Rational thoughts!
133	John-->>Alice: Great!
134	John->>Bob: How about you?
135	Bob-->>John: Jolly good!
136	```
137
138	```mermaid
139	sequenceDiagram
140	Alice->>John: Hello John, how are you?
141	loop HealthCheck
142	John->>John: Fight against hypochondria
143	end
144	Note right of John: Rational thoughts!
145	John-->>Alice: Great!
146	John->>Bob: How about you?
147	Bob-->>John: Jolly good!
148	```
149
150	### Gantt chart [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNp90cGOgyAQBuBXIZxtFbG29bbZ3fsmvXKZylhJEAyOTZrGd1_sto3xsHMBhu-HBO689hp5xS_giJQbsCbjHTv9jcp9-q63SKhZpb3DhMXSOIiE5ZkoNpnYZGXynh6U-4jBK7JnVfBYJo9QvgjtEya1cj8QwFq0TMz4lZqxTBg0hOF5m1jifI2Lf7Bc490CyxUu1rhc4GLGPOEdhg6Mjq92V44xxanFDhWv4lRjA6MlxZWbIh17DYTf2pAPvGrADphwGMmfbq7mFYURX-jLwCVA91bWg8YYunO69Y8vMgPFI2vvGnOZ-2Owsd0S9UOVpvP29mKoHc_b2nfpYHQLgdrrsUzLvDxALrHcS9hJqeuzOB6avBCN3mciBz5N0y_wxZ0J">live editor</a>]
151
152	```
153	gantt
154	section Section
155	Completed :done, des1, 2014-01-06,2014-01-08
156	Active :active, des2, 2014-01-07, 3d
157	Parallel 1 : des3, after des1, 1d
158	Parallel 2 : des4, after des1, 1d
159	Parallel 3 : des5, after des3, 1d
160	Parallel 4 : des6, after des4, 1d
161	```
162
163	```mermaid
164	gantt
165	section Section
166	Completed :done, des1, 2014-01-06,2014-01-08
167	Active :active, des2, 2014-01-07, 3d
168	Parallel 1 : des3, after des1, 1d
169	Parallel 2 : des4, after des1, 1d
170	Parallel 3 : des5, after des3, 1d
171	Parallel 4 : des6, after des4, 1d
172	```
173
174	### Class diagram [<a href="https://mermaid.js.org/syntax/classDiagram.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkTFPwzAQhf-K5QlQ2zQJJG1UBaGWDYmBgYEwXO1LYuTEwXYqlZL_jt02asXm--690zvfgTLFkWaUSTBmI6DS0BTt2lfzkKx-p1PytEO9f1FtdaQkI2ulZNGuVqK1qEtgmOfk7BitSzKdOhg59XuNGgk0RDxed-_IOr6uf8cZ6UhTZ8bvHqS5ub1mr9svZPbjk6DEBlu7AQuXyBkx4gcvDk9cUMJq0XT_YaW0kNK5j-ufAoRzcihaQvLcoN4Jv50vvVxw_xrnD3RCG9QNCO4-8OgpqK1dpoJm7smxhF7agp6kfcfB4jMXVmmalW4tnFDorXrbt4xmVvc4is53GKFUwNF5DtTuO3-sShjrJjLVlqLyvNfS4drazmRB4NuzSti6386YagIjeA3a1rtlEiRRsoAoxiSN4SGOOduGy0UZ3YclT-dhBHQYhj8dc6_I">live editor</a>]
175
176	```
177	classDiagram
178	Class01 <\|-- AveryLongClass : Cool
179	<<Interface>> Class01
180	Class09 --> C2 : Where am I?
181	Class09 --* C3
182	Class09 --\|> Class07
183	Class07 : equals()
184	Class07 : Object[] elementData
185	Class01 : size()
186	Class01 : int chimp
187	Class01 : int gorilla
188	class Class10 {
189	<<service>>
190	int id
191	size()
192	}
193
194	```
195
196	```mermaid
197	classDiagram
198	Class01 <\|-- AveryLongClass : Cool
199	<<Interface>> Class01
200	Class09 --> C2 : Where am I?
201	Class09 --* C3
202	Class09 --\|> Class07
203	Class07 : equals()
204	Class07 : Object[] elementData
205	Class01 : size()
206	Class01 : int chimp
207	Class01 : int gorilla
208	class Class10 {
209	<<service>>
210	int id
211	size()
212	}
213
214	```
215
216	### State diagram [<a href="https://mermaid.js.org/syntax/stateDiagram.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
217
218	```
219	stateDiagram-v2
220	[*] --> Still
221	Still --> [*]
222	Still --> Moving
223	Moving --> Still
224	Moving --> Crash
225	Crash --> [*]
226	```
227
228	```mermaid
229	stateDiagram-v2
230	[*] --> Still
231	Still --> [*]
232	Still --> Moving
233	Moving --> Still
234	Moving --> Crash
235	Crash --> [*]
236	```
237
238	### Pie chart [<a href="https://mermaid.js.org/syntax/pie.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9jsFugzAMhl8F-VzBgEEh13Uv0F1zcYkTIpEEBadShXj3BU3dzf_n77e8wxQUgYDVkvQSbsFsEgpRtEN_5i_kvzx05XiC-xvUHVzAUXRoVe7v0heFBJ7JkQSRR0Ua08ISpD-ymlaFTN_KcoggNC4bXQATh5-Xn0BwTPSWbhZNRPdvLQEV5dIO_FrPZ43dOJ-cgtfWnDzFJeOZed1EVZ3r0lie06Ocgqs2q2aMPD_HvuqbfsCmpf7aYte2anrU46Cbz1qr60fdIBzH8QvW9lkl">live editor</a>]
239
240	```
241	pie
242	"Dogs" : 386
243	"Cats" : 85.9
244	"Rats" : 15
245	```
246
247	```mermaid
248	pie
249	"Dogs" : 386
250	"Cats" : 85.9
251	"Rats" : 15
252	```
253
254	### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
255
256	```
257	gitGraph
258	commit
259	commit
260	branch develop
261	checkout develop
262	commit
263	commit
264	checkout main
265	merge develop
266	commit
267	commit
268	```
269
270	```mermaid
271	gitGraph
272	commit
273	commit
274	branch develop
275	checkout develop
276	commit
277	commit
278	checkout main
279	merge develop
280	commit
281	commit
282	```
283
284	### Bar chart (using gantt chart) [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
285
286	```
287	gantt
288	title Git Issues - days since last update
289	dateFormat X
290	axisFormat %s
291
292	section Issue19062
293	71 : 0, 71
294	section Issue19401
295	36 : 0, 36
296	section Issue193
297	34 : 0, 34
298	section Issue7441
299	9 : 0, 9
300	section Issue1300
301	5 : 0, 5
302	```
303
304	```mermaid
305	gantt
306	title Git Issues - days since last update
307	dateFormat X
308	axisFormat %s
309
310	section Issue19062
311	71 : 0, 71
312	section Issue19401
313	36 : 0, 36
314	section Issue193
315	34 : 0, 34
316	section Issue7441
317	9 : 0, 9
318	section Issue1300
319	5 : 0, 5
320	```
321
322	### User Journey diagram [<a href="https://mermaid.js.org/syntax/userJourney.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
323
324	```
325	journey
326	title My working day
327	section Go to work
328	Make tea: 5: Me
329	Go upstairs: 3: Me
330	Do work: 1: Me, Cat
331	section Go home
332	Go downstairs: 5: Me
333	Sit down: 3: Me
334	```
335
336	```mermaid
337	journey
338	title My working day
339	section Go to work
340	Make tea: 5: Me
341	Go upstairs: 3: Me
342	Do work: 1: Me, Cat
343	section Go home
344	Go downstairs: 5: Me
345	Sit down: 3: Me
346	```
347
348	### C4 diagram [<a href="https://mermaid.js.org/syntax/c4.html">docs</a>]
349
350	```
351	C4Context
352	title System Context diagram for Internet Banking System
353
354	Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
355	Person(customerB, "Banking Customer B")
356	Person_Ext(customerC, "Banking Customer C")
357	System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
358
359	Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
360
361	Enterprise_Boundary(b1, "BankBoundary") {
362
363	SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
364
365	System_Boundary(b2, "BankBoundary2") {
366	System(SystemA, "Banking System A")
367	System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
368	}
369
370	System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
371	SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
372
373	Boundary(b3, "BankBoundary3", "boundary") {
374	SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
375	SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
376	}
377	}
378
379	BiRel(customerA, SystemAA, "Uses")
380	BiRel(SystemAA, SystemE, "Uses")
381	Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
382	Rel(SystemC, customerA, "Sends e-mails to")
383	```
384
385	```mermaid
386	C4Context
387	title System Context diagram for Internet Banking System
388
389	Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
390	Person(customerB, "Banking Customer B")
391	Person_Ext(customerC, "Banking Customer C")
392	System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
393
394	Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
395
396	Enterprise_Boundary(b1, "BankBoundary") {
397
398	SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
399
400	System_Boundary(b2, "BankBoundary2") {
401	System(SystemA, "Banking System A")
402	System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
403	}
404
405	System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
406	SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
407
408	Boundary(b3, "BankBoundary3", "boundary") {
409	SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
410	SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
411	}
412	}
413
414	BiRel(customerA, SystemAA, "Uses")
415	BiRel(SystemAA, SystemE, "Uses")
416	Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
417	Rel(SystemC, customerA, "Sends e-mails to")
418	```
419
420	## Release
421
422	For those who have the permission to do so:
423
424	Update version number in `package.json`.
425
426	```sh
427	npm publish
428	```
429
430	The above command generates files into the `dist` folder and publishes them to <https://www.npmjs.com>.
431
432	## Related projects
433
434	- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
435	- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
436	- [HTTP Server](https://github.com/TomWright/mermaid-server)
437
438	## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%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)
439
440	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.
441
442	Detailed information about how to contribute can be found in the [contribution guide](https://mermaid.js.org/community/contributing.html)
443
444	## Security and safe diagrams
445
446	For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
447
448	As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
449
450	_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
451
452	## Reporting vulnerabilities
453
454	To report a vulnerability, please e-mail <security@mermaid.live> with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
455
456	## Appreciation
457
458	A quick note from Knut Sveidqvist:
459
460	> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
461	>
462	> _Thanks also to the [js-sequence-diagram](https://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._
463	>
464	> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
465	>
466	> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
467
468	---
469
470	_Mermaid was created by Knut Sveidqvist for easier documentation._
471