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

By インモビ運営局

2025年5月3日

0

3

Apple Pencil Pro

(10737)

￥20,919 (2025年5月3日 13:16 GMT +09:00 時点 - )

Anker PowerLine III Flow USB-C & USB-C ケーブル Anker絡まないケーブル 100W 結束バンド付き USB PD対応シリコン素材採用 iPhone 16 / 15 Galaxy iPad Pro MacBook Pro/Air 各種対応 (1.8m クラウドホワイト)

(19554)

￥1,890 (2025年5月3日 13:14 GMT +09:00 時点 - )

【正規MFi認証品】 iPhone 充電ケーブルライトニングケーブル 2M 4本セット iPhone 充電器ケーブル lightning ケーブルアイフォン充電ケーブル 2.4A急速充電 USB同期高速データ転送断線防止超高耐久 iPhone 14/14 Pro/13/13 Pro/12/11/X/8/8plus/7/6/iPad 各種対応

(366)

￥749 (2025年5月3日 13:14 GMT +09:00 時点 - )

プログラマやドキュメント作成者にとって、図は複雑な概念を説明する上で欠かせないツールです。しかし、図の作成は煩雑で時間がかかるものです。Microsoftが開発した「mermAId」というVS Code拡張機能を使うことで、一瞬で図を作ることができるようになります。というわけで、実務で使ってみたので、その使い方をご紹介したいと思います。
紛らわしいのですが、Mermaidはテキストベースでフローチャートやシーケンス図などを描けるJavaScriptライブラリです。一方、mermAIdはそのMermaid記法をCopilotを使って自動生成・編集できるVS Code拡張機能です。余談ですが、「mermAId」のうち、なぜAIだけ大文字なんだろうと思ったら、AIと掛けているのですね。
たとえば、下記のテキストをMermaidにして出力すると

flowchart TD
ほげ --> ふが

以下の通りになります。ZennはMermaidにも対応しているので、図での出力が可能となります。
Mermaidは以下のような図に対応しています。システム開発で使われるものなら、大体は対応していると思います。
フローチャート
シーケンス図
クラス図
ER図
アーキテクチャ図
マインドマップ
この形式の良いところは、生成AIにとっても人間にとっても理解しやすいところです。画像形式は、人間にとっては理解しやすいですが、生成AIにとっては今のところ理解しづらく、データ量が余計にかかります。
mermAIdは、VS Codeで使用できるAI支援型のMermaid図作成ツールです。自然言語の説明からMermaid図を生成したり、既存のMermaid図を改善したりする機能を提供しています。フローチャートやシーケンス図、UMLを書くのに使えます。

 主な特徴自然言語の説明からMermaid図を生成
既存のMermaid図の修正や機能追加
インタラクティブなUI
VS Codeとの統合

 使い方インストールはVS Code Marketplaceから可能です。
VS Codeでコマンドパレット（Ctrl+Shift+P）を開く
「mermAId: Create Diagram」を選択
作成したい図の説明を自然言語で入力
AIが説明に基づいてMermaid図のコードを生成
必要に応じて自然言語で修正・調整
M+アイコンを押して、Mermaidのコードを直接編集することも可能

 具体的な使用例まずは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が下方向です。
書くシーンならどんな場面でも使えるのですが、特に、要件定義書や設計資料に「ユーザーの操作フロー」や「各役割ごとのフロー」を入れたいときに使うと効果的です。
また、文章で表現するとわかりづらく、表にするのもわかりづらい場合、試しにvscode-mermAIdに投げるのもおすすめです。図の作成時間が短いので、気楽に生成することができます。
たとえば、上記の文章をmermAIdに投げると、下記の通りになります。
@mermAId 以下の文章を図にして。「文章で表現するとわかりづらく、表にするのもわかりづらい場合、いったんvscode-mermAIdに投げてみる」
ZennのようにマークダウンとMermaidを組み合わせて使うのが、AIにとっても人にとっても分かりやすいように感じています。
Mermaidを含んだマークダウンはそのままでは人と共有するのが難しいです。プレビュー画面から右クリックで、Export→Chrome(Puppetter)と進むことでPDF等の出力が可能になります。
mermAIdは、VS Code上でMermaid図を簡単に作成・編集できるAI支援ツールです。プログラマやドキュメント作成者の作業効率を大幅に向上させ、高品質な図表作成をサポートします。特に、Mermaid記法に不慣れなユーザーや、短時間で効果的な図表を作成したいユーザーにとって、非常に便利なツールと言えるでしょう。
繰り返しになりますが、今まで図を書くのは大変でしたが、生成AI登場以後、簡単になりました。mermAIdを活用すれば、自然言語で図が瞬間的に手に入ります。

 参考リンク