collab/mermaid/README.mdblame
View source
6dd74de1<p align="center">
6dd74de2<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
6dd74de3</p>
6dd74de4<h1 align="center">
6dd74de5Mermaid
6dd74de6</h1>
6dd74de7<p align="center">
6dd74de8Generate diagrams from markdown-like text.
6dd74de9<p>
6dd74de10<p align="center">
6dd74de11 <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
6dd74de12<p>
6dd74de13
6dd74de14<p align="center">
6dd74de15<a href="https://mermaid.ai/live/"><b>Live Editor!</b></a>
6dd74de16</p>
6dd74de17<p align="center">
6dd74de18 <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>
6dd74de19</p>
6dd74de20<p align="center">
6dd74de21<a href="./README.zh-CN.md">简体中文</a>
6dd74de22</p>
6dd74de23<p align="center">
6dd74de24Try 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>
6dd74de25</p>
6dd74de26
6dd74de27<br>
6dd74de28<br>
6dd74de29
6dd74de30[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
6dd74de31[![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)
6dd74de32[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
6dd74de33[![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
6dd74de34[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
6dd74de35[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
6dd74de36[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj)
6dd74de37[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
6dd74de38[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
6dd74de39[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/mermaid-js/mermaid/badge)](https://securityscorecards.dev/viewer/?uri=github.com/mermaid-js/mermaid)
6dd74de40
6dd74de41<img src="./img/header.png" alt="" />
6dd74de42
6dd74de43: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"!!!**
6dd74de44
6dd74de45**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
6dd74de46
6dd74de47<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>
6dd74de48
6dd74de49## Table of content
6dd74de50
6dd74de51<details>
6dd74de52<summary>Expand contents</summary>
6dd74de53
6dd74de54- [About](#about)
6dd74de55- [Examples](#examples)
6dd74de56- [Release](#release)
6dd74de57- [Related projects](#related-projects)
6dd74de58- [Contributors](#contributors---)
6dd74de59- [Security and safe diagrams](#security-and-safe-diagrams)
6dd74de60- [Reporting vulnerabilities](#reporting-vulnerabilities)
6dd74de61- [Appreciation](#appreciation)
6dd74de62
6dd74de63</details>
6dd74de64
6dd74de65## About
6dd74de66
6dd74de67<!-- <Main description> -->
6dd74de68
6dd74de69Mermaid 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.
6dd74de70
6dd74de71> Doc-Rot is a Catch-22 that Mermaid helps to solve.
6dd74de72
6dd74de73Diagramming and documentation costs precious developer time and gets outdated quickly.
6dd74de74But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
6dd74de75Mermaid 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/>
6dd74de76<br/>
6dd74de77
6dd74de78Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
6dd74de79For video tutorials, visit our [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html) page.
6dd74de80Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](https://mermaid.js.org/ecosystem/integrations-community.html).
6dd74de81
6dd74de82You 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).
6dd74de83
6dd74de84For 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).
6dd74de85
6dd74de86Our 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.
6dd74de87
6dd74de88[![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
6dd74de89
6dd74de90In 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.
6dd74de91
6dd74de92<a href="https://applitools.com/">
6dd74de93<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>
6dd74de94</a>
6dd74de95
6dd74de96<!-- </Main description> -->
6dd74de97
6dd74de98## Examples
6dd74de99
6dd74de100**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).**
6dd74de101
6dd74de102<!-- <Flowchart> -->
6dd74de103
6dd74de104### 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>]
6dd74de105
6dd74de106```
6dd74de107flowchart LR
6dd74de108
6dd74de109A[Hard] -->|Text| B(Round)
6dd74de110B --> C{Decision}
6dd74de111C -->|One| D[Result 1]
6dd74de112C -->|Two| E[Result 2]
6dd74de113```
6dd74de114
6dd74de115```mermaid
6dd74de116flowchart LR
6dd74de117
6dd74de118A[Hard] -->|Text| B(Round)
6dd74de119B --> C{Decision}
6dd74de120C -->|One| D[Result 1]
6dd74de121C -->|Two| E[Result 2]
6dd74de122```
6dd74de123
6dd74de124### 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>]
6dd74de125
6dd74de126```
6dd74de127sequenceDiagram
6dd74de128Alice->>John: Hello John, how are you?
6dd74de129loop HealthCheck
6dd74de130 John->>John: Fight against hypochondria
6dd74de131end
6dd74de132Note right of John: Rational thoughts!
6dd74de133John-->>Alice: Great!
6dd74de134John->>Bob: How about you?
6dd74de135Bob-->>John: Jolly good!
6dd74de136```
6dd74de137
6dd74de138```mermaid
6dd74de139sequenceDiagram
6dd74de140Alice->>John: Hello John, how are you?
6dd74de141loop HealthCheck
6dd74de142 John->>John: Fight against hypochondria
6dd74de143end
6dd74de144Note right of John: Rational thoughts!
6dd74de145John-->>Alice: Great!
6dd74de146John->>Bob: How about you?
6dd74de147Bob-->>John: Jolly good!
6dd74de148```
6dd74de149
6dd74de150### 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>]
6dd74de151
6dd74de152```
6dd74de153gantt
6dd74de154 section Section
6dd74de155 Completed :done, des1, 2014-01-06,2014-01-08
6dd74de156 Active :active, des2, 2014-01-07, 3d
6dd74de157 Parallel 1 : des3, after des1, 1d
6dd74de158 Parallel 2 : des4, after des1, 1d
6dd74de159 Parallel 3 : des5, after des3, 1d
6dd74de160 Parallel 4 : des6, after des4, 1d
6dd74de161```
6dd74de162
6dd74de163```mermaid
6dd74de164gantt
6dd74de165 section Section
6dd74de166 Completed :done, des1, 2014-01-06,2014-01-08
6dd74de167 Active :active, des2, 2014-01-07, 3d
6dd74de168 Parallel 1 : des3, after des1, 1d
6dd74de169 Parallel 2 : des4, after des1, 1d
6dd74de170 Parallel 3 : des5, after des3, 1d
6dd74de171 Parallel 4 : des6, after des4, 1d
6dd74de172```
6dd74de173
6dd74de174### 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>]
6dd74de175
6dd74de176```
6dd74de177classDiagram
6dd74de178Class01 <|-- AveryLongClass : Cool
6dd74de179<<Interface>> Class01
6dd74de180Class09 --> C2 : Where am I?
6dd74de181Class09 --* C3
6dd74de182Class09 --|> Class07
6dd74de183Class07 : equals()
6dd74de184Class07 : Object[] elementData
6dd74de185Class01 : size()
6dd74de186Class01 : int chimp
6dd74de187Class01 : int gorilla
6dd74de188class Class10 {
6dd74de189 <<service>>
6dd74de190 int id
6dd74de191 size()
6dd74de192}
6dd74de193
6dd74de194```
6dd74de195
6dd74de196```mermaid
6dd74de197classDiagram
6dd74de198Class01 <|-- AveryLongClass : Cool
6dd74de199<<Interface>> Class01
6dd74de200Class09 --> C2 : Where am I?
6dd74de201Class09 --* C3
6dd74de202Class09 --|> Class07
6dd74de203Class07 : equals()
6dd74de204Class07 : Object[] elementData
6dd74de205Class01 : size()
6dd74de206Class01 : int chimp
6dd74de207Class01 : int gorilla
6dd74de208class Class10 {
6dd74de209 <<service>>
6dd74de210 int id
6dd74de211 size()
6dd74de212}
6dd74de213
6dd74de214```
6dd74de215
6dd74de216### 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>]
6dd74de217
6dd74de218```
6dd74de219stateDiagram-v2
6dd74de220[*] --> Still
6dd74de221Still --> [*]
6dd74de222Still --> Moving
6dd74de223Moving --> Still
6dd74de224Moving --> Crash
6dd74de225Crash --> [*]
6dd74de226```
6dd74de227
6dd74de228```mermaid
6dd74de229stateDiagram-v2
6dd74de230[*] --> Still
6dd74de231Still --> [*]
6dd74de232Still --> Moving
6dd74de233Moving --> Still
6dd74de234Moving --> Crash
6dd74de235Crash --> [*]
6dd74de236```
6dd74de237
6dd74de238### 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>]
6dd74de239
6dd74de240```
6dd74de241pie
6dd74de242"Dogs" : 386
6dd74de243"Cats" : 85.9
6dd74de244"Rats" : 15
6dd74de245```
6dd74de246
6dd74de247```mermaid
6dd74de248pie
6dd74de249"Dogs" : 386
6dd74de250"Cats" : 85.9
6dd74de251"Rats" : 15
6dd74de252```
6dd74de253
6dd74de254### 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>]
6dd74de255
6dd74de256```
6dd74de257gitGraph
6dd74de258 commit
6dd74de259 commit
6dd74de260 branch develop
6dd74de261 checkout develop
6dd74de262 commit
6dd74de263 commit
6dd74de264 checkout main
6dd74de265 merge develop
6dd74de266 commit
6dd74de267 commit
6dd74de268```
6dd74de269
6dd74de270```mermaid
6dd74de271gitGraph
6dd74de272 commit
6dd74de273 commit
6dd74de274 branch develop
6dd74de275 checkout develop
6dd74de276 commit
6dd74de277 commit
6dd74de278 checkout main
6dd74de279 merge develop
6dd74de280 commit
6dd74de281 commit
6dd74de282```
6dd74de283
6dd74de284### 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>]
6dd74de285
6dd74de286```
6dd74de287gantt
6dd74de288 title Git Issues - days since last update
6dd74de289 dateFormat X
6dd74de290 axisFormat %s
6dd74de291
6dd74de292 section Issue19062
6dd74de293 71 : 0, 71
6dd74de294 section Issue19401
6dd74de295 36 : 0, 36
6dd74de296 section Issue193
6dd74de297 34 : 0, 34
6dd74de298 section Issue7441
6dd74de299 9 : 0, 9
6dd74de300 section Issue1300
6dd74de301 5 : 0, 5
6dd74de302```
6dd74de303
6dd74de304```mermaid
6dd74de305gantt
6dd74de306 title Git Issues - days since last update
6dd74de307 dateFormat X
6dd74de308 axisFormat %s
6dd74de309
6dd74de310 section Issue19062
6dd74de311 71 : 0, 71
6dd74de312 section Issue19401
6dd74de313 36 : 0, 36
6dd74de314 section Issue193
6dd74de315 34 : 0, 34
6dd74de316 section Issue7441
6dd74de317 9 : 0, 9
6dd74de318 section Issue1300
6dd74de319 5 : 0, 5
6dd74de320```
6dd74de321
6dd74de322### 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>]
6dd74de323
6dd74de324```
6dd74de325 journey
6dd74de326 title My working day
6dd74de327 section Go to work
6dd74de328 Make tea: 5: Me
6dd74de329 Go upstairs: 3: Me
6dd74de330 Do work: 1: Me, Cat
6dd74de331 section Go home
6dd74de332 Go downstairs: 5: Me
6dd74de333 Sit down: 3: Me
6dd74de334```
6dd74de335
6dd74de336```mermaid
6dd74de337 journey
6dd74de338 title My working day
6dd74de339 section Go to work
6dd74de340 Make tea: 5: Me
6dd74de341 Go upstairs: 3: Me
6dd74de342 Do work: 1: Me, Cat
6dd74de343 section Go home
6dd74de344 Go downstairs: 5: Me
6dd74de345 Sit down: 3: Me
6dd74de346```
6dd74de347
6dd74de348### C4 diagram [<a href="https://mermaid.js.org/syntax/c4.html">docs</a>]
6dd74de349
6dd74de350```
6dd74de351C4Context
6dd74de352title System Context diagram for Internet Banking System
6dd74de353
6dd74de354Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de355Person(customerB, "Banking Customer B")
6dd74de356Person_Ext(customerC, "Banking Customer C")
6dd74de357System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de358
6dd74de359Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de360
6dd74de361Enterprise_Boundary(b1, "BankBoundary") {
6dd74de362
6dd74de363 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de364
6dd74de365 System_Boundary(b2, "BankBoundary2") {
6dd74de366 System(SystemA, "Banking System A")
6dd74de367 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
6dd74de368 }
6dd74de369
6dd74de370 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de371 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de372
6dd74de373 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de374 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
6dd74de375 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de376 }
6dd74de377}
6dd74de378
6dd74de379BiRel(customerA, SystemAA, "Uses")
6dd74de380BiRel(SystemAA, SystemE, "Uses")
6dd74de381Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de382Rel(SystemC, customerA, "Sends e-mails to")
6dd74de383```
6dd74de384
6dd74de385```mermaid
6dd74de386C4Context
6dd74de387title System Context diagram for Internet Banking System
6dd74de388
6dd74de389Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de390Person(customerB, "Banking Customer B")
6dd74de391Person_Ext(customerC, "Banking Customer C")
6dd74de392System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de393
6dd74de394Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de395
6dd74de396Enterprise_Boundary(b1, "BankBoundary") {
6dd74de397
6dd74de398 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de399
6dd74de400 System_Boundary(b2, "BankBoundary2") {
6dd74de401 System(SystemA, "Banking System A")
6dd74de402 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
6dd74de403 }
6dd74de404
6dd74de405 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de406 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de407
6dd74de408 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de409 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
6dd74de410 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de411 }
6dd74de412}
6dd74de413
6dd74de414BiRel(customerA, SystemAA, "Uses")
6dd74de415BiRel(SystemAA, SystemE, "Uses")
6dd74de416Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de417Rel(SystemC, customerA, "Sends e-mails to")
6dd74de418```
6dd74de419
6dd74de420## Release
6dd74de421
6dd74de422For those who have the permission to do so:
6dd74de423
6dd74de424Update version number in `package.json`.
6dd74de425
6dd74de426```sh
6dd74de427npm publish
6dd74de428```
6dd74de429
6dd74de430The above command generates files into the `dist` folder and publishes them to <https://www.npmjs.com>.
6dd74de431
6dd74de432## Related projects
6dd74de433
6dd74de434- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
6dd74de435- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
6dd74de436- [HTTP Server](https://github.com/TomWright/mermaid-server)
6dd74de437
6dd74de438## 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)
6dd74de439
6dd74de440Mermaid 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.
6dd74de441
6dd74de442Detailed information about how to contribute can be found in the [contribution guide](https://mermaid.js.org/community/contributing.html)
6dd74de443
6dd74de444## Security and safe diagrams
6dd74de445
6dd74de446For 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.
6dd74de447
6dd74de448As 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.
6dd74de449
6dd74de450_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._
6dd74de451
6dd74de452## Reporting vulnerabilities
6dd74de453
6dd74de454To 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.
6dd74de455
6dd74de456## Appreciation
6dd74de457
6dd74de458A quick note from Knut Sveidqvist:
6dd74de459
6dd74de460> _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!_
6dd74de461>
6dd74de462> _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._
6dd74de463>
6dd74de464> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
6dd74de465>
6dd74de466> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
6dd74de467
6dd74de468---
6dd74de469
6dd74de470_Mermaid was created by Knut Sveidqvist for easier documentation._