mermaid
11.4.0
マークダウンのようなテキストから図を生成します。
ライブエディター！
ドキュメント | はじめに | CDN | ?参加しませんか
简体中文
今後のリリースのライブ エディター プレビューを試してください。次
? Mermaid は、JS オープンソース アワード (2019) の「最もエキサイティングなテクノロジーの使用」部門でノミネートされ、受賞しました。
プルリクエストをコミットした人、質問に答えてくれた人など、関係者全員に感謝します。
について
例
リリース
関連プロジェクト
貢献者
セキュリティと安全の図
脆弱性の報告
感謝
Mermaid は、Markdown からインスピレーションを得たテキスト定義とレンダラーを使用して複雑な図を作成および変更する JavaScript ベースの図作成およびグラフ作成ツールです。 Mermaid の主な目的は、ドキュメントが開発に追いつくのを支援することです。
Doc-Rot は、マーメイドが解決を手伝うキャッチ 22 です。
ダイアグラムとドキュメントは開発者の貴重な時間を浪費し、すぐに古くなってしまいます。しかし、図やドキュメントがないと生産性が損なわれ、組織の学習が損なわれます。
Mermaid は、ユーザーが簡単に変更可能な図を作成できるようにすることで、この問題に対処します。実稼働スクリプト (および他のコード部分) の一部にすることもできます。
Mermaid では、プログラマでなくても、Mermaid Live Editor を通じて詳細な図を簡単に作成できます。
ビデオチュートリアルについては、チュートリアルページをご覧ください。お気に入りのアプリケーションで 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 -->|1 つ| D[結果1]
C -->|2| 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 : オブジェクト[]要素データ
Class01 : サイズ()
Class01 : int チンパンジー
Class01 : intゴリラ
クラス クラス10 {
《サービス》
整数ID
サイズ（）
} 読み込み中stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-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
セクション Issue19062
71：0、71
セクション Issue19401
36：0、36
セクション第 193 号
34：0、34
セクション Issue7441
9：0、9
セクション 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
旅
タイトル 私の勤務日
セクション 仕事に行く
お茶を淹れる: 5: 私
2階に行く: 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コンテキスト
タイトル インターネットバンキングシステムのシステムコンテキスト図
人(顧客A, "銀行顧客A", "個人の銀行口座を持つ銀行の顧客。")
人(顧客B、「銀行顧客B」)
Person_Ext(顧客C, "銀行顧客C")
システム(SystemAA、「インターネット バンキング システム」、「顧客が自分の銀行口座に関する情報を表示し、支払いを行うことができるようにします。」)
人(customerD, "銀行顧客 D", "個人銀行口座を持つ銀行の顧客<br/>")
Enterprise_Boundary(b1, "銀行境界") {
SystemDb_Ext(SystemE, "メインフレーム バンキング システム"、"顧客、口座、取引などに関するすべてのコア バンキング情報を保存します。")
System_Boundary(b2, "BankBoundary2") {
システム(システムA、「銀行システムA」)
システム(システムB、「銀行システムB」、「個人の銀行口座を持つ銀行のシステム。」)
}
System_Ext(SystemC, "電子メール システム", "内部 Microsoft Exchange 電子メール システム。")
SystemDb(SystemD, "銀行システム D データベース", "個人の銀行口座を持つ銀行のシステム。")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "銀行システム F キュー", "個人の銀行口座を持つ銀行のシステム。")
SystemQueue_Ext(SystemG, "銀行システム G キュー", "個人の銀行口座を持つ銀行のシステム。")
}
}
BiRel(顧客A、システムAA、「用途」)
BiRel(SystemAA、SystemE、「用途」)
Rel(SystemAA, SystemC, "電子メールの送信", "SMTP")
Rel(SystemC, customerA, "電子メールの送信先") 読み込み中そうする許可を持っている人のために：
package.jsonのバージョン番号を更新します。
npm公開
上記のコマンドは、 distフォルダーにファイルを生成し、https://www.npmjs.com に公開します。
コマンドラインインターフェース
ライブエディター
HTTPサーバー
Mermaid は成長を続けるコミュニティであり、常に新しい貢献者を受け入れています。支援するにはさまざまな方法があり、私たちは常に追加の人手を探しています。どこから支援を始めればよいのか知りたい場合は、この問題を参照してください。
貢献方法の詳細については、貢献ガイドをご覧ください。
パブリック サイトの場合、インターネット上のユーザーからテキストを取得し、後の段階でブラウザーで表示するためにそのコンテンツを保存するのは危険な場合があります。その理由は、ユーザー コンテンツには、データが表示されたときに実行される悪意のあるスクリプトが埋め込まれている可能性があるためです。 Mermaid の場合、特に人魚図には HTML で使用される多くの文字が含まれており、図も壊れるため標準的なサニテーションが使用できなくなるため、これはリスクです。私たちは入力コードをサニタイズし、プロセスを改良し続ける努力を続けていますが、ループホールがないことを保証するのは困難です。
外部ユーザーがいるサイトの追加のセキュリティ レベルとして、コード内の JavaScript が実行されないように図がサンドボックス化された iframe でレンダリングされる新しいセキュリティ レベルを導入できることを嬉しく思います。これはセキュリティの向上に向けた大きな前進です。
残念ながら、ケーキを食べながら同時に食べることはできません。この場合、悪意のあるコードの可能性とともに対話型機能の一部がブロックされることになります。
脆弱性を報告するには、問題の説明、問題を作成するために実行した手順、影響を受けるバージョン、既知の場合は問題の軽減策を記載して、[email protected] に電子メールを送信してください。
Knut Sveidqvist からの簡単なメモ:
グラフィカル レイアウトと描画ライブラリを提供してくれた d3 プロジェクトと dagre-d3 プロジェクトに感謝します。
シーケンス図の文法を使用した js-sequence-diagram プロジェクトにも感謝します。ガント レンダリングのインスピレーションと出発点を与えてくれた Jessica Peter に感謝します。
2017 年 4 月から協力してくれた Tyler Long に感謝します。
プロジェクトをここまで導いてくれた、増え続ける貢献者のリストに感謝します。
Mermaid は、ドキュメントを簡単にするために Knut Sveidqvist によって作成されました。
