【生成AI】MermaidのAgent Skillsを利用して綺麗な図を作成する

NeeNetです。

今回は、 Mermaid とClaude CodeやCursor用で使われる Agent Skills を利用して、綺麗な図を作成したいと思います。

Mermaidとは

Mermaidは、テキストベースの記法でダイアグラムやチャートを作成できるJavaScriptライブラリです。

Markdownに似た構文で記述でき、コードとしてバージョン管理できるのが大きな特徴です。

例えば、以下のようにフローチャートを記載することができます。

graph TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理A]
    B -->|No| D[処理B]
    C --> E[終了]
    D --> E

上記で生成される図は以下の通りです。

Mermaidのレンダリングに対応しているコードエディタやBacklogといったサービスでも図を確認することはできますが、以下のようなWebサイトのエディタでも確認することができます。

Agent Skillsの検索には、以下のサイト skills.sh が便利です。

skills.shはNext.jsの開発元と知られているVercel社によって公開されているもので、Agent Skillsを検索・共有することができるオープンなディレクトリサイトです。

例えばここでMermaidのAgent Skillsを検索すると、以下のように様々なスキルが確認できます。

今回は上記でランキング上位となっている mermaid-diagrams と pretty-mermaid のAgent Skillsを活用してみたいと思います。

インストールはskills.shのインストール方法に記載されている通り、 npx コマンド（pnpmを利用している方は pnpm dlx コマンド）を利用してインストールすることができます。

まず、 mermaid-diagrams のAgent Skillsを以下の通りインストールします。

npx skills add https://github.com/softaworks/agent-toolkit --skill mermaid-diagrams

コマンドを実行すると、まず利用するAgentの確認がでます。

私は今回 Cursor を利用するので、 ./agent/skills の方を選択します。

次にインストールのスコープとしてプロジェクト（カレントディレクトリ）かグローバルかを問われます。

今回、インストール先はカレントディレクトリのみとしたいので、Project を選択します。
※ Global を選択した場合は ~/<agent>/skills/ にインストールされます。

インストール方法はデフォルトのまま Symlink とします。

最後にインストールの確認が出るので Yes を選択します。

これでインストールは完了です。

./.agents/skills/ 配下に、mermaid-diagramsがインストールされていることが分かります。

同様の要領で、 pretty-mermaid の方もインストールを行います。

npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid

インストールが完了すると、以下のようになるかと思います。

インストールが完了したので、いよいよMermaidで作図をしてもらいます。

以下のように依頼してみます。

MermaidでOauth認証のシーケンス図を作成して

依頼すると以下の通り、Agent Skillsの内容を確認し作成してくれることが分かります。

途中少し調整を挟みましたが、最終的に出力されたのは以下の図になります。（pretty-mermaidにより、Mermaid記法のドキュメントと共に、svgファイルが出力されます）

普通にMermaidでレンダリングするよりも、お洒落な感じの図になっていることが分かります。

このように、単に生成AIにMermaidの作図を依頼するのではなく、Agent Skillsを組み合わせることにより、高品質なアウトプットを得ることができるようになります。

今回は、MermaidとClaude CodeやCursor用で使われるAgent Skillsを利用して、綺麗な図を作成してみました。

参考になりましたら幸いです。

NeeNetでは、生成AIを活用した業務効率化等のご相談をお受けしております。

今回ご紹介したような、Agent Skills自体の作成についても相談をお受けしておりますので、個人・法人問わず、何かご相談事項がございましたら、一度ご連絡いただければと思います。