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

Mermaidで作図したUMLを拡大表示させる方法をご紹介します。Dockerがインストールされていれば、ワンライナーでMermaidのライブエディタを起動できます。
2022.04.27

はじめに

データアナリティクス事業本部の藤川です。
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ボタンをクリックしても構いません。 mermaid-live-editor
  6. SVGは、その名の通り、スケーラブルな画像フォーマットです。ブラウザ表示の拡縮に対応し、自由なサイズで表示できます。細部までキレイに拡大できます。
  7. Actionsの左に並んでいるPNGボタンやSVGボタンをクリックすると、画像ファイルをダウンロードできます。
  8. 使い終わったら、コンテナを停止します。
    --rmオプション付きで起動しているため、コンテナごと削除されます。

    docker stop mermaid-live-editor

さいごに

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

あわせて読みたい