こんにちは。ざっきーです。

暖かくなってきた昨今、一時期は花粉がかなりキツかったですが、最近は雨が降ったりで割と大丈夫になりました。

最近の出来事としては引っ越しをしたのですが、新しい部屋でサッシの隙間から蟻が侵入してきたり、お風呂の水栓がお湯と水をちょうどいい割合で調節しなければならないアレだったり、そんな日々を送っています。

今回のブログ記事はそんな日常とは関係ない話になります。

 

図を描きたい

業務で図を描く際、何を使っているでしょうか。

おそらくExcel、PowerPointをなど使うことが多いかもしれませんが、(Excelは作図ツール)

矢印が上手くつながらなかったりまっすぐ線が引けなかったり、ファイル名の末尾によるバージョン管理が行われたり…と、いろいろ不満に感じる点も多いかと思います。

特に設計書などのように定期的に変更が必要なドキュメントだと、図形の追加があったり、シーケンス図で外部システムやDBが増えたり…ということで、パワポやExcelによる図だとそのあたりの不満点がより目立ってきてしまいます。

そんなこともあってか世の中にはいろいろな作図ツールがあり、中でも最近はPlantUMLというものを教えてもらったので、それを使ってフローチャートやシーケンス図などを書いたりしていました。

テキストで図を定義することができるため、記法をある程度覚える必要はありますが、図形の微調整に悩んだりすることもなく、ファイルの共有なども容易で非常に便利でした。

そんな折、MermaidがGitHubに対応したことによりREADMEなどで図形を表示できるようになった…というニュースを目にしました。

調べるとPlantUML同様テキストベースで図を作成できるツールとのことですが、全く知らなかったので調べてみました。

 

Mermaidとは?

独自記法のテキストをベースに図を描画できるツールで、PlantUMLがJava製であるのに対し、MermaidはJavaScript製になります。

確かにPlantUMLの場合Java製ということで、ローカルPCでに導入する際は

JavaのランタイムをPCにインストール

PlantUMLをインストール

VSCodeに拡張機能を導入

………

といった手順を踏む必要があり、やや面倒でした。しかし、Mermaidの場合VSCodeに拡張機能を入れるだけで標準のMarkdownプレビュー機能がMermaidに対応するので、簡単に試せるとのこと。

また、図形を作るだけならオンラインエディタもあったり、JavaScript製なのでライブラリとして読み込めばHTML内での埋め込みも容易…などと色々良さそうなことが色々な記事に書いてあったので、とりあえず試してみることにしました。

 

使ってみた

という訳で実際にVSCodeで書いてプレビュー、図の出力までやってみることにします。

Markdown Preview Mermaid Supportというプラグインを入れるだけで、VSCode標準のMarkdownプレビュー機能が対応するとのことなのでとりあえず入れてみました。

公式サイトを参考に、以下のようなMarkdownを書いてみました。

今回は簡単なシーケンス図になります。

Markdownの中では、

で囲まれた部分がMarmaidの記法で、これが図に変換されるみたいです。
VSCodeではCtrl+K → VでMarkdownのプレビューが行えるので、実際に見てみます。

いい感じになりました。

これをpng画像として出力するには、Markdown PDFという拡張機能をインストールし、Ctrl+Pでコマンドパレットを開き、Markdown PDF: Export(png)を選択します。(Markdown PDFという名前ですがjpegやhtmlへの出力もできます。)

 

出力したものがこちらになります。

いい感じになっています。

 

まとめ

というわけで流行りの(?)Mermaidを使ってみましたが、導入が容易で非常に試しやすかったです。

やはり記法は独特で(PlantUMLの方がシンプルに感じました)、そこは慣れる必要がありそうですが便利なツールだと思います。

調べているとGitHubだけではなく、ドキュメンテーションツールのNotionやエンジニア情報共有サイトのZennなどでも使用できるようで、今後色々なサイトで使えるようになっていくのではという気もします。

これに限らず図をテキストベースで描けるというのは何かと便利なので、今後業務でもさらに活用できればと思いました。

最後に、フローチャートやER図なんかも公式サイトを参考に作ってみたので、せっかくなので出力した画像を張っておきます。

以上になります。ありがとうございました。