GitLab 10.3で、GitLab Flavored Markdown内にmermaid.jsの記法が使えるようになったそうです。
フローチャート、シーケンス図、ガントチャートがissue, merge request, WikiなどのMarkdown内へ簡単に記述できるようになります。
- Markdown - GitLab Documentation
- GitLab 10.3 released with Static Application Security Testing and Browser Performance Testing | GitLab
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プラグインを導入します。
VSCodeのコマンドパレットを起動(Ctrl+Shift+P)して>Install Extensionsからmermaid previewをインストールします。
再読み込みして>Preview Mermaid Diagramして、mermaid記法の所にカーソルを合わせるとmermaidの図がプレビューできます。
普通の>Markdown: Open Preview to the Sideでもプレビューが効きます。(すこし重いかも)
mermaid-live-editor
mermaidはオンライン上で実行できるサンドボックスも用意されています。
ソースコードはGitHubで公開されているので、ローカルやオンプレ環境下で動かすこともできると思います。
mermaidを書いてみる
リオレウスの狩猟をプロジェクトのモデルとします。
...こんなものは頭に入れられるわけがありません。誰を倒したあと何をすれば良いのか訳が分からなくなります。
ここでmermaidを使ってみます。
Flowcharts
graph LRと宣言した後に、A --> Bのように矢印で繋いでいくとチャートができます。
同じノードは自動で繋げてくれます。便利ですね。
どんどん記述していきましょう。
graph LRで左から右へ、TBで上から下へのチャートが作成できます。
矢印の情報を記述するだけで、レイアウトなどはよしなに調整してチャートを作ってくれます。なかなか良い感じです。
大きなまとまり毎にSubgraphでまとめてみます。
また==>で太い矢印を、-.->で点線の矢印を書くことができます。
各タスクの依存関係と時系列が可視化されました。
何から手を付けたら良いのか分からなかったプロジェクト初期状態から比べて、工程の進め方が随分わかりやすくなりました。
Gantt
全体の工程が見えたので、実際の作業計画を引いてみます。
最初にganttと宣言することでガントチャートを書くことができます。公式ドキュメントがほとんどTo Be Determinedになっていますが、下記のように書くとだいたい行けました。:done,:activeで進捗管理もできます。
実際にはプケプケの翼膜の納品が遅延したり、アンジャナフが強くて炎上するかもしれないので、計画には適当にバッファを取ったほうが良いと思います。
作業計画を引くことができたら、あとは順番にクエストを貼って救難信号を繰り返せばいずれリオレウスを倒せるはずです。
終わりに
- mermaidを使うことで、簡単なテキストからフローチャートやガントチャートが作成できます。
- mermaidはJavaScriptのライブラリであり、GitLabでは標準で使えるほか、エディタのプラグイン等で利用できます。
- こんな事してる暇があるなら閃光玉の投げ方でも覚えた方が早く倒せると思います。