簡単にガントチャートとかクラス図とか書けるやつ

[mermaid](https://github.com/knsv/mermaid)は、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。
[d3.js](https://d3js.org/)の機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。

なお、[ヘルプ](http://knsv.github.io/mermaid/)はGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。

## ごたくはいい、実物を見せろ

[こんなかんじ](http://nurseangel.sakura.ne.jp/js/mermaid/)
→支払い忘れてサーバが死んだので[代替(誰かが書いたやつに勝手にリンク)](http://jsdo.it/akenabe/WtQb)


## できること

以下の図が描ける。
・フローチャート
・シーケンス図
・ガントチャート
・クラス図
・gitグラフ

最後だけ異質だ。

## インストール

CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。

```js
cd path/to/DocumentRoot
yarn add mermaid
```


## 最小構成

とりあえず最小構成で試してみる。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
</head>
<body>
<div class="mermaid">
  graph TD;
    A-->B;
</div>

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js" charset="UTF-8"></script>
<script>
  mermaid.initialize({
    startOnLoad:true
  });
</script>
</body>
</html>
```

![image00.png](https://qiita-image-store.s3.amazonaws.com/0/26088/6dc4daa2-64aa-f30e-fa65-cd07224dfbaf.png)

環境に依るかもしれないが、scriptのcharset指定しないとなんかmermaid.min.jsがエラー吐いて死んだ。

`mermaid.initialize()`が起動で、クラス`mermaid`内に書いてあるテキストを自動的に図形にしてくれる。
コンストラクタには色々な[引数を渡す](http://knsv.github.io/mermaid/index.html#initialization)ことが可能で、サイズを指定したり動作を一部変更したりできる。


## 実例

作図はHTMLやCSSではなく、特別なマークアップ言語で書く必要がある。
といっても非常に簡単なものなので、見ればだいたいわかるだろう。
言語には特に名前は付いていないようだが、わりと柔軟に記述することができる。

文の区切りは`;`もしくは改行で、スペースは無視される。
先頭の`graph`や`sequenceDiagram`などでグラフの種類を指定し、その後に具体的なマークアップを記述していく。
正しくないフォーマットのテキストを入れてもグラフが表示されないだけで、JSエラーなどは発生しない(ハンドリングはできる)。

### フローチャート

```html
<div class="mermaid">
  graph LR;
    A>開始] --> |"順調"|B[終わって暇];
    A -.-> C{Dはよ};
    A --> D(実装が遅れた);
    B --> F;
    C --> F;
    D ==> E((Dはよ));
    D ==> C;
    E --> F{>>デスマ<<};
    click B "https://www.bing.com/" "リンクもはれる";
</div>
```

![image01.png](https://qiita-image-store.s3.amazonaws.com/0/26088/d3387fb6-e388-5ef5-8aca-ee920ac1b84c.png)

`graph **`でフローチャートが開始。
`**`には`LR`(左から右)と`TD`(上から下)、およびその逆向きの`RL``DT`を指定できる。

あとはノード同士を`-->`で繋いでいくだけで、mermaidが全自動でいいかんじの図に仕上げてくれる。

とにかく簡単に図を作れるというところを重視しているためか、フロー終了ノードやフォークノードのような複雑な図形には対応していない。
また、細かく思い通りの位置調整をしたいといった用途にも向いていないだろう。
そういった"きちんとした"用途にはVisioのような専用のツールを使うべきだろう。
しかし、そういったソフトウェアを使うことなく、わずか数行テキストを書くだけでフローチャートができあがるという利便さは圧倒的である。


### シーケンス図

```html
<div class="mermaid">
  sequenceDiagram
	本部->>隊長: レンジャー1、状況を報告しろ！
	隊長->>本部:巨大生物と交戦、数匹を撃破しました！
	本部->>隊長:なんだと！？そんな馬鹿な！
	隊員-->>隊員:どうなってんだ……なんで巨大生物が？
	隊員->>隊長:7年ぶりの巨大生物だ。今や絶滅危惧種だぞ！
	隊長->>隊員:危惧は無用だ、絶滅させろ！
	隊員->>隊長:Yes,sir!
	loop 無線
	  本部->>隊長:聞こえないぞ、繰り返せ！
	end
</div>
```

![image02.png](https://qiita-image-store.s3.amazonaws.com/0/26088/0778182c-5330-dd60-4a0d-6819f00443be.png)

`sequenceDiagram`でシーケンス図が開始。
あとは各要素を矢印で繋ぐだけ。
結合フラグメント`loop`、`opt`、`alt`、`par`を使用可能だが、`ref`や`assert`などは使用できないようだ。
こんな簡単に描けていいのかと驚くばかりだ。


### ガントチャート

```html
<div class="mermaid">
  gantt
    title 銀行次期システム開発

	section 新勘定系システム
	案件定義       :done, c1, 2012-11-20, 250d
	基本設計       :active, c2, after c1, 250d
	詳細設計・製造 :active, c3, after c2, 250d
	結合テスト     :crit, c4, after c3, 400d
	総合テスト     :crit, c5, after c4, 353d
	プレ受入テスト :d1, 2015-07-01, 550d
</div>
```

![image03.png](https://qiita-image-store.s3.amazonaws.com/0/26088/3d556acd-81f5-7614-9c1a-f8edc6f83990.png)

`gantt`でガントチャートになる。
sectionでチャートを区切り、中に項目を並べていく。
同じ行に複数項目を並べることはできないようだ。
デフォルトでは日付が○年○週目のような表記になってわかりにくいので、以下のように引数axisFormatterで変更するといいだろう。

```js
	ganttOption = {
		"axisFormatter": [ // 一カ所だけ設定はできないようだ
			["%I:%M", function(d){return d.getHours();}], // 一日以下
			["%m", function(d){return d.getDay() == 1}], // 週
			["%a %d", function(d){return d.getDay() && d.getDate() != 1}], // 一週間以内
			["%b %d", function(d){return d.getDate() != 1}], // 一月以内
			["%m", function(d){return d.getMonth();}], // 月
		]
	};
	mermaid.initialize({
		startOnLoad:true,
		gantt: ganttOption
	});
```

しかし指定しても想定通り動かなかったりすることがあってよくわからん。

### クラス図

```js
<div class="mermaid">
  classDiagram
    Component <|-- ConcreteComponent
	Component <|-- Decorator
	Decorator o-- Component
	Component : +operation()
	ConcreteComponent : +operation()
	Decorator : -component
	Decorator : +operation()
	Decorator <|-- ConcreteDecorator
	ConcreteDecorator : +operation()
</div>
```

![image04.png](https://qiita-image-store.s3.amazonaws.com/0/26088/1ffa205d-127b-96aa-3bec-eab697e3a638.png)

`classDiagram`でクラス図になる。
矢印を任意のメソッドに引くようなことはできないようだ。

### gitグラフ

```js
<div class="mermaid">
  gitGraph BT:
    commit
    branch develop
    checkout develop
    commit
    commit
    branch feature
    checkout feature
    commit
	checkout develop
    commit
	merge feature
	checkout master
    branch hotfix
    checkout hotfix
    commit "bugfix"
	checkout master
    merge hotfix
	checkout develop
	merge hotfix
	checkout master
    merge develop
</div>
```
![image05.png](https://qiita-image-store.s3.amazonaws.com/0/26088/94e6174c-c26e-6b6b-01ea-8afc5e5dc53e.png)

`gitGraph`でgitグラフになる。
tagや`--no-ff`が使えない、commitハッシュが勝手に付いてきて指定できないなど、まだ本格的に使えるようなものではないようだ。
書式は面倒だが、素直に[GitGraph.js](http://gitgraphjs.com/)あたりを使った方がいいだろう。


## [動作サンプル](http://nurseangel.sakura.ne.jp/js/mermaid/)

上記のサンプルは[ここ](http://nurseangel.sakura.ne.jp/js/mermaid/)で見れます。
画像っぽいものは全てCSSとJavaScriptにより作られたもので、画像は一枚も使っていません。

## サンドボックス

[公式にもある](https://knsv.github.io/mermaid/live_editor/)んだけど、どうもエラーが出まくりで動きが微妙なのでサンドボックスを[作ってみた](http://nurseangel.sakura.ne.jp/js/mermaid/)のですが、[バグ](https://github.com/knsv/mermaid/issues/357)のせいでやっぱりまともに動きませんでした。
激しく微妙。


## 感想

とりあえずさくっとフローチャートを表示しておきたい、手軽に変更したい、などといった場合に非常に便利でお手軽なライブラリです。

"とりあえず"以上のことはしない、という割り切った作りであるため、利用が容易な反面で複雑なことを行うのは難しくなります。
そのあたりは導入や運用とのトレードオフということでしょう。

もっと高度な図形が作りたい場合は[d3.js](https://d3js.org/)、業務での運用を考えるなら[draw.io](https://www.draw.io/)なりVisioなりを検討するとよいでしょう。
まあ一般的なサイトで本当にそこまでの機能が必要なのかは知りませんが。