GitHub Copilotを持っているならvscode-mermAIdを試そう

はじめに

プログラマやドキュメント作成者にとって、図は複雑な概念を説明する上で欠かせないツールです。しかし、図の作成は煩雑で時間がかかるものです。Microsoftが開発した「mermAId」というVS Code拡張機能を使うことで、一瞬で図を作ることができるようになります。というわけで、実務で使ってみたので、その使い方をご紹介したいと思います。

Mermaidとは

紛らわしいのですが、Mermaidはテキストベースでフローチャートやシーケンス図などを描けるJavaScriptライブラリです。一方、mermAIdはそのMermaid記法をCopilotを使って自動生成・編集できるVS Code拡張機能です。余談ですが、「mermAId」のうち、なぜAIだけ大文字なんだろうと思ったら、AIと掛けているのですね。
たとえば、下記のテキストをMermaidにして出力すると

flowchart TD
ほげ --> ふが

以下の通りになります。ZennはMermaidにも対応しているので、図での出力が可能となります。

Mermaidは以下のような図に対応しています。システム開発で使われるものなら、大体は対応していると思います。

• フローチャート
• シーケンス図
• クラス図
• ER図
• アーキテクチャ図
• マインドマップ

この形式の良いところは、生成AIにとっても人間にとっても理解しやすいところです。パワーポイントやSVGなどの画像形式は、人間にとっては理解しやすいですが、生成AIにとっては今のところ理解しづらく、データ量が余計にかかります。

mermAIdとは

mermAIdは、VS Codeで使用できるAI支援型のMermaid図作成ツールです。自然言語の説明からMermaid図を生成したり、既存のMermaid図を改善したりする機能を提供しています。フローチャートやシーケンス図、クラス図を書くのに使えます。
https://github.com/microsoft/vscode-mermAId

主な特徴

• 自然言語の説明からMermaid図を生成
• 既存のMermaid図の修正や機能追加
• VS Codeとの統合

インストールはVS Code Marketplaceから可能です。

具体的な使用例

まずはCopilot Chatを開きましょう。次にモデルをo4-mini（ChatGPTのモデル）にします。
そうしたら、下記の通り説明文を書きましょう。

入力する説明文:

@mermAId　ユーザー登録プロセスのフローチャートを作成してください。

上記説明文を入力すると、以下のような図が表示されます。

生成される図の例:

Mermaidを直接編集する場合

VS Codeエディター右上のM+アイコンをクリックすることで、Mermaidを直接編集することが可能です。

この場合、Mermaidのプレビュー画面があったほうが編集しやすいので、下記拡張機能をインストールするのがおすすめです。こちらの拡張機能はZennのようにマークダウンを拡張してMermaid等を表示できるようにしたものです。言うまでもないことですが、インストールする際にはセキュリティに気をつけてください。
https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

mdファイルを右クリックして「Markdown-Preview Enhanced」を選択してください。

そうすると、下記のような画面が表示されます。

この状態で左側を編集することで、即座に右側のチャートが反映されます。
ちなみに、フローチャートの矢印方向を右にするか下にするかはMermaid記法のflowchartの箇所で決まります。flowchart LR　が右方向で、 flowchart TDが下方向です。

コマンドパレットから、Markdown Preview Enhanced: Toggle Live Updateを選択することで、編集されたらプレビューが更新されるようになります。

活用シーン

書くシーンならどんな場面でも使えるのですが、特に、要件定義書や設計資料に「ユーザーの操作フロー」や「各役割ごとのフロー（シーケンス図）」を入れたいときに使うと効果的です。
また、文章で表現するとわかりづらく、表にするのもわかりづらい場合、試しにvscode-mermAIdに投げるのもおすすめです。図の作成時間が短いので、気楽に生成することができます。

たとえば、上記の文章をmermAIdに投げると、下記の通りになります。

@mermAId 以下の文章を図にして。「文章で表現するとわかりづらく、表にするのもわかりづらい場合、いったんvscode-mermAIdに投げてみる」

ZennのようにマークダウンとMermaidを組み合わせて使うのが、AIにとっても人にとっても分かりやすいように感じています。

これ以外にもコードからクラス図を作成するのにも使えます。色々使い方があるので興味がある方は公式ドキュメント

• VS Code Marketplaceを参照してみてください。

PDFを出力する

Mermaidを含んだマークダウンはそのままでは人と共有するのが難しいです。プレビュー画面から右クリックで、Export→Chrome(Puppetter)と進むことでPDF等の出力が可能になります。

まとめ

mermAIdは、VS Code上でMermaid図を簡単に作成・編集できるAI支援ツールです。プログラマやドキュメント作成者の作業効率を大幅に向上させ、高品質な図表作成をサポートします。特に、Mermaid記法に不慣れなユーザーや、短時間で効果的な図表を作成したいユーザーにとって、非常に便利なツールと言えるでしょう。
繰り返しになりますが、今まで図を書くのは大変でしたが、生成AI登場以後、簡単になりました。mermAIdを活用すれば、自然言語で図が瞬間的に手に入ります。

参考リンク

• mermAId GitHub リポジトリ
• VS Code Marketplace
• Mermaid 公式ドキュメント