mermaid.jsでリオレウスを倒す

GitLab 10.3で、GitLab Flavored Markdown内に**mermaid.js**の記法が使えるようになったそうです。

https://mermaidjs.github.io

フローチャート、シーケンス図、ガントチャートがissue, merge request, WikiなどのMarkdown内へ簡単に記述できるようになります。

- [Markdown \- GitLab Documentation](https://docs.gitlab.com/ee/user/markdown.html#mermaid)
- [GitLab 10\.3 released with Static Application Security Testing and Browser Performance Testing \| GitLab](https://about.gitlab.com/2017/12/22/gitlab-10-3-released/#flow-charts-sequence-diagrams-and-gantt-diagrams-in-gitlab-flavored-markdown-gfm-with-mermaid)

mermaidを実際に使ってみましょう。

## 環境

- Windows 10 Pro Insider Preview 10.0.17074
- Microsoft Visual Studio Code 1.20.0 x64
- PS4版 Monster Hunter World Ver.1.05

GitLab上でもそのまま記述できますが、mermaidプレビューの実行環境を準備して使ってみます。

### VSCodeでのmermaid実行環境準備

[VSCodeのMermaid Previewプラグイン](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)を導入します。
VSCodeのコマンドパレットを起動(Ctrl+Shift+P)して`>Install Extensions`から`mermaid preview`をインストールします。

再読み込みして`>Preview Mermaid Diagram`して、mermaid記法の所にカーソルを合わせるとmermaidの図がプレビューできます。

普通の`>Markdown: Open Preview to the Side`でもプレビューが効きます。(すこし重いかも)

![20180211_mermaid.PNG](https://qiita-image-store.s3.amazonaws.com/0/50391/8169b3a3-84f6-0953-8954-419a211807b8.png)

### mermaid-live-editor

mermaidはオンライン上で実行できるサンドボックスも用意されています。

https://mermaidjs.github.io/mermaid-live-editor/

ソースコードはGitHubで公開されているので、ローカルやオンプレ環境下で動かすこともできると思います。

## mermaidを書いてみる

リオレウスの狩猟をプロジェクトのモデルとします。

![20180211_rio.png](https://qiita-image-store.s3.amazonaws.com/0/50391/80151a70-794d-3c9d-94b0-968594c27c8a.png)

...こんなものは頭に入れられるわけがありません。誰を倒したあと何をすれば良いのか訳が分からなくなります。
ここで**mermaid**を使ってみます。

### Flowcharts

`graph LR`と宣言した後に、`A --> B`のように矢印で繋いでいくとチャートができます。

```mermaid
graph LR
  雷属性武器 --> リオレウス
  トビカガチ --> 雷属性武器
```

![mermaid-diagram-20180211214258_chart1 (1).png](https://qiita-image-store.s3.amazonaws.com/0/50391/3348177b-374a-9ea7-45f1-bbd873bbafb2.png)
同じノードは自動で繋げてくれます。便利ですね。

どんどん記述していきましょう。
`graph LR`で左から右へ、`TB`で上から下へのチャートが作成できます。

```mermaid
graph TB
  火耐性   --> リオレウス
  毒耐性   --> リオレウス
  気絶耐性 --> リオレウス

  クルルヤック -->|頭防具| 火耐性
  アンジャナフ -->|腰防具| 火耐性
  プケプケ     -->|腕防具| 毒耐性
  ボルボロス   -->|脚防具| 気絶耐性

  雷属性武器 --> リオレウス
  雷属性武器 --> プケプケ
  トビカガチ --> 雷属性武器

  水属性武器   --> トビカガチ
  水属性武器   --> クルルヤック
  水属性武器   --> アンジャナフ
  火耐性       --> アンジャナフ
  ジュラトドス --> 水属性武器
```

![mermaid-diagram-20180211214159._chart2 (1).png](https://qiita-image-store.s3.amazonaws.com/0/50391/6f5985e1-3387-cc19-ad0c-401983f5245f.png)

矢印の情報を記述するだけで、レイアウトなどはよしなに調整してチャートを作ってくれます。なかなか良い感じです。

大きなまとまり毎に`Subgraph`でまとめてみます。
また`==>`で太い矢印を、`-.->`で点線の矢印を書くことができます。

```mermaid
graph TB
  水属性武器   ==>  トビカガチ
  水属性武器   ==>  クルルヤック
  雷属性武器   ==>  プケプケ
  ジュラトドス -.-> 水属性武器

  subgraph アンジャナフ対策
    水属性武器   ==> アンジャナフ
    火耐性1      --> アンジャナフ
    クルルヤック -.->|頭防具| 火耐性1
  end

  subgraph リオレウス対策
    火耐性2      --> リオレウス
    毒耐性       --> リオレウス
    気絶耐性     --> リオレウス
    雷属性武器   ==> リオレウス
    アンジャナフ -.->|腰防具| 火耐性2
    プケプケ     -.->|腕防具| 毒耐性
    ボルボロス   -.->|脚防具| 気絶耐性
    トビカガチ   -.-> 雷属性武器
  end
```
![mermaid-diagram-20180211213826_chart3 (1).png](https://qiita-image-store.s3.amazonaws.com/0/50391/f8431e7d-7110-f36f-f249-f1d18abb0b24.png)

各タスクの依存関係と時系列が可視化されました。
何から手を付けたら良いのか分からなかったプロジェクト初期状態から比べて、工程の進め方が随分わかりやすくなりました。

### Gantt

全体の工程が見えたので、実際の作業計画を引いてみます。
最初に`gantt`と宣言することでガントチャートを書くことができます。[公式ドキュメントがほとんどTo Be Determined](https://mermaidjs.github.io/gantt.html)になっていますが、下記のように書くとだいたい行けました。`:done`,`:active`で進捗管理もできます。

```mermaid
gantt
  title リオレウス
  section アンジャナフ対策
    ジュラトドス :done, water_weapon, 2018-01-25 12:00:00, 2h
    クルルヤック :active, fire_resistance_1, after water_weapon, 3h
    アンジャナフ :fire_resistance_2, after fire_resistance_1, 2h
  section リオレウス対策
    トビカガチ :thunder_weapon, after water_weapon, 3h
    プケプケ   :poison_resistance, after fire_resistance_2, 3h
    ボルボロス :down_resistance, after fire_resistance_2, 3h
    リオレウス :crit,  after down_resistance, 2h
```

![mermaid-diagram-20180211214543_gantt (1).png](https://qiita-image-store.s3.amazonaws.com/0/50391/050d3262-b6b7-1670-ccba-7b9cc378aade.png)

実際にはプケプケの翼膜の納品が遅延したり、アンジャナフが強くて炎上するかもしれないので、計画には適当にバッファを取ったほうが良いと思います。

作業計画を引くことができたら、あとは順番にクエストを貼って救難信号を繰り返せばいずれリオレウスを倒せるはずです。

## 終わりに

- **mermaid**を使うことで、簡単なテキストからフローチャートやガントチャートが作成できます。
- mermaidはJavaScriptのライブラリであり、GitLabでは標準で使えるほか、エディタのプラグイン等で利用できます。
- こんな事してる暇があるなら閃光玉の投げ方でも覚えた方が早く倒せると思います。

### 参考

- [Introduce Mermaid diagram support in markdown editor/preview \(\#3711\) · Issues · GitLab\.org / GitLab Community Edition · GitLab](https://gitlab.com/gitlab-org/gitlab-ce/issues/3711)
- [SVGをPNGにするツール \- SDN Project](https://sdn-project.net/labo/svg2png.html)
- [MONSTER HUNTER: WORLD Official Web Manual \| Hunting Equipment](http://game.capcom.com/manual/MHW/en/ps4/page/7/1)