2019-11-03 16:18:43 +01:00
# 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)
2020-02-25 22:11:08 +01:00
2021-10-02 18:02:40 +02:00
English | [简体中文 ](./README.zh-CN.md )
2020-07-31 09:38:03 +02:00
![banner ](./img/header.png )
2020-09-24 23:38:37 +02:00
: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"!!!**
2020-07-31 09:38:03 +02:00
2021-04-25 14:05:42 +02:00
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
2020-07-31 09:38:03 +02:00
2021-09-23 18:52:08 +02:00
< a href = "https://mermaid-js.github.io/mermaid/landing/" alt = "Link to landing page for the book The Official Guide To mermaid.js" > < img src = "https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" > < / a >
2021-08-11 18:28:35 +02:00
2020-08-15 15:10:09 +02:00
## About
2021-01-28 21:29:40 +01:00
<!-- <Main description> -->
2020-08-15 14:59:34 +02:00
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.
2020-02-22 06:11:21 +01:00
2020-08-15 14:59:34 +02:00
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
2020-07-31 09:55:01 +02:00
2020-08-15 15:10:09 +02:00
Diagramming and documentation costs precious developer time and gets outdated quickly.
But not having diagrams or docs ruins productivity and hurts organizational learning. < br / >
2020-08-15 14:59:34 +02:00
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.
2020-08-15 15:10:09 +02:00
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).
2020-12-01 05:08:07 +01:00
So less time needs to be spent on documenting, as a separate and laborious task. < br / >
2021-07-11 19:45:48 +02:00
Even non-programmers can create diagrams through the [Mermaid Live Editor ](https://mermaid-js.github.io/mermaid-live-editor/ ).< br />
2020-10-29 20:21:21 +01:00
[Tutorials ](./docs/Tutorials.md ) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid ](./docs/integrations.md ).
2020-07-31 09:38:03 +02:00
2020-10-29 20:21:21 +01:00
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide ](./docs/n00b-overview.md ) and [Usage ](./docs/usage.md ).
2020-07-31 09:38:03 +02:00
2020-10-29 20:21:21 +01:00
🌐 [CDN ](https://unpkg.com/mermaid/ ) | 📖 [Documentation ](https://mermaidjs.github.io ) | 🙌 [Contribution ](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md ) | 📜 [Changelog ](./docs/CHANGELOG.md )
2020-02-25 22:11:08 +01:00
2019-11-01 18:38:00 +01:00
<!-- </Main description> -->
2020-08-15 14:59:34 +02:00
## Examples
__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 ).__
2019-11-01 18:38:00 +01:00
< table >
<!-- <Flowchart> -->
< tr > < td colspan = 2 align = "center" >
< b > Flow< / b > < / br >
[< 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 > ]
< / td > < / tr >
< tr >
< td > < pre >
2022-01-07 06:14:45 +01:00
flowchart TD
2019-11-01 18:38:00 +01:00
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
< / pre > < / td >
< td align = "center" >
2019-11-27 20:12:34 +01:00
< img src = "https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-flow.png" / >
2019-11-01 18:38:00 +01:00
< / td >
< / tr >
<!-- </Flowchart> -->
<!-- <Sequence> -->
< tr > < td colspan = 2 align = "center" >
< b > Sequence< / b > < br / >
[< 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 > ]
< / td > < / tr >
< tr >
< td > < pre >
2016-07-27 13:31:21 +02:00
sequenceDiagram
2019-11-01 18:38:00 +01:00
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
< / pre > < / td >
< td align = "center" >
2019-11-27 20:12:34 +01:00
< img src = "https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-sequence.png" / >
2019-11-01 18:38:00 +01:00
< / td >
< / tr >
<!-- </Sequence> -->
<!-- <Gantt> -->
< tr > < td colspan = 2 align = "center" >
< b > Gantt< / b > < br / >
[< 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 > ]
< / td > < / tr >
< tr >
< td > < pre >
2017-09-01 10:01:03 +02:00
gantt
2019-11-01 18:38:00 +01:00
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
< / pre > < / td >
< td align = "center" >
2019-11-27 20:12:34 +01:00
< img src = "https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-gantt.png" / >
2019-11-01 18:38:00 +01:00
< / td >
< / tr >
<!-- </Gantt> -->
<!-- <Class> -->
< tr > < td colspan = 2 align = "center" >
< b > Class< / b > < br / >
[< 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 > ]
< / td > < / tr >
< tr >
< td > < pre >
2016-07-27 13:31:21 +02:00
classDiagram
2019-11-01 18:38:00 +01:00
Class01 < |-- AveryLongClass : Cool
< < interface>> Class01
2017-09-16 04:27:17 +02:00
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
2019-10-04 23:49:58 +02:00
class Class10 {
2019-11-01 18:38:00 +01:00
< < service>>
2019-10-04 23:49:58 +02:00
int id
size()
}
2019-11-01 18:38:00 +01:00
< / pre > < / td >
< td align = "center" >
2019-11-27 20:12:34 +01:00
< img src = "https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-class.png" / >
2019-11-01 18:38:00 +01:00
< / td >
< / tr >
<!-- </Class> -->
<!-- <State> -->
< tr > < td colspan = 2 align = "center" >
< b > State< / b > < br / >
2020-10-14 17:23:10 +02:00
[< a href = "http://mermaid-js.github.io/mermaid/#/stateDiagram" > docs< / a > - < a href = "https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9" > live editor< / a > ]
2019-11-01 18:38:00 +01:00
< / td > < / tr >
< tr >
< td > < pre >
2020-10-14 17:23:10 +02:00
stateDiagram-v2
2019-11-01 18:38:00 +01:00
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
< / pre > < / td >
< td align = "center" >
2019-11-27 20:12:34 +01:00
< img src = "https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-state.png" / >
2019-11-01 18:38:00 +01:00
< / td >
< / tr >
<!-- </State> -->
<!-- <Pie> -->
< tr > < td colspan = 2 align = "center" >
< b > Pie< / b > < br / >
[< 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 > ]
< / td > < / tr >
< tr >
< td > < pre >
pie
"Dogs" : 386
"Cats" : 85
2020-04-28 09:28:16 +02:00
"Rats" : 15
2019-11-01 18:38:00 +01:00
< / pre > < / td >
< td align = "center" >
2019-11-27 20:12:34 +01:00
< img src = "https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-pie.png" / >
2019-11-01 18:38:00 +01:00
< / td >
< / tr >
<!-- </Pie> -->
<!-- <Git> -->
< tr > < td colspan = 2 align = "center" >
< b > Git< / b > < br / >
[experimental - < a href = "https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ" > live editor< / a > ]
< / td > < / tr >
< tr >
< td colspan = "2" align = "center" > < i > Coming soon!< / i > < / td >
< / tr >
<!-- </Git> -->
2020-04-04 17:38:30 +02:00
<!-- <Journey> -->
2020-04-28 09:28:16 +02:00
< tr > < td colspan = 2 align = "center" >
< b > User Journey< / b > < br / >
2020-04-28 09:45:41 +02:00
[< 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 > ]
2020-04-28 09:28:16 +02:00
< / td > < / tr >
2020-04-04 17:38:30 +02:00
< tr >
2020-04-28 09:28:16 +02:00
< td >
< pre >
2020-04-04 17:38:30 +02:00
journey
2020-04-28 09:42:43 +02:00
title My working day
2020-04-04 17:38:30 +02:00
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
< / pre > < / td >
< td align = "center" >
2020-04-28 09:40:48 +02:00
< img alt = "User Journey Diagram" src = "img/gray-user-journey.png" / >
2020-04-04 17:38:30 +02:00
< / td >
< / tr >
<!-- </Journey> -->
2019-11-01 18:38:00 +01:00
< / table >
2020-04-28 09:28:16 +02:00
## Related projects
2019-11-01 18:38:00 +01:00
2020-06-25 16:24:45 +02:00
- [Command Line Interface ](https://github.com/mermaid-js/mermaid-cli )
2019-11-01 18:38:00 +01:00
- [Live Editor ](https://github.com/mermaid-js/mermaid-live-editor )
2020-04-15 20:29:17 +02:00
- [HTTP Server ](https://github.com/TomWright/mermaid-server )
2019-11-01 18:38:00 +01:00
2021-12-05 22:10:41 +01:00
## 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)
2019-11-01 18:38:00 +01:00
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.
Detailed information about how to contribute can be found in the [contribution guide ](CONTRIBUTING.md )
2022-01-18 08:39:26 +01:00
## Reporting vulnerabilities
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.
2020-08-15 14:59:34 +02:00
## Appreciation
2019-11-01 18:38:00 +01:00
A quick note from Knut Sveidqvist:
>*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!*
>*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.*
>*Thank you to [Tyler Long ](https://github.com/tylerlong ) who has been a collaborator since April 2017.*
>
>*Thank you to the ever-growing list of [contributors ](https://github.com/knsv/mermaid/graphs/contributors ) that brought the project this far!*
---
2014-12-12 19:05:27 +01:00
*Mermaid was created by Knut Sveidqvist for easier documentation.*