今回は、フリーで利用可能な描画ツールとして有名なDraw.io上でMermaid.jsを利用する方法を紹介する。Draw.io自体はWebアプリとしてブラウザでも利用可能だが、特にVSCodeでの拡張機能で利用する場合について詳しく紹介する。
VSCodeのDraw.io拡張機能について
オンラインまたはデスクトップアプリで利用可能な作図ツールであるDraw.io。VSCodeの拡張機能としても提供されており、VSCode内で簡単に利用できる。
もちろん、PowerPointやvisio、お金をかけるならAdobe Illustrator、お金をかけないのであればInkscapeでベクター形式の図を作成する方もいらっしゃるだろう。Draw.ioのいい点としては、visioに近い(と個人的には感じた)操作性で、無料で利用できる点だと思う。同じ図をInkscapeでも作成できるのだと思うが、Draw.ioの方が直感的に操作できると思う。
あとでも触れるが、多少残念な点としては作成したSVGが、あまり綺麗にPowerPointやWordに取り込めないこと。ブラウザ上はあまり型崩れする印象はないのだが… 形崩れを意識したくない場合、作成した図はPNGで利用する方が良い。せっかくのベクター形式の図なのにとは思うが。まあ、元の図はベクター形式なので、PNGにするとしてもDraw.io上である程度サイズを上げてやれば、比較的綺麗に展開することは可能。解像度が上がっても、図形だからか比較的ファイルサイズも小さいと感じる。
Draw.io上でのMermaid.jsの利用方法
これまでもMermaid.jsを紹介してきたが、Draw.io上でもMermaid.jsを利用できる。この利用方法のいい点としては、Mermaid.jsで作成したベクター形式の図に対し、コメントを追加するなど装飾をしたい場合に便利。
まあ、何らかの形で出力したMermaid.jsの図をPowerPoint等で取り込んで装飾するのもアリではあるのだが、Mermaid.jsのファイルを綺麗にPowerPointに取り込むのも難がある…(一応、PowerPointのプラグインもあるらしいが、プラグインが必要)
その点、Draw.io上で取り込む場合は、Draw.ioのサービスが元々Mermaid.jsに対応しており、VSCodeの拡張機能バージョンももちろん利用できる。Draw.ioの拡張機能を入れてるではないか、という気はするものの、あまり無駄にプラグインなどを入れなくても描画できるのはありがたいのではないかと思う。(少し残念なのは、どうやら中のレンダラーは最新のMermaid.jsのバージョンではないようで、使えない記法などはある。)
さらに、VSCodeのDraw.io拡張機能に対する拡張機能としてのMermaid.js描画プラグインも用意されている。まあ正直入れなくても良いのだが、どうしてもSVGで出力したい場合、このプラグインは結構優秀で、Office系ソフトでも綺麗にインポート可能なSVGを出力してくれる。
Draw.io IntegrationでのMermaid.js描画
では、VSCodeで利用する場合を紹介する。
こんな感じで、VSCodeの拡張機能から、Draw.ioなどと検索すればすぐに出てくるDraw.io Integrationをインストールすれば良い。一応、リンクはこちら。
使い方としては、図を描画したいところで、 .drawio .dio の拡張子を持つファイルを作成する。直接pngやsvgとして利用可能なファイルも作成でき、その場合は .drawio.svg .drawio.pngとすれば良い。 .drawioなどのファイルからエクスポートでpngやsvgも作成可能なので、ファイルサイズを減らしたい場合はエクスポート、ファイルサイズは気にならず利便性重視であれば後ろに拡張子を追加、という形で運用すれば良いと思う。
Mermaid.jsを配置したい場合、配置→挿入→高度な設定→Mermaid からMermaid.jsのブロックを配置できる。
Mermaid.jsのコードを入力して、挿入。
コードにエラーがなければ、描画される。
正直、この中でコードを頑張って作るには向いていない。リアルタイムで描画してくれるわけではないし。とはいえ、Draw.ioのツールの中で図形を挿入して、コメントなどをつけられるのは面白い機能ではあると思う。
プラグインのDraw.io Integration: Mermaid を使う方法
Draw.ioでMermaid.jsを利用する別の方法として、プラグイン Draw.io Integration: Mermaidを導入することも可能。正直、公式の機能で描画できてしまうので、必要ない気もするのだが(自分は直近ではインストールしていなかった)、SVGの出力がなかなか便利なので一応紹介しておく。
では、インストール方法から。検索してインストール。
インストールするとどうなるかというと、Draw.ioで編集する際のパーツ候補が追加される。
例えばフローチャートを選択すると
フローチャートが配置されるので、ダブルクリック。
コードブロックが出現し、Mermaid.jsのコードを記入する。
このプラグインのいい点は、コードがリアルタイムに反映されるというところ。まあやろうと思えば、この画面で図形を作り込むことができる。あまりお勧めはしないが笑
また、 Download as | SVG | PNG | からSVGとPNGをダウンロードできる。ここからダウンロードできるSVGはそれなりに再利用しやすい。WindowsPCでやった際には、PowerPointにもそのまま形崩れせずに貼り付けられた覚えがある。
残念な点としては、プラグイン自体の更新が止まっているということ。それなりにしっかりとした開発者っぽくGithubアカウントは見えるのだが、更新は止まっている。そのせいもあり、最新のMermaid.jsの記法には対応していない。
まとめ
今回はVSCodeの拡張機能として利用する際の、Draw.io上でのMermaid.jsの利用方法について紹介した。まあ、頑張ってDraw.io上で利用する必要はないかもしれないが笑 png画像として出力したいがLive Editorは使いたくない時などは利用できる。プラグインの方も更新が止まっているのが残念だが、どうしてもPowerPointに貼れるSVGが欲しい、というケースなどでは活躍できると思う。
とはいえ、PowerPointなどで利用する際にもっといい方法はないだろうか、ということは気になっており、今後もいろいろ試してみて綺麗に再利用する方法を探りたいと思う。
