Zolkit

Mermaid Git Graph ビューア

ブラウザでMermaidのgitGraphダイアグラムをレンダリング。Gitブランチ戦略とコミット履歴を可視化。SVGまたはPNGにエクスポート。

プレビュー

ダイアグラムをプレビューするにはMermaidコードを入力してください

Gitグラフダイアグラムは、ソフトウェア開発におけるブランチ戦略、マージパターン、コミット履歴を可視化します。これらはエンジニアリングチームのドキュメントにおいて非常に価値があり、Gitflow戦略の説明、フィーチャーブランチワークフローの図示、またはホットフィックスが本番環境から開発環境にどのように伝播するかを示すのに役立ちます。Mermaidの`gitGraph`構文は、これらのビジュアルをテキストから直接生成するため、README、オンボーディングガイド、ランブックに簡単に埋め込むことができます。 AIアシスタントは、開発者が「Gitflowの仕組みを教えてください」、「トランクベース開発ワークフローのブランチ戦略を図示してください」、または「リリースプロセスでホットフィックスがどのようにマージされるかを図示してください」と尋ねた際に、Mermaidのgitグラフを生成することがよくあります。Zolkitにその出力を貼り付けると、ブランチの可視化が即座にレンダリングされ、エンジニアリングリードはチームに配布する前にワークフローが正確に表現されていることを確認できます。 Zolkitのgitグラフビューアは、コミットIDとタグ、ブランチの作成とチェックアウト、マージコミット、チェリーピック、およびコミットをHIGHLIGHT、REVERSE、またはNORMALとして強調表示するための`type`プロパティなど、すべての`gitGraph`構文をサポートしています。複数のブランチは、即座の視覚的な区別を容易にするために、異なる色でレンダリングされます。

関連ダイアグラム

← Mermaid ダイアグラムビューアMermaid フローチャートビューアMermaid タイムライン図ビューアMermaid シーケンス図ビューア

無料オンラインMermaidダイアグラムビューア＆エクスポートツール

ZolkitのMermaidダイアグラムビューアを使えば、Mermaidコードを貼り付けるだけで、レンダリングされたダイアグラムを即座に確認できます。インストール不要、サインアップ不要、サーバーへのアップロードも不要です。すべてブラウザ内で完結するため、Claude、ChatGPT、GeminiなどのAIが生成したダイアグラムを確認する最も速い方法です。フローチャート、シーケンス図、クラス図、ER図、ガントチャート、ステート図、マインドマップ、Gitグラフ、円グラフ、タイムラインなど、主要なMermaidダイアグラムタイプをすべてサポートしています。

即時ライブプレビュー

入力に合わせてダイアグラムが自動的にレンダリングされます。300ミリ秒のデバウンス処理により、遅延を感じさせません。

100% プライベート

すべてのレンダリングはmermaid.jsを使用してブラウザ内で行われます。コードがサーバーに送信されることはありません。

SVG & PNG エクスポート

ドキュメントやスライドに最適な、鮮明なベクターSVGまたは高解像度2×PNG形式でダイアグラムをダウンロードできます。

すべてのMermaidダイアグラムタイプに対応

フローチャート、シーケンス図、クラス図、ER図、ガントチャート、マインドマップ、Gitグラフなど、多数のダイアグラムタイプをサポートしています。

AIダイアグラム対応

AI時代のために構築されました — Claude、ChatGPT、Gemini、またはその他のLLMによって生成されたダイアグラムを直接プレビューできます。

常に無料

アカウント不要、利用制限なし、透かしなし。ZolkitのMermaidビューアは完全に無料で、永続的にご利用いただけます。

Mermaidダイアグラムをプレビューする方法

  1. 1

    左側のエディタにMermaidコードを貼り付けます — AIアシスタントからコピーするか、手動で作成できます。

  2. 2

    ダイアグラムは右側のプレビューパネルに即座にレンダリングされます。構文エラーがある場合は、問題点が説明されます。

  3. 3

    'SVGをエクスポート' または 'PNGをエクスポート' をクリックして、ドキュメント、スライド、共有に適したファイル形式でダイアグラムをダウンロードします。

よくある質問

MermaidのgitグラフにコミットIDとタグを追加するにはどうすればよいですか？

コミットにラベルを追加するには`commit id: "commit-message"`を使用し、バージョンタグを付けるには`commit id: "v1.0" tag: "v1.0.0"`を使用します。タグはコミットノード上に小さなバッジとしてレンダリングされ、リリースポイントがすぐにわかるようになります。コミットIDは、チェリーピック操作の参照としても使用できます：`cherry-pick id: "commit-id"`。

Mermaidのgitグラフでブランチをマージするにはどうすればよいですか？

ブランチを作成してコミットを追加した後、ターゲットブランチをチェックアウトし、`merge branchName`を使用します。例：`checkout main`、次に`merge develop`。マージコミットに`id`と`tag`を追加できます：`merge feature/auth id: "Merge auth" tag: "v2.0"`。Mermaidは、2つのブランチトラック間の接続線としてマージをレンダリングします。

gitグラフの向きを変更できますか？

はい。左から右へのレイアウトにするには、`gitGraph`の後に`LR`を追加します：`gitGraph LR:`。デフォルトは左から右です。垂直に読まれるドキュメント（READMEをモバイルでレンダリングした場合など）では、`TB`（上から下）を試すことができますが、git履歴の可視化ではLRが一般的な方向です。

Gitワークフローのドキュメントにおいて、gitGraphとシーケンス図の違いは何ですか？

gitGraphは、ブランチ、マージ、コミット履歴の表示に特化しており、GitKrakenやGitHubのネットワークグラフのようなツールで開発者が認識する、おなじみの並列ブランチレーンをレンダリングします。対照的に、シーケンス図は時間経過に伴うアクター間の相互作用を示しますが、ブランチ構造を伝達しません。Gitワークフローやリリースプロセスのドキュメントには、gitGraphが常に適切な選択です。