コピペ可能なサンプル
期間ラベルと継続イベント
期間の下の行を空白とコロンでインデントします。
timeline
title Incident Review
Detection : Elevated error rate
: On-call engineer paged
Recovery : Faulty release rolled back
: Service health confirmed ビジュアルタイムラインビルダー 100% クライアント処理 • プライベート
Mermaidタイムラインをビジュアル操作で作成
マイルストーンや製品ロードマップ、歴史年表を直感的なブロック操作と即時SVGプレビューで構築できます。
タイムライン作成ツール
準備完了。
タイムラインの期間
|ドラッグまたはAlt+上/下で並べ替え
0 期間
有効なMermaidタイムライン構文を貼り付けてください。ビジュアル編集では空白が整えられコメントが削除されるため、コメントを含むコードは先にコピーしてください。
有効なコードは直接編集し、ビジュアルビルダーに反映できます。
ライブプレビュー
プロジェクトのタイムライン
100%
ライブSVG
プレビューの準備ができました。
このワークスペースが表示されるか編集を始めると図を読み込みます。
構文パターン
Mermaidタイムライン構文ガイド
タイムラインは、図のヘッダーから期間やイベントへ時系列を整理します。構文を直接書くとき、行エラーを確認するとき、Markdown文書用の図を準備するときに参照してください。
コピペ可能なサンプル
セクションでマイルストーンを整理
sectionキーワードを使って長いタイムラインを視覚的に分割します。
timeline
title Museum Exhibition
section Preparation
Research : Select artifacts : Secure loans
Conservation : Restore pieces : Photograph catalog
section Public Program
Opening week : Press preview : Member night
Closing week : Final tours : Return loansコピペ可能なサンプル
方向：左から右、または上から下
横方向にはLR、縦方向にはTDを追加します。
timeline LR
title Migration Plan
Audit : Inventory workloads
Pilot : Move an internal service
Cutover : Move production trafficコピペ可能なサンプル
特殊文字と句読点のエスケープ
コロンが時刻ラベルの一部である場合は、#58;のようなHTMLエンティティを使います。
timeline
title Operations Log
Sprint #35;4 #58; 10#58;00 UTC : Deploy at 10:00 : Verify issue #123Mermaidタイムラインの一般的なエラーを修正
図のキーワードがないとMermaidはエラーを表示します。コメント以外の最初の行をtimeline、timeline LR、またはtimeline TDで始めてください。
期間ラベル内の未エスケープのコロンは解析エラーの原因になります。#58;としてエスケープしてください。
エラー例
エラー：timelineキーワードがない
この例を開いて継続するコードエラーを確認し、キーワードを追加してください。
title Release Plan
2026 : Public launchエラー例
エラー：期間内のコロンが未エスケープ
期間ラベルの10:00を10#58;00に変更してください。
timeline
10:00 UTC : Public launchコピペ可能なサンプル
Mermaidタイムラインをビジュアル操作で作成
マイルストーンや製品ロードマップ、歴史年表を直感的なブロック操作と即時SVGプレビューで構築できます。
コピペ可能なサンプル
シンプルな2ステップ年表
タイトルやセクションが不要な短い時系列の記録に最適です。
timeline
午前 : チームブリーフィング
午後 : 意思決定を記録コピペ可能なサンプル
複数イベントを含むカンファレンス予定
同一月内の複数マイルストーンをコロンで区切って整理します。
timeline
title コミュニティカンファレンス
4月 : 登壇者募集 : 会場確定
6月 : タイムテーブル公開 : 参加登録開始
9月 : カンファレンス当日 : アーカイブ公開コピペ可能なサンプル
コメント付き障害対応タイムライン
Mermaidコード内のコメントを維持しながら視覚的に編集可能です。
timeline
title 障害対応振り返り
検知 : エラー率上昇を検知
: オンコール担当へ通知
復旧 : 問題のリリースをロールバック
: サービス正常化を確認コピペ可能なサンプル
セクション分けされた展示会計画
セクションを用いて準備期間と一般公開を明確に区分します。
timeline
title ギャラリー展覧会
section 企画
1月 : 出展作品選定 : 契約締結
section 設営
2月 : 展示台作成 : 照明調整
section 公開
3月 : VIP内覧会 : 一般公開開始コピペ可能なサンプル
縦型データセンター移行計画
長期間の計画を上から下へ自然にスクロールして読む場合にTDを指定します。
timeline TD
title データセンター移行計画
section 準備
調査 : ワークロード棚卸し
検証 : 内部サービス移行 : 切り戻し検証
section 切り替え
第1週末 : DB移行 : レプリカ同期確認
第2週末 : 本番トラフィック切り替え : 旧ホスト撤去コピペ可能なサンプル
月次リリース履歴
複雑なスケジュール表にせず、正確なリリース月をすっきりと記録します。
timeline
title Atlas CLI リリースノート
2025年10月 : バージョン 0.8.0 : オフラインキャッシュ導入
2026年2月 : バージョン 0.9.0 : プラグインフック追加
2026年6月 : バージョン 1.0.0 : 安定版コマンドAPI公開コピペ可能なサンプル
宇宙望遠鏡の運用開始ステップ
文字数の多い詳細な説明文がどのように折り返されるかを確認できます。
timeline
title 宇宙望遠鏡 運用開始工程
準備状況審査 : 熱真空試験の結果を検証しフライトソフトウェアの課題を完了
打上げウィンドウ : 機体統合を完了しミッション運用への引継ぎを公開
ファーストライト : 主観測機器を校正し初期ディープフィールド画像を研究チームへ公開よくある質問 (FAQ)
Mermaidタイムラインダイアグラムとは何ですか？
時系列のマイルストーンや製品リリースフェーズ、歴史的出来事を期間ごとにグループ化して視覚表示する図です。
垂直方向（縦型）のタイムラインは作れますか？
はい。向きの切り替えスイッチで垂直（TD）と水平（LR）を簡単に切り替えられます。
同一期間に複数のイベントを追加するには？
コロンで区切るか、ビジュアルビルダーでイベントカードを追加してください。