Mermaid · 登録不要 · アップロードなし

UML図生成ツール

オブジェクトモデルをテキストとして文書化。Mermaidクラス図を書き込み — フィールド、メソッド、継承、インターフェース、コンポジション — ライブレンダリングで見てください。すべてがデバイス上に保たれます。

load example
Preview

ピクセルではなく、設計をモデル化

クラス図はコードの形をキャプチャします。どのクラスが存在するか、何を所有するか、どのように関連するか。Mermaidの記法はOOPコンセプトに直接マップされます。継承は「<|--」、インターフェースの実装は「<|..」、コンポジションは「*--」、アグリゲーションは「o--」なので、図は製品を生成した設計討論のように読めます。

テキストとして保つことはリファクタリングを生き残ります。クラスの名前を変更するとき、キャンバスを再描画する代わりに1行を編集します。

オンボーディングとRFCに最適

設計RFCにクラス図を落とし込んで提案した構造を表示するか、リポジトリのドキュメントに新しい貢献者が方向を見つけるのを支援します。可視性マーカー(+/-)と«interface» のようなステレオタイプは、説明文の壁なしで意図を伝えます。

よくある質問

テキストからUMLクラス図を作成するにはどうしますか?

「classDiagram」で始まり、各クラスをブレース内のフィールドとメソッドで定義し、「Animal <|-- Dog」のような関係を追加します。ライブレンダリングされ、SVGまたはPNGにエクスポートできます。

継承対インターフェースをどのように表示しますか?

BがクラスAを拡張するときは「A <|-- B」を使用し、BがインターフェースAを実装するときは「A <|.. B」を使用します。インターフェースを「<<interface>>」ステレオタイプでクラス内にマークします。

公開と非公開メンバーをどのようにマークしますか?

メンバーの前に「+」(公開)または「-」(非公開)を付けます。例えば「+charge(amount) bool」または「-PaymentMethod method」。

Mermaidは他のUML図をサポートしていますか?

はい — クラス図の他に、シーケンス図と状態図をレンダリングします。これらはほぼ毎日のUMLニーズをカバーします。このページはクラス図に焦点を当てています。

何かがアップロードされていますか?

いいえ。図がブラウザで生成されるため、クラスとメソッド名はデバイス上に保たれます。