mermaid
11.4.0
從類似 Markdown 的文字產生圖表。
即時編輯器！
文檔 | 開始使用 | CDN | ？加入我們
簡體中文
嘗試未來版本的即時編輯器預覽：開發 |下一個
？ Mermaid 被提名並榮獲 JS 開源獎（2019 年）“最令人興奮的技術應用”類別！
感謝所有參與者，提交拉取請求的人們，回答問題的人們！
關於
範例
發布
相關項目
貢獻者
安全和安全圖表
報告漏洞
欣賞
Mermaid 是一種基於 JavaScript 的圖表繪製工具，它使用 Markdown 啟發的文字定義和渲染器來創建和修改複雜的圖表。 Mermaid 的主要目的是幫助文件跟上開發的步伐。
Doc-Rot 是 Mermaid 幫助解決的第 22 條軍規。
圖表和文件會耗費開發人員寶貴的時間，並且很快就會過時。但沒有圖表或文件會破壞生產力並損害組織學習。
Mermaid 透過使用戶能夠創建易於修改的圖表來解決這個問題。它也可以成為生產腳本（和其他程式碼段）的一部分。
Mermaid 甚至允許非程式設計師透過 Mermaid 即時編輯器輕鬆建立詳細圖表。
如需影片教程，請造訪我們的教學頁面。將 Mermaid 與您最喜歡的應用程式一起使用，查看 Mermaid 的整合和用法清單。
您還可以在 GitHub 中使用 Mermaid 以及您喜歡的許多其他應用程式 - 查看 Mermaid 的整合和用法清單。
有關 Mermaid 及其一些更基本用途的更詳細介紹，請參閱初學者指南、用法和教程。
我們的 PR 視覺回歸測試由 Argos 及其慷慨的開源計劃提供支援。它使得審查具有視覺變化的 PR 的過程變得輕而易舉。
在我們的發布過程中，我們嚴重依賴使用 applitools 的視覺回歸測試。 Applitools 是一項很棒的服務，易於使用並與我們的測試整合。
以下是可以使用 Mermaid 製作的圖表、圖表和圖形的一些範例。點擊此處跳到文字語法。
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]流程圖LR
A[難] -->|文本| B(圓形)
B --> C{決定}
C -->|一| D[結果1]
C -->|兩個| E[結果2] 載入中sequenceDiagram 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!
序列圖
愛麗絲->>約翰：你好，約翰，你好嗎？
循環健康檢查
約翰->>約翰：對抗疑病症
結尾
注意約翰右邊：理性思考！
約翰-->>愛麗絲：太棒了！
約翰->>鮑伯：那你呢？
鮑伯-->>約翰： 太好了！ 載入中gantt 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
甘特圖
部分 部分
已完成：完成，des1，2014-01-06，2014-01-08
活躍：活躍，des2，2014-01-07，3d
並行 1：des3，des1 之後，1d
並行 2：des4，des1 之後，1d
並行 3：des5，des3 之後，1d
並行 4：des6，des4 之後，1d 載入中classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}類別圖
Class01 <|-- AveryLongClass : 酷
<<介面>> Class01
Class09 --> C2 : 我在哪裡？
09級 --* C3
09 級 --|> 07 級
類07：等於（）
Class07 : 物件[]元素數據
類01：尺寸（）
Class01：國際黑猩猩
Class01 : 國際大猩猩
類別10 {
<<服務>>
整數ID
尺寸（）
} 載入中stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
狀態圖-v2
[*] --> 仍然
仍然 --> [*]
仍然 --> 移動
移動-->靜止
移動-->崩潰
崩潰 --> [*] 載入中pie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
派
「狗」：386
《貓》：85.9
「老鼠」：15 載入中gantt title Git Issues - days since last update dateFormat X axisFormat %s section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5
甘特圖
title Git 問題 - 自上次更新以來的天數
日期格式 X
軸格式 %s
第19062節
71 : 0, 71
第 19401 節
36 : 0, 36
第 193 期
34 : 0, 34
第7441節
9 : 0, 9
第 1300 期
5 : 0, 5 載入中journey title My working day 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
旅行
標題 我的工作日
部分 去上班
泡茶：5：我
上樓：3：我
做工作：1：我，貓
部分 回家
下樓：5：我
坐下：3：我載入中C4Context
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") C4上下文
title 網路銀行系統系統上下文圖
Person(customerA, "銀行客戶 A", "銀行客戶，擁有個人銀行帳戶。")
Person(customerB, "銀行客戶 B")
Person_Ext(customerC, "銀行客戶 C")
系統（SystemAA，“網上銀行系統”，“允許客戶查看有關其銀行帳戶的資訊並進行付款。”）
Person(customerD, "銀行客戶 D", "銀行客戶，<br/> 擁有個人銀行帳戶。")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "大型銀行系統", "儲存所有有關客戶、帳戶、交易等的核心銀行資訊")
System_Boundary(b2, "BankBoundary2") {
系統（系統A，「銀行系統A」）
System(SystemB, "銀行系統B", "銀行A系統，有個人銀行帳戶。")
}
System_Ext(SystemC, "電子郵件系統", "內部 Microsoft Exchange 電子郵件系統。")
SystemDb(SystemD, "銀行系統 D 資料庫", "銀行的系統，具有個人銀行帳戶。")
邊界（b3，“BankBoundary3”，“邊界”）{
SystemQueue(SystemF, "銀行系統 F 佇列", "銀行的系統，有個人銀行帳戶。")
SystemQueue_Ext(SystemG, "銀行系統G佇列", "銀行的系統，有個人銀行帳戶。")
}
}
BiRel（客戶A，SystemAA，「使用」）
BiRel（系統AA，系統E，「使用」）
Rel(SystemAA, SystemC, "發送電子郵件", "SMTP")
Rel(SystemC, customerA, "發送電子郵件至") 載入中對於那些有權這樣做的人：
更新package.json中的版本號碼。
npm 發布
上面的命令會在dist資料夾中產生檔案並將其發佈到 https://www.npmjs.com。
命令列介面
即時編輯器
HTTP伺服器
Mermaid 是一個不斷發展的社區，並且始終接受新的貢獻者。有很多不同的方法可以提供幫助，我們一直在尋找額外的幫助！如果您想知道從哪裡開始提供協助，請查看此問題。
有關如何貢獻的詳細資訊可以在貢獻指南中找到
對於公共網站，從互聯網上的用戶檢索文字並儲存該內容以便稍後在瀏覽器中呈現可能會很不穩定。原因是用戶內容可能包含嵌入的惡意腳本，這些腳本將在呈現資料時運行。對於 Mermaid 來說這是一個風險，特別是因為 mermaid 圖包含 html 中使用的許多字符，這使得標準衛生無法使用，因為它也破壞了圖表。我們仍然努力清理傳入的程式碼並不斷完善流程，但很難保證不存在任何漏洞。
作為具有外部用戶的網站的額外安全級別，我們很高興引入一個新的安全級別，其中圖表在沙盒 iframe 中呈現，防止程式碼中的 javascript 被執行。這是提高安全性的一大進步。
不幸的是，你不能魚與熊掌兼得，在這種情況下，這意味著某些互動功能會與可能的惡意程式碼一起被阻止。
若要報告漏洞，請發送電子郵件至 [email protected]，並附上問題描述、建立問題所採取的步驟、受影響的版本以及問題的緩解措施（如果已知）。
Knut Sveidqvist 的簡短說明：
非常感謝 d3 和 dagre-d3 專案提供的圖形佈局和繪圖庫！
也要感謝 js-sequence-diagram 專案對序列圖語法的使用。感謝 Jessica Peter 為甘特圖渲染提供的靈感和起點。
感謝 Tyler Long 自 2017 年 4 月以來一直是我們的合作者。
感謝不斷增長的貢獻者名單，使該項目走到了這一步！
Mermaid 由 Knut Sveidqvist 創建，旨在簡化文件編寫。
