マークダウンのようなテキストからダイアグラムを生成します。
📖 ドキュメント | 🚀 はじめに | 🌐 CDN | 🙌 参加する
将来のリリース版のライブエディタープレビューを試す：ライブエディター
🏆 Mermaidは「最もエキサイティングなテクノロジーの使用」カテゴリでJS Open Source Awards (2019)にノミネートされ、受賞しました!!!
プルリクエストをコミットする人々、質問に答える人々など、関係者全員に感謝します！🙏
Mermaidは、マークダウンにインスパイアされたテキスト定義とレンダラーを使用して、複雑なダイアグラムを作成および変更するJavaScriptベースのダイアグラムおよびチャート作成ツールです。Mermaidの主な目的は、ドキュメントが開発に追いつくようにすることです。
ドキュメントの劣化は、Mermaidが解決を支援する二律背反です。
ダイアグラム作成とドキュメント作成には、貴重な開発者の時間がかかり、すぐに古くなってしまいます。
しかし、ダイアグラムやドキュメントがないと、生産性が損なわれ、組織の学習が妨げられます。
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]
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 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!
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
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
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()
}
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()
}
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
Gitグラフ [実験的 - ライブエディター]
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
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
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
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
C4 ダイアグラム [ドキュメント]
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")
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")
権限を持っている方へ：
package.jsonのバージョン番号を更新してください。
npm publish上記のコマンドは、distフォルダーにファイルを生成し、https://www.npmjs.comに公開します。
Mermaidは成長中のコミュニティであり、新しい貢献者を常に歓迎しています。手伝う方法はたくさんあり、常に助けを求めています！どこから始めればよいか知りたい方は、この問題をご覧ください。
貢献方法の詳細は、貢献ガイドに記載されています。
公開サイトでは、インターネット上のユーザーからテキストを取得し、そのコンテンツを後でブラウザで表示することは危険です。理由は、ユーザーのコンテンツに埋め込まれた悪意のあるスクリプトが含まれており、データが表示されるときに実行される可能性があるからです。Mermaidにとってこれはリスクであり、特にmermaidダイアグラムにはHTMLで使用される多くの文字が含まれているため、標準のサニタイズが使えず、ダイアグラムが壊れてしまいます。それでも、私たちは受信したコードをサニタイズし、プロセスを改善する努力をしていますが、抜け穴がないことを保証するのは難しいです。
外部ユーザーを持つサイトのために、コード内のJavaScriptが実行されないように、ダイアグラムがサンドボックス化されたiframe内でレンダリングされる新しいセキュリティレベルを導入できることを嬉しく思います。これは、より良いセキュリティのための大きな一歩です。
残念ながら、同時にケーキを食べることはできないため、ここでは一部のインタラクティブ機能がブロックされることになりますが、それにより悪意のあるコードもブロックされます。
脆弱性を報告するには、[email protected]まで、問題の説明、問題を作成するために取った手順、影響を受けたバージョン、および知られている場合はその問題の緩和策を記載してメールしてください。
Knut Sveidqvistからの簡単なお知らせ：
Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries!
Thanks also to the js-sequence-diagram 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 who has been a collaborator since April 2017.
Thank you to the ever-growing list of contributors that brought the project this far!
Mermaid は、ドキュメント作成を容易にするために Knut Sveidqvist によって作成されました。