Mermaid タイムラインのチートシート

片側に時期、そのそばに出来事。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

時期と出来事

1 行は時期、コロン、その間に起きたことです。タイトルは 1 行で書きます。

timeline
    title History of the platform
    2002 : LinkedIn
    2004 : Facebook
    2005 : YouTube

図を拡大

1 つの時期に 2 つの出来事

コロンをもう 1 つ足すと、同じ時期に 2 つ目の出来事が加わります。

timeline
    2004 : Facebook : Google
    2005 : YouTube

図を拡大

セクションにまとめる

セクションは下の行をまとめます。その中では、最初の語が時期で、残りが起きたことです。

timeline
    title Release plan
    section Build
        Compile : Builds the app
        Test : Runs the suite
    section Ship
        Launch : Publishes the release

Release plan というタイトルのタイムライン。Compile と Test を持つ Build セクションと、Launch を持つ Ship セクションに分かれています。

Mermaid タイムラインのチートシート

時期と出来事

1 つの時期に 2 つの出来事

セクションにまとめる

Mernyx で描いてみる