Mermaidタイムライン図 — プロジェクト履歴とロードマップ

Mermaidのタイムライン図

タイムライン図は時系列に沿ってイベントを表示します。プロジェクト履歴、製品の進化、技術ロードマップ、歴史的なドキュメントに最適です。Mermaidのタイムライン構文は、期間ごとにイベントをグループ化します。

基本構文

timeline
    title Project History
    2022 : Project kickoff
         : Team formation
    2023 : v1.0 release
         : First 1000 users
    2024 : v2.0 release
         : Series A funding

各期間（2022など）の後に:でマークされたイベントが続きます。同じ期間に:行を追加することで複数のイベントを含められます。

セクションの使用

セクションで第2レベルのグループ化を追加します：

timeline
    title Technology Evolution
    section Frontend
        2020 : jQuery dominant
        2021 : React takes over
        2022 : Next.js rises
        2023 : Server components
    section Backend
        2020 : Express.js standard
        2021 : Fastify gains traction
        2022 : Edge functions emerge
        2023 : Bun runtime released

詳細な期間

期間には任意のテキストを使用でき、年でなくても構いません：

timeline
    title Sprint 23 Progress
    Week 1 : Design review complete
           : API spec finalized
    Week 2 : Backend endpoints built
           : Database migration run
    Week 3 : Frontend integration
           : Unit tests written
    Week 4 : QA testing
           : Bug fixes
           : Release to staging

プロダクトロードマップの例

timeline
    title DevToolbox Roadmap
    section Phase 1 - Foundation
        Q1 2024 : Core tools (JSON, Base64, JWT)
                : Design system
                : SEO framework
    section Phase 2 - Expansion
        Q2 2024 : 20 additional tools
                : Programmatic SEO pages
                : Internationalization
    section Phase 3 - Growth
        Q3 2024 : Community contributions
                : API access
                : Premium features
    section Phase 4 - Scale
        Q4 2024 : 100+ tools milestone
                : Mobile app
                : Enterprise tier

ヒント

1. イベントは簡潔に — 完全な文章ではなく、短いフレーズを使用します。
2. 論理的にグループ化 — 異なるチーム、製品、テーマにセクションを使用します。
3. 期間あたりのイベント数を制限 — 可読性のために1期間あたり2〜4イベントが理想的です。
4. ガントチャートと併用 — タイムラインは高レベルの概要に、ガントチャートは詳細なスケジュールに使用します。

タイムライン図はMermaid v10で導入された比較的新しいダイアグラムタイプです。左から右への水平フローとしてレンダリングされます。