collab/mermaid/docs/intro/index.mdblame
View source
6dd74de1> **Warning**
6dd74de2>
6dd74de3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
6dd74de4>
6dd74de5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/index.md](../../packages/mermaid/src/docs/intro/index.md).
6dd74de6
6dd74de7# About Mermaid
6dd74de8
6dd74de9**Mermaid lets you create diagrams and visualizations using text and code.**
6dd74de10
6dd74de11It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
6dd74de12
6dd74de13> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](syntax-reference.md).
6dd74de14
6dd74de15<img src="/header.png" alt="" />
6dd74de16
6dd74de17<div class='badges'>
6dd74de18
6dd74de19[![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)
6dd74de20[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
6dd74de21[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
6dd74de22[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
6dd74de23[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
6dd74de24[![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
6dd74de25[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj)
6dd74de26[![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
6dd74de27
6dd74de28</div>
6dd74de29
6dd74de30<!-- Mermaid book banner -->
6dd74de31
6dd74de32[![Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)
6dd74de33
6dd74de34<!-- <Main description> -->
6dd74de35
6dd74de36Mermaid 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.
6dd74de37
6dd74de38> Doc-Rot is a Catch-22 that Mermaid helps to solve.
6dd74de39
6dd74de40Diagramming and documentation costs precious developer time and gets outdated quickly.
6dd74de41But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
6dd74de42Mermaid 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/> <br/>
6dd74de43Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
6dd74de44[Tutorials](../ecosystem/tutorials.md) has video tutorials.
6dd74de45
6dd74de46Use Mermaid with your favorite applications, check out the list of [Community Integrations](../ecosystem/integrations-community.md).
6dd74de47
6dd74de48For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
6dd74de49
6dd74de50🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
6dd74de51
6dd74de52> 🖖 Keep a steady pulse: [mermaid needs more Collaborators](https://github.com/mermaid-js/mermaid/issues/866).
6dd74de53
6dd74de54: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"!!!**
6dd74de55
6dd74de56**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
6dd74de57
6dd74de58Our 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.
6dd74de59
6dd74de60[![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
6dd74de61
6dd74de62In 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.
6dd74de63
6dd74de64<a href="https://applitools.com/">
6dd74de65<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>
6dd74de66</a>
6dd74de67
6dd74de68## Diagram Types
6dd74de69
6dd74de70### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
6dd74de71
6dd74de72```mermaid-example
6dd74de73graph TD;
6dd74de74 A-->B;
6dd74de75 A-->C;
6dd74de76 B-->D;
6dd74de77 C-->D;
6dd74de78```
6dd74de79
6dd74de80```mermaid
6dd74de81graph TD;
6dd74de82 A-->B;
6dd74de83 A-->C;
6dd74de84 B-->D;
6dd74de85 C-->D;
6dd74de86```
6dd74de87
6dd74de88### [Sequence diagram](../syntax/sequenceDiagram.md)
6dd74de89
6dd74de90```mermaid-example
6dd74de91sequenceDiagram
6dd74de92 participant Alice
6dd74de93 participant Bob
6dd74de94 Alice->>John: Hello John, how are you?
6dd74de95 loop HealthCheck
6dd74de96 John->>John: Fight against hypochondria
6dd74de97 end
6dd74de98 Note right of John: Rational thoughts <br/>prevail!
6dd74de99 John-->>Alice: Great!
6dd74de100 John->>Bob: How about you?
6dd74de101 Bob-->>John: Jolly good!
6dd74de102```
6dd74de103
6dd74de104```mermaid
6dd74de105sequenceDiagram
6dd74de106 participant Alice
6dd74de107 participant Bob
6dd74de108 Alice->>John: Hello John, how are you?
6dd74de109 loop HealthCheck
6dd74de110 John->>John: Fight against hypochondria
6dd74de111 end
6dd74de112 Note right of John: Rational thoughts <br/>prevail!
6dd74de113 John-->>Alice: Great!
6dd74de114 John->>Bob: How about you?
6dd74de115 Bob-->>John: Jolly good!
6dd74de116```
6dd74de117
6dd74de118### [Gantt diagram](../syntax/gantt.md)
6dd74de119
6dd74de120```mermaid-example
6dd74de121gantt
6dd74de122dateFormat YYYY-MM-DD
6dd74de123title Adding GANTT diagram to mermaid
6dd74de124excludes weekdays 2014-01-10
6dd74de125
6dd74de126section A section
6dd74de127Completed task :done, des1, 2014-01-06,2014-01-08
6dd74de128Active task :active, des2, 2014-01-09, 3d
6dd74de129Future task : des3, after des2, 5d
6dd74de130Future task2 : des4, after des3, 5d
6dd74de131```
6dd74de132
6dd74de133```mermaid
6dd74de134gantt
6dd74de135dateFormat YYYY-MM-DD
6dd74de136title Adding GANTT diagram to mermaid
6dd74de137excludes weekdays 2014-01-10
6dd74de138
6dd74de139section A section
6dd74de140Completed task :done, des1, 2014-01-06,2014-01-08
6dd74de141Active task :active, des2, 2014-01-09, 3d
6dd74de142Future task : des3, after des2, 5d
6dd74de143Future task2 : des4, after des3, 5d
6dd74de144```
6dd74de145
6dd74de146### [Class diagram](../syntax/classDiagram.md)
6dd74de147
6dd74de148```mermaid-example
6dd74de149classDiagram
6dd74de150Class01 <|-- AveryLongClass : Cool
6dd74de151Class03 *-- Class04
6dd74de152Class05 o-- Class06
6dd74de153Class07 .. Class08
6dd74de154Class09 --> C2 : Where am i?
6dd74de155Class09 --* C3
6dd74de156Class09 --|> Class07
6dd74de157Class07 : equals()
6dd74de158Class07 : Object[] elementData
6dd74de159Class01 : size()
6dd74de160Class01 : int chimp
6dd74de161Class01 : int gorilla
6dd74de162Class08 <--> C2: Cool label
6dd74de163```
6dd74de164
6dd74de165```mermaid
6dd74de166classDiagram
6dd74de167Class01 <|-- AveryLongClass : Cool
6dd74de168Class03 *-- Class04
6dd74de169Class05 o-- Class06
6dd74de170Class07 .. Class08
6dd74de171Class09 --> C2 : Where am i?
6dd74de172Class09 --* C3
6dd74de173Class09 --|> Class07
6dd74de174Class07 : equals()
6dd74de175Class07 : Object[] elementData
6dd74de176Class01 : size()
6dd74de177Class01 : int chimp
6dd74de178Class01 : int gorilla
6dd74de179Class08 <--> C2: Cool label
6dd74de180```
6dd74de181
6dd74de182### [Git graph](../syntax/gitgraph.md)
6dd74de183
6dd74de184```mermaid-example
6dd74de185 gitGraph
6dd74de186 commit
6dd74de187 commit
6dd74de188 branch develop
6dd74de189 commit
6dd74de190 commit
6dd74de191 commit
6dd74de192 checkout main
6dd74de193 commit
6dd74de194 commit
6dd74de195```
6dd74de196
6dd74de197```mermaid
6dd74de198 gitGraph
6dd74de199 commit
6dd74de200 commit
6dd74de201 branch develop
6dd74de202 commit
6dd74de203 commit
6dd74de204 commit
6dd74de205 checkout main
6dd74de206 commit
6dd74de207 commit
6dd74de208```
6dd74de209
6dd74de210### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
6dd74de211
6dd74de212```mermaid-example
6dd74de213erDiagram
6dd74de214 CUSTOMER ||--o{ ORDER : places
6dd74de215 ORDER ||--|{ LINE-ITEM : contains
6dd74de216 CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
6dd74de217
6dd74de218```
6dd74de219
6dd74de220```mermaid
6dd74de221erDiagram
6dd74de222 CUSTOMER ||--o{ ORDER : places
6dd74de223 ORDER ||--|{ LINE-ITEM : contains
6dd74de224 CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
6dd74de225
6dd74de226```
6dd74de227
6dd74de228### [User Journey Diagram](../syntax/userJourney.md)
6dd74de229
6dd74de230```mermaid-example
6dd74de231journey
6dd74de232 title My working day
6dd74de233 section Go to work
6dd74de234 Make tea: 5: Me
6dd74de235 Go upstairs: 3: Me
6dd74de236 Do work: 1: Me, Cat
6dd74de237 section Go home
6dd74de238 Go downstairs: 5: Me
6dd74de239 Sit down: 5: Me
6dd74de240```
6dd74de241
6dd74de242```mermaid
6dd74de243journey
6dd74de244 title My working day
6dd74de245 section Go to work
6dd74de246 Make tea: 5: Me
6dd74de247 Go upstairs: 3: Me
6dd74de248 Do work: 1: Me, Cat
6dd74de249 section Go home
6dd74de250 Go downstairs: 5: Me
6dd74de251 Sit down: 5: Me
6dd74de252```
6dd74de253
6dd74de254### [Quadrant Chart](../syntax/quadrantChart.md)
6dd74de255
6dd74de256```mermaid-example
6dd74de257quadrantChart
6dd74de258 title Reach and engagement of campaigns
6dd74de259 x-axis Low Reach --> High Reach
6dd74de260 y-axis Low Engagement --> High Engagement
6dd74de261 quadrant-1 We should expand
6dd74de262 quadrant-2 Need to promote
6dd74de263 quadrant-3 Re-evaluate
6dd74de264 quadrant-4 May be improved
6dd74de265 Campaign A: [0.3, 0.6]
6dd74de266 Campaign B: [0.45, 0.23]
6dd74de267 Campaign C: [0.57, 0.69]
6dd74de268 Campaign D: [0.78, 0.34]
6dd74de269 Campaign E: [0.40, 0.34]
6dd74de270 Campaign F: [0.35, 0.78]
6dd74de271```
6dd74de272
6dd74de273```mermaid
6dd74de274quadrantChart
6dd74de275 title Reach and engagement of campaigns
6dd74de276 x-axis Low Reach --> High Reach
6dd74de277 y-axis Low Engagement --> High Engagement
6dd74de278 quadrant-1 We should expand
6dd74de279 quadrant-2 Need to promote
6dd74de280 quadrant-3 Re-evaluate
6dd74de281 quadrant-4 May be improved
6dd74de282 Campaign A: [0.3, 0.6]
6dd74de283 Campaign B: [0.45, 0.23]
6dd74de284 Campaign C: [0.57, 0.69]
6dd74de285 Campaign D: [0.78, 0.34]
6dd74de286 Campaign E: [0.40, 0.34]
6dd74de287 Campaign F: [0.35, 0.78]
6dd74de288```
6dd74de289
6dd74de290### [XY Chart](../syntax/xyChart.md)
6dd74de291
6dd74de292```mermaid-example
6dd74de293xychart-beta
6dd74de294 title "Sales Revenue"
6dd74de295 x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de296 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de297 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de298 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de299```
6dd74de300
6dd74de301```mermaid
6dd74de302xychart-beta
6dd74de303 title "Sales Revenue"
6dd74de304 x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
6dd74de305 y-axis "Revenue (in $)" 4000 --> 11000
6dd74de306 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de307 line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
6dd74de308```
6dd74de309
6dd74de310## Installation
6dd74de311
6dd74de312**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
6dd74de313
6dd74de314**It would also be helpful to learn more about mermaid's [Syntax](./syntax-reference.md).**
6dd74de315
6dd74de316### CDN
6dd74de317
6dd74de318```
6dd74de319https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/
6dd74de320```
6dd74de321
6dd74de322To select a version:
6dd74de323
6dd74de324Replace `<version>` with the desired version number.
6dd74de325
6dd74de326Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@11>
6dd74de327
6dd74de328## Deploying Mermaid
6dd74de329
6dd74de330To Deploy Mermaid:
6dd74de331
6dd74de3321. You will need to install node v16, which would have npm
6dd74de3332. Install mermaid
6dd74de334 - NPM: `npm i mermaid`
6dd74de335 - Yarn: `yarn add mermaid`
6dd74de336 - Pnpm: `pnpm add mermaid`
6dd74de337
6dd74de338### [Mermaid API](../config/setup/README.md):
6dd74de339
6dd74de340**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
6dd74de341
6dd74de342```html
6dd74de343<script type="module">
6dd74de344 import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
6dd74de345 mermaid.initialize({ startOnLoad: true });
6dd74de346</script>
6dd74de347```
6dd74de348
6dd74de349**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
6dd74de350
6dd74de351**Examples can be found in** [Other examples](../syntax/examples.md)
6dd74de352
6dd74de353## Sibling projects
6dd74de354
6dd74de355- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
6dd74de356- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
6dd74de357- [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny)
6dd74de358- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
6dd74de359- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
6dd74de360
6dd74de361## Request for Assistance
6dd74de362
6dd74de363Things are piling up and I have a hard time keeping up. It would be great if we could form a core team of developers to cooperate
6dd74de364with the future development of mermaid.
6dd74de365
6dd74de366As part of this team you would get write access to the repository and would
6dd74de367represent the project when answering questions and issues.
6dd74de368
6dd74de369Together we could continue the work with things like:
6dd74de370
6dd74de371- Adding more types of diagrams like mindmaps, ert diagrams, etc.
6dd74de372- Improving existing diagrams
6dd74de373
6dd74de374Don't hesitate to contact me if you want to get involved!
6dd74de375
6dd74de376## Contributors
6dd74de377
6dd74de378<div class='badges'>
6dd74de379
6dd74de380[![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)
6dd74de381[![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
6dd74de382[![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
6dd74de383
6dd74de384</div>
6dd74de385
6dd74de386Mermaid 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.
6dd74de387
6dd74de388Detailed information about how to contribute can be found in the [contribution guideline](../community/contributing.md).
6dd74de389
6dd74de390### Requirements
6dd74de391
6dd74de392- [volta](https://volta.sh/) to manage node versions.
6dd74de393- [Node.js](https://nodejs.org/en/). `volta install node`
6dd74de394- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
6dd74de395
6dd74de396### Development Installation
6dd74de397
6dd74de398```bash
6dd74de399git clone git@github.com:mermaid-js/mermaid.git
6dd74de400cd mermaid
6dd74de401# npx is required for first install as volta support for pnpm is not added yet.
6dd74de402npx pnpm install
6dd74de403pnpm test
6dd74de404```
6dd74de405
6dd74de406### Lint
6dd74de407
6dd74de408```sh
6dd74de409pnpm lint
6dd74de410```
6dd74de411
6dd74de412We use [eslint](https://eslint.org/).
6dd74de413We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/integrations) to get real time lint result.
6dd74de414
6dd74de415### Test
6dd74de416
6dd74de417```sh
6dd74de418pnpm test
6dd74de419```
6dd74de420
6dd74de421Manual test in browser: open `dist/index.html`
6dd74de422
6dd74de423### Release
6dd74de424
6dd74de425For those who have the permission to do so:
6dd74de426
6dd74de427Update version number in `package.json`.
6dd74de428
6dd74de429```sh
6dd74de430npm publish
6dd74de431```
6dd74de432
6dd74de433The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/).
6dd74de434
6dd74de435## Security and safe diagrams
6dd74de436
6dd74de437For 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.
6dd74de438
6dd74de439As 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.
6dd74de440
6dd74de441_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._
6dd74de442
6dd74de443## Reporting vulnerabilities
6dd74de444
6dd74de445To 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.
6dd74de446
6dd74de447## Appreciation
6dd74de448
6dd74de449A quick note from Knut Sveidqvist:
6dd74de450
6dd74de451> _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!_
6dd74de452>
6dd74de453> _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._
6dd74de454>
6dd74de455> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
6dd74de456>
6dd74de457> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
6dd74de458
6dd74de459---
6dd74de460
6dd74de461_Mermaid was created by Knut Sveidqvist for easier documentation._
6dd74de462
6dd74de463<style scoped>
6dd74de464 .badges > p {
6dd74de465 display: flex;
6dd74de466 }
6dd74de467
6dd74de468 .badges > p > a {
6dd74de469 margin: 0 0.5rem;
6dd74de470 }
6dd74de471
6dd74de472 .dark #VPContent > div > div > div.content > div > main > div > div > img {
6dd74de473 filter: invert(1) hue-rotate(217deg) contrast(0.72);
6dd74de474 }
6dd74de475</style>