---
# System prepended metadata

title: mermaidテスト
tags: [シーケンス図, クラス図, mermaid, 状態遷移図, フローチャート, example]

---

###### tags: `example` `mermaid` `フローチャート` `シーケンス図` `状態遷移図` `クラス図`
# mermaidテスト
> [time=Fri, Jan 24, 2020 4:15 PM] [name=KentoSawaya]

## はじめに
gitで作図ができるmermaid.jsについて調べてみました。Markdownの中にmermaidを埋め込むことで、フローチャートや状態遷移図などが作図できるようです。今後、仕様書をテキストベースで作成し、gitで差分管理する足がかりになればいいなと思いまとめました。

## 例
### フローチャート
```mermaid
graph TD
  ST((Start))         --> Operation[Some operation]
  Operation         --> Condition{Some condition}
  Condition  -- yes --> Operation2[Some operation2]
  Operation2        --> END((End))
  Condition  -- no  --> END
```
```SHELL=
graph TD
  ST(Start)         --> Operation[Some operation]
  Operation         --> Condition{Some condition}
  Condition  -- yes --> Operation2[Some operation2]
  Operation2        --> END((End))
  Condition  -- no  --> END
```
---
### 状態遷移図
```mermaid
graph LR
  ST -- 0   --> ST((Start))
  ST -- 1   --> a((A))
  a  -- 0   --> a
  a  -- 1   --> b((B))
  b  -- 0   --> b
  b  -- 1   --> ST
```
```SHELL=
graph LR
  ST -- 0   --> ST((Start))
  ST -- 1   --> a((A))
  a  -- 0   --> a
  a  -- 1   --> b((B))
  b  -- 0   --> b
  b  -- 1   --> ST
```
---
### シーケンス図
```mermaid
sequenceDiagram
  # エイリアス
  participant cl as クライアント
  participant sv as サーバー
  participant db as データベース

  # データ取得コード
  cl ->>+ sv : データ取得要求
  sv ->>+ db : select発行
  db -->>- sv : select結果
  sv -->>- cl : データ取得要求結果

  alt 正常終了
    Note over cl : 取得データ表示
  else エラー
    Note over cl : エラー表示
  end
```
```SHELL=
sequenceDiagram
  # エイリアス
  participant cl as クライアント
  participant sv as サーバー
  participant db as データベース

  # データ取得コード
  cl ->>+ sv : データ取得要求
  sv ->>+ db : select発行
  db -->>- sv : select結果
  sv -->>- cl : データ取得要求結果

  alt 正常終了
    Note over cl : 取得データ表示
  else エラー
    Note over cl : エラー表示
  end
```
---
### ガントチャート

```mermaid
gantt
  title ガントチャートテスト
  dateFormat YYYY-MM-DD
  section 製品A開発セクション
  設計        : done,   task1, 2017-12-11,  2017-12-15
  実装        : active, task2, 2017-12-18,  5d
  単体テスト  :         task3, after task2, 5d
  結合テスト  :         task4, after task3, 5d
```
```SHELL=
gantt
  title ガントチャートテスト
  dateFormat YYYY-MM-DD
  section 製品A開発セクション
  設計        : done,   task1, 2017-12-11,  2017-12-15
  実装        : active, task2, 2017-12-18,  5d
  単体テスト  :         task3, after task2, 5d
  結合テスト  :         task4, after task3, 5d
```
---
### クラス図
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
```SHELL=
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
---
## 注意点
* git branchもmermaidで記述できるようですがHackMDではあまり上手く動きません。**git branchをmermaidで記述するとHackMDがハマってしまってその後一切使用できなくなることもあります。**(2020.01.24現在)
## 参考
[機能紹介（HackMD公式)](https://hackmd.io/s/features-jp)
[mermaidを使ってMarkdownでシーケンス図を作成](https://qiita.com/poro1985/items/b23bad93bf721a195f15)
[mermaid公式](https://mermaid-js.github.io/mermaid/#/)
