Mermaid.js タイムライン構文ガイド

タイムライン図とは何ですか？

A タイムライン図は、線形の時間軸に沿ってイベントやプロジェクトのマイルストーンをマッピングするために使用される、時系列の可視化ツールです。Ganttチャートが複雑なタスクの依存関係や期間を扱うのに対し、タイムライン図は「いつ」に注目し、プロジェクトの進化やシステムのリリースサイクルについて、明確でスキャンしやすい物語を提供します。

With Mermaid.js、シンプルで階層的なテキスト形式を使ってタイムラインを定義できます。エンジンは、スペースの調整、日付や期間ラベルのフォーマット、中央の時間軸に沿ったイベントマーカーの整列を自動で処理します。

コア構文ガイド

有効で実行可能なタイムラインを設計するには、軸の期間を定義し、イベントを特定のセクションにマッピングする必要があります。

1. タイムラインの初期化

キャンバスを初期化するには、timelineキーワードを使用します。構造は、セクション（グループとして機能する）を定義し、イベント（または日付）をそれらのセクションにマッピングすることで構築されます。

timeline
    title システム開発の歴史
    section 2025
        Q1 : Alphaリリース
    section 2026
        Q2 : Betaリリース

2. イベントに詳細を追加する

コロンで区切られたリストを使用することで、1つのタイムマーカーに複数の詳細を追加できます。これは、特定の日付や期間に関連する重要な成果やバージョン番号を要約するのに役立ちます。

timeline
    section 2026年Q3
        Release : v1.0.0
                : パフォーマンス向上
                : セキュリティパッチ

実際のMermaid.jsタイミング図の例：製品リリースロードマップ

このブループリントは、複数年にわたる製品ロードマップをモデル化しており、リリースを財政年度ごとにグループ化し、各サイクルの主要な納品物を強調しています。

タイムライン
    タイトル プロダクトロードマップ 2026-2027
    セクション 2026
        Q1 : 発見フェーズ
           : ステークホルダーインタビュー
        Q2 : MVP開発
           : コアAPI設計
        Q3 : ベータリリース
           : ユーザーフィードバックループ
    セクション 2027
        Q1 : 全面リリース
           : グローバルスケーリング

タイムライン作成のベストプラクティス

• カテゴリを簡潔に保つ： 使用する セクション上位レベルのグループ（年や主要フェーズなど）を示すために使用し、実際のイベントは下位に明確で実行可能な形で記述する。
• 日付フォーマットを統一する：タイムラインのイベントがコード内で時系列順になっていることを確認してください。Mermaidエンジンはスクリプトの順序に従ってレイアウトの配置を決定するためです。
• 詳細を活用して文脈を明確にする：中央の軸に多すぎるテキストを詰め込まないでください。日付ラベル自体を長くしないで、「何が起きたか」を多段落形式で分解して記述しましょう。