Mermaid(日本語)

マークダウンのようなテキストからダイアグラムを生成します。

ライブエディター！

📖 ドキュメント | 🚀 はじめに | 🌐 CDN | 🙌 参加する

将来のリリース版のライブエディタープレビューを試す：ライブエディター

:trophy: 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] ```

```mermaid 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!

mermaid 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

mermaid 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 <> 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 { <> int id size() }

```

```mermaid classDiagram Class01 <|-- AveryLongClass : Cool <> 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 { <> int id size() }

```

状態図 [ドキュメント - ライブエディター]

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

mermaid stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

円グラフダイアグラム [ドキュメント - ライブエディター]

pie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15

mermaid 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

```

```mermaid 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

mermaid 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,
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") ```

```mermaid 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,
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のバージョン番号を更新してください。

sh npm publish

上記のコマンドは、distフォルダーにファイルを生成し、https://www.npmjs.comに公開します。

関連プロジェクト

• コマンドラインインターフェース
• ライブエディター
• HTTPサーバー

貢献者

Mermaidは成長中のコミュニティであり、新しい貢献者を常に歓迎しています。手伝う方法はたくさんあり、常に助けを求めています！どこから始めればよいか知りたい方は、この問題をご覧ください。

貢献方法の詳細は、貢献ガイドに記載されています。

セキュリティと安全なダイアグラム

公開サイトでは、インターネット上のユーザーからテキストを取得し、そのコンテンツを後でブラウザで表示することは危険です。理由は、ユーザーのコンテンツに埋め込まれた悪意のあるスクリプトが含まれており、データが表示されるときに実行される可能性があるからです。Mermaidにとってこれはリスクであり、特にmermaidダイアグラムにはHTMLで使用される多くの文字が含まれているため、標準のサニタイズが使えず、ダイアグラムが壊れてしまいます。それでも、私たちは受信したコードをサニタイズし、プロセスを改善する努力をしていますが、抜け穴がないことを保証するのは難しいです。

外部ユーザーを持つサイトのために、コード内のJavaScriptが実行されないように、ダイアグラムがサンドボックス化されたiframe内でレンダリングされる新しいセキュリティレベルを導入できることを嬉しく思います。これは、より良いセキュリティのための大きな一歩です。

残念ながら、同時にケーキを食べることはできないため、ここでは一部のインタラクティブ機能がブロックされることになりますが、それにより悪意のあるコードもブロックされます。

脆弱性の報告

脆弱性を報告するには、security@mermaid.liveまで、問題の説明、問題を作成するために取った手順、影響を受けたバージョン、および知られている場合はその問題の緩和策を記載してメールしてください。

謝辞

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 によって作成されました。