Mermaid タイムライン図ビューア

ブラウザでMermaidタイムライン図をレンダリング。歴史的な出来事、製品ロードマップ、マイルストーンを可視化。SVGまたはPNGでエクスポート。

Mermaid コード

プレビュー

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

タイムライン図は、出来事を時系列順に可視化するため、製品ロードマップ、歴史的な物語、技術進化のストーリー、プロジェクトの振り返りに最適です。Mermaidの`timeline`図タイプは、v9.4で導入され、複雑なガントチャートなしで、いつ何が起こったかを記録するための、クリーンで読みやすい形式を提供します。 AIアシスタントは、歴史的発展の要約（「JavaScriptフレームワークの歴史を表示」）、製品進化の提示（「2020年から現在までの製品マイルストーンをマッピング」）、リリースロードマップの概要（「2025年第1四半期から第4四半期までの製品計画のタイムラインを作成」）を求められた際に、Mermaidタイムラインを使用します。生成されたコードをZolkitに貼り付けると、タイムラインがすぐにレンダリングされるため、プレゼンテーションやドキュメントに含める前に、イベントが正確で、適切にラベル付けされ、適切な間隔で配置されているかを確認できます。 Zolkitのタイムラインビューアは、期間ごとの複数イベント（同じ時間ラベルの下に積み重ねられたボックスとして表示）、フェーズを整理するためのセクショングループ化、およびMermaidタイムラインのスタイリングの全範囲をサポートしています。エクスポートされたSVGまたはPNGは、ピッチデッキ、会社沿革ページ、エンジニアリング全社会議のスライド、年次レビュー文書に適しています。

無料オンライン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
左側のエディタにMermaidコードを貼り付けます — AIアシスタントからコピーするか、手動で作成できます。
2
ダイアグラムは右側のプレビューパネルに即座にレンダリングされます。構文エラーがある場合は、問題点が説明されます。
3
'SVGをエクスポート' または 'PNGをエクスポート' をクリックして、ドキュメント、スライド、共有に適したファイル形式でダイアグラムをダウンロードします。

よくある質問

Mermaidタイムラインで、同じ期間に複数のイベントを追加するにはどうすればよいですか？

時間ラベルの直下のインデントされた行に、追加のイベントを配置します。各イベントは `:` で始まります。例：「2023 : ChatGPTがGPT-4をリリース \n : AnthropicがClaude 2をローンチ \n : GoogleがGeminiをリリース」。各 `: イベント` 行は、`2023` の時間マーカーの下に積み重ねられた個別のイベントボックスとしてレンダリングされます。これは、複数の重要なマイルストーンがある年に役立ちます。

タイムラインイベントをセクションにグループ化するにはどうすればよいですか？

期間のグループの前に `section セクション名` を使用します。セクションは、タイムラインを視覚的にラベル付きフェーズに分割します。例えば、年次エントリの前に `section 開発フェーズ` を配置し、次に次のグループの `section ローンチフェーズ` を配置します。セクションは、読者が明確なフェーズを持つ長いタイムラインをナビゲートするのに役立つ、色付きの背景帯としてレンダリングされます。

Mermaidタイムライン図とガントチャートの違いは何ですか？

Mermaidタイムラインは、イベントが発生した時点を示すのに最適化されており、正確な期間や依存関係の情報なしにテキストラベルと日付を受け入れます。ガントチャートは計画に適しており、正確な開始日、期間、依存関係を持つタスクを示します。振り返り、歴史、ロードマップの概要にはタイムラインを使用し、スプリント計画、リソース割り当て、スケジューリングにはガントチャートを使用してください。

Mermaidタイムライン図タイプはGitHubとGitLabで利用可能ですか？

GitHubは2022年にネイティブなMermaidレンダリングを追加し、GitLabは2019年からサポートしています。ただし、`timeline`図タイプにはMermaid v9.4以降が必要です。GitHubまたはGitLabでタイムラインの解析エラーが表示される場合、プラットフォームはMermaidの古いバンドルバージョンを使用している可能性があります。Zolkitは常に最新のMermaidバージョンを使用しているため、プラットフォームの互換性に関係なく、タイムライン図はここで完全にサポートされています。