Mermaidで描いた図形を画像ファイルに出力し、キレイに拡大表示してみた

はじめに

データアナリティクス事業本部の藤川です。
UMLの作図ツールには様々なものがあります。最近、Notionを使うことが多いので、Markdownに記述できるUMLを探していました。 また、Visual Studio Code（以下、VSCode）のWeb版を使う機会が増えました。これらのニーズに対応できるUML作図ツールが良いなと思います。 そんな経緯で、Mermaidを使っています。

NotionとVSCodeは、図をプレビュー表示できますが、あまり大きく引き伸ばせません。また、スケーラブルではないため、拡大しても画像が荒くて細部を確認できません。 画像をファイルに出力できれば何とかなりそうなものですが、NotionとVSCodeは画像をファイル出力できませんでした。

本記事では、Mermaidで作成した図を画像ファイルに出力し、拡大表示する方法をご紹介したいと思います。

概要

オンラインのMermaid Live Editorがありますが、設計書のような機微な情報のアップロードを避けたいです。

そこで、Dockerで動作するMermaid Live Editorを構築しました。mermaid-live-editorのDockerイメージを入手し、稼働させます。

やり方

1. Dockerイメージをプルし、コンテナを起動します。

   docker run --rm -d -p 80:80 --name mermaid-live-editor ghcr.io/mermaid-js/mermaid-live-editor

2. Mermaid Live Editorにブラウザでアクセスします。
   http://localhost
3. フローチャートのサンプルコードで試してみます。
   Sample Diagramsを開き、Flow Chartボタンをクリックします。
4. 画面右側のDiagramにフローチャートが表示されます。
   表示されない場合は、Auto syncを有効にするか、すぐ左にある更新ボタンをクリックしてください。
5. Diagramの右にあるVIEWボタンをクリックすると、別タブが開き、フローチャートが表示されます。
   Actionsを開き、SVGボタンをクリックしても構いません。
6. SVGは、その名の通り、スケーラブルな画像フォーマットです。ブラウザ表示の拡縮に対応し、自由なサイズで表示できます。細部までキレイに拡大できます。
7. Actionsの左に並んでいるPNGボタンやSVGボタンをクリックすると、画像ファイルをダウンロードできます。
8. 使い終わったら、コンテナを停止します。
   --rmオプション付きで起動しているため、コンテナごと削除されます。

   docker stop mermaid-live-editor

さいごに

Mermaidで作図したUMLを拡大表示させる方法をご紹介しました。 Dockerがインストールされていれば、ワンライナーでライブエディタを起動できます。 是非、ご参画中のプロジェクトで採用してみてください。

あわせて読みたい