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

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

## 時期と出来事

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

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

![History of the platform というタイトルのタイムライン。2002 LinkedIn、2004 Facebook、2005 YouTube が横に並びます。](/diagrams/timeline/events.svg)

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

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

```mermaid
timeline
    2004 : Facebook : Google
    2005 : YouTube
```

![2 行のタイムライン。2004 が Facebook と Google を、2005 が YouTube を持ちます。](/diagrams/timeline/multiple.svg)

## セクションにまとめる

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

```mermaid
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 セクションに分かれています。](/diagrams/timeline/sections.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。