collab/mermaid/README.zh-CN.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">
6dd74de8通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
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.live/"><b>实时编辑器!</b></a>
6dd74de16</p>
6dd74de17<p align="center">
6dd74de18 <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/sKeNQX4Wtj" title="Discord invite">🙌 加入我们</a>
6dd74de19</p>
6dd74de20<p align="center">
6dd74de21<a href="./README.md">English</a>
6dd74de22</p>
6dd74de23
6dd74de24<p align="center">
6dd74de25尝试未来版本的实时编辑器预览: <a href="https://develop.git.mermaid.live/" title="尝试来自develop分支的mermaid版本。">Develop</a> | <a href="https://next.git.mermaid.live/" title="尝试来自next分支的mermaid版本。">Next</a>
6dd74de26</p>
6dd74de27
6dd74de28<br>
6dd74de29<br>
6dd74de30
6dd74de31[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
6dd74de32[![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)
6dd74de33[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
6dd74de34[![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
6dd74de35[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
6dd74de36[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
6dd74de37[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj)
6dd74de38[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
6dd74de39
6dd74de40<img src="./img/header.png" alt="" />
6dd74de41
6dd74de42:trophy: **Mermaid 被提名并获得了 [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) 的 "The most exciting use of technology" 奖项!!!**
6dd74de43
6dd74de44**感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
6dd74de45
6dd74de46<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>
6dd74de47
6dd74de48## 关于 Mermaid
6dd74de49
6dd74de50<!-- <Main description> -->
6dd74de51
6dd74de52Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
6dd74de53
6dd74de54> Doc-Rot 是 Mermaid 致力于解决的一个难题。
6dd74de55
6dd74de56绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。 <br/>
6dd74de57Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
6dd74de58<br/>
6dd74de59Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
6dd74de60你可以访问 [教程](https://mermaid.js.org/ecosystem/tutorials.html) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](https://mermaid.js.org/ecosystem/integrations-community.html) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
6dd74de61
6dd74de62如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](https://mermaid.js.org/intro/getting-started.html), [用法](https://mermaid.js.org/config/usage.html) 和 [教程](https://mermaid.js.org/ecosystem/tutorials.html).
6dd74de63
6dd74de64<!-- </Main description> -->
6dd74de65
6dd74de66## 示例
6dd74de67
6dd74de68**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid.js.org/intro/syntax-reference.html) 查看详情。**
6dd74de69
6dd74de70<table>
6dd74de71<!-- <Flowchart> -->
6dd74de72
6dd74de73### 流程图 [<a href="https://mermaid.js.org/syntax/flowchart.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
6dd74de74
6dd74de75```
6dd74de76flowchart LR
6dd74de77A[Hard] -->|Text| B(Round)
6dd74de78B --> C{Decision}
6dd74de79C -->|One| D[Result 1]
6dd74de80C -->|Two| E[Result 2]
6dd74de81```
6dd74de82
6dd74de83```mermaid
6dd74de84flowchart LR
6dd74de85A[Hard] -->|Text| B(Round)
6dd74de86B --> C{Decision}
6dd74de87C -->|One| D[Result 1]
6dd74de88C -->|Two| E[Result 2]
6dd74de89```
6dd74de90
6dd74de91### 时序图 [<a href="https://mermaid.js.org/syntax/sequenceDiagram.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
6dd74de92
6dd74de93```
6dd74de94sequenceDiagram
6dd74de95Alice->>John: Hello John, how are you?
6dd74de96loop HealthCheck
6dd74de97 John->>John: Fight against hypochondria
6dd74de98end
6dd74de99Note right of John: Rational thoughts!
6dd74de100John-->>Alice: Great!
6dd74de101John->>Bob: How about you?
6dd74de102Bob-->>John: Jolly good!
6dd74de103```
6dd74de104
6dd74de105```mermaid
6dd74de106sequenceDiagram
6dd74de107Alice->>John: Hello John, how are you?
6dd74de108loop HealthCheck
6dd74de109 John->>John: Fight against hypochondria
6dd74de110end
6dd74de111Note right of John: Rational thoughts!
6dd74de112John-->>Alice: Great!
6dd74de113John->>Bob: How about you?
6dd74de114Bob-->>John: Jolly good!
6dd74de115```
6dd74de116
6dd74de117### 甘特图 [<a href="https://mermaid.js.org/syntax/gantt.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
6dd74de118
6dd74de119```
6dd74de120gantt
6dd74de121 section Section
6dd74de122 Completed :done, des1, 2014-01-06,2014-01-08
6dd74de123 Active :active, des2, 2014-01-07, 3d
6dd74de124 Parallel 1 : des3, after des1, 1d
6dd74de125 Parallel 2 : des4, after des1, 1d
6dd74de126 Parallel 3 : des5, after des3, 1d
6dd74de127 Parallel 4 : des6, after des4, 1d
6dd74de128```
6dd74de129
6dd74de130```mermaid
6dd74de131gantt
6dd74de132 section Section
6dd74de133 Completed :done, des1, 2014-01-06,2014-01-08
6dd74de134 Active :active, des2, 2014-01-07, 3d
6dd74de135 Parallel 1 : des3, after des1, 1d
6dd74de136 Parallel 2 : des4, after des1, 1d
6dd74de137 Parallel 3 : des5, after des3, 1d
6dd74de138 Parallel 4 : des6, after des4, 1d
6dd74de139```
6dd74de140
6dd74de141### 类图 [<a href="https://mermaid.js.org/syntax/classDiagram.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
6dd74de142
6dd74de143```
6dd74de144classDiagram
6dd74de145Class01 <|-- AveryLongClass : Cool
6dd74de146<<Interface>> Class01
6dd74de147Class09 --> C2 : Where am I?
6dd74de148Class09 --* C3
6dd74de149Class09 --|> Class07
6dd74de150Class07 : equals()
6dd74de151Class07 : Object[] elementData
6dd74de152Class01 : size()
6dd74de153Class01 : int chimp
6dd74de154Class01 : int gorilla
6dd74de155class Class10 {
6dd74de156 <<service>>
6dd74de157 int id
6dd74de158 size()
6dd74de159}
6dd74de160```
6dd74de161
6dd74de162```mermaid
6dd74de163classDiagram
6dd74de164Class01 <|-- AveryLongClass : Cool
6dd74de165<<Interface>> Class01
6dd74de166Class09 --> C2 : Where am I?
6dd74de167Class09 --* C3
6dd74de168Class09 --|> Class07
6dd74de169Class07 : equals()
6dd74de170Class07 : Object[] elementData
6dd74de171Class01 : size()
6dd74de172Class01 : int chimp
6dd74de173Class01 : int gorilla
6dd74de174class Class10 {
6dd74de175 <<service>>
6dd74de176 int id
6dd74de177 size()
6dd74de178}
6dd74de179```
6dd74de180
6dd74de181### 状态图 [<a href="https://mermaid.js.org/syntax/stateDiagram.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkLsOwjAMRX-l8ojahTEDCzB26kgYrMYtkfJAqVMJVf13QiIKqqfr44d8vUDvFYGAiZHponEMaJv5KF2V4na4V01zqjrWxhSUZYapuEetn7UbCy16P_5HzwGnR6FZfpdCDZaCRa3SWcunQQI_yJIEkaSiAaNhCdKtqRUj--7lehAcItUQn-pnBMSAZtroVWn2YYOU07b4z29Y37gJVYk">live editor</a>]
6dd74de182
6dd74de183```
6dd74de184stateDiagram-v2
6dd74de185[*] --> Still
6dd74de186Still --> [*]
6dd74de187Still --> Moving
6dd74de188Moving --> Still
6dd74de189Moving --> Crash
6dd74de190Crash --> [*]
6dd74de191```
6dd74de192
6dd74de193```mermaid
6dd74de194stateDiagram-v2
6dd74de195[*] --> Still
6dd74de196Still --> [*]
6dd74de197Still --> Moving
6dd74de198Moving --> Still
6dd74de199Moving --> Crash
6dd74de200Crash --> [*]
6dd74de201```
6dd74de202
6dd74de203### 饼图 [<a href="https://mermaid.js.org/syntax/pie.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
6dd74de204
6dd74de205```
6dd74de206pie
6dd74de207"Dogs" : 386
6dd74de208"Cats" : 85
6dd74de209"Rats" : 15
6dd74de210```
6dd74de211
6dd74de212```mermaid
6dd74de213pie
6dd74de214"Dogs" : 386
6dd74de215"Cats" : 85
6dd74de216"Rats" : 15
6dd74de217```
6dd74de218
6dd74de219### Git 图 [实验特性 - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
6dd74de220
6dd74de221### 用户体验旅程图 [<a href="https://mermaid.js.org/syntax/userJourney.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNpljzEPgkAMhf9K05nFGJdbJXFiYmVpuKIncDVHL4QQ_ruHaILaqXnf63vpjLVYRoMAd4nB81R5SKNOO4ZiglFC6_wVLL3JwLU68XARUHnhTQcoqGVQJgMnAwV_5GSMj0HJhcHAcU_y7d7AYVUzOJP-ddyk3ydZGf0n66uldPqCPxWYYc-hJ2fTj_OqVqg3Tplo0mq5odhphZVfkpWiSjn5Go2GyBnGhyXl3NE1UI-moW7g5QkSoF5m">live editor</a>]
6dd74de222
6dd74de223```
6dd74de224 journey
6dd74de225 title My working day
6dd74de226 section Go to work
6dd74de227 Make tea: 5: Me
6dd74de228 Go upstairs: 3: Me
6dd74de229 Do work: 1: Me, Cat
6dd74de230 section Go home
6dd74de231 Go downstairs: 5: Me
6dd74de232 Sit down: 3: Me
6dd74de233```
6dd74de234
6dd74de235```mermaid
6dd74de236 journey
6dd74de237 title My working day
6dd74de238 section Go to work
6dd74de239 Make tea: 5: Me
6dd74de240 Go upstairs: 3: Me
6dd74de241 Do work: 1: Me, Cat
6dd74de242 section Go home
6dd74de243 Go downstairs: 5: Me
6dd74de244 Sit down: 3: Me
6dd74de245```
6dd74de246
6dd74de247### C4 图 [<a href="https://mermaid.js.org/syntax/c4.html">文档</a>]
6dd74de248
6dd74de249```
6dd74de250C4Context
6dd74de251title System Context diagram for Internet Banking System
6dd74de252
6dd74de253Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de254Person(customerB, "Banking Customer B")
6dd74de255Person_Ext(customerC, "Banking Customer C")
6dd74de256System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de257
6dd74de258Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de259
6dd74de260Enterprise_Boundary(b1, "BankBoundary") {
6dd74de261
6dd74de262 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de263
6dd74de264 System_Boundary(b2, "BankBoundary2") {
6dd74de265 System(SystemA, "Banking System A")
6dd74de266 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
6dd74de267 }
6dd74de268
6dd74de269 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de270 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de271
6dd74de272 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de273 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
6dd74de274 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de275 }
6dd74de276}
6dd74de277
6dd74de278BiRel(customerA, SystemAA, "Uses")
6dd74de279BiRel(SystemAA, SystemE, "Uses")
6dd74de280Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de281Rel(SystemC, customerA, "Sends e-mails to")
6dd74de282```
6dd74de283
6dd74de284```mermaid
6dd74de285C4Context
6dd74de286title System Context diagram for Internet Banking System
6dd74de287
6dd74de288Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
6dd74de289Person(customerB, "Banking Customer B")
6dd74de290Person_Ext(customerC, "Banking Customer C")
6dd74de291System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
6dd74de292
6dd74de293Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
6dd74de294
6dd74de295Enterprise_Boundary(b1, "BankBoundary") {
6dd74de296
6dd74de297 SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
6dd74de298
6dd74de299 System_Boundary(b2, "BankBoundary2") {
6dd74de300 System(SystemA, "Banking System A")
6dd74de301 System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
6dd74de302 }
6dd74de303
6dd74de304 System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
6dd74de305 SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
6dd74de306
6dd74de307 Boundary(b3, "BankBoundary3", "boundary") {
6dd74de308 SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
6dd74de309 SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
6dd74de310 }
6dd74de311}
6dd74de312
6dd74de313BiRel(customerA, SystemAA, "Uses")
6dd74de314BiRel(SystemAA, SystemE, "Uses")
6dd74de315Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
6dd74de316Rel(SystemC, customerA, "Sends e-mails to")
6dd74de317```
6dd74de318
6dd74de319## 发布
6dd74de320
6dd74de321对于有权限的同学来说，你可以通过以下步骤来完成发布操作：
6dd74de322
6dd74de323更新 `package.json` 中的版本号，然后执行如下命令：
6dd74de324
6dd74de325```sh
6dd74de326npm publish
6dd74de327```
6dd74de328
6dd74de329以上的命令会将文件打包到 `dist` 目录并发布至 <https://www.npmjs.com>.
6dd74de330
6dd74de331## 相关项目
6dd74de332
6dd74de333- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
6dd74de334- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
6dd74de335- [HTTP Server](https://github.com/TomWright/mermaid-server)
6dd74de336
6dd74de337## 贡献者 [![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)
6dd74de338
6dd74de339Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。有很多不同的方式可以参与进来，而且我们还在寻找额外的帮助。如果你想知道如何开始贡献，请查看 [这个 issue](https://github.com/mermaid-js/mermaid/issues/866)。
6dd74de340
6dd74de341关于如何贡献的详细信息可以在 [贡献指南](https://mermaid.js.org/community/contributing.html) 中找到。
6dd74de342
6dd74de343## 安全
6dd74de344
6dd74de345对于公开网站来说，从互联网上的用户处检索文本、存储供后续在浏览器中展示的内容可能是不安全的，理由是用户的内容可能嵌入一些数据加载完成之后就会运行的恶意脚本，这些对于 Mermaid 来说毫无疑问是一个风险，尤其是 mermaid 图表还包含了许多在 html 中使用的字符，这意味着我们难以使用常规的手段来过滤不安全代码，因为这些常规手段会造成图表损坏。我们仍然在努力对获取到的代码进行安全过滤并不断完善我们的程序，但很难保证没有漏洞。
6dd74de346
6dd74de347作为拥有外部用户的网站的额外安全级别，我们很高兴推出一个新的安全级别，其中的图表在沙盒 iframe 中渲染，防止代码中的 javascript 被执行，这是在安全性方面迈出的一大步。
6dd74de348
6dd74de349_很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力_。
6dd74de350
6dd74de351## 报告漏洞
6dd74de352
6dd74de353如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。
6dd74de354
6dd74de355## 鸣谢
6dd74de356
6dd74de357来自 Knut Sveidqvist:
6dd74de358
6dd74de359> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
6dd74de360>
6dd74de361> _感谢越来越多的 [贡献者们](https://github.com/mermaid-js/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
6dd74de362
6dd74de363---
6dd74de364
6dd74de365_Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。_