こんにちは！かねごん（@hrbk25）です！
この記事では、少し前からSNSで話題になっていた「Claudeを使って、draw.ioのXMLを作ってもらう」という内容を、身近な内容とAIアシスタントツールを使って試してみましたので、その内容を備忘録として残しておきます。
どんな人向けの記事か
- システム構成図などの図を効率的に作成したい方
- draw.ioを普段活用している方
- AI（NotebookLM、Claude）による図の自動生成に興味がある方
やったこと
今回は、kintoneの営業支援パックを公式サイトの情報から、NotebookLMとClaudeを活用してdraw.ioでシステム構成図を自動生成してみました。
kintone営業支援パックとは
本アプリパックは営業で顧客や案件、商談の管理をすることを目的に構成されたサンプルのアプリパックです。
NotebookLMとは
Googleが提供するAI搭載のアシスタントツールです。WebサイトやPDFなど「ソース」をアップロードや指定すると、その内容を構造化・要約・抽出できます。
Claudeとは
Anthropic社が提供する対話型AIアシスタントツールです。様々なプロンプトに対応でき、draw.io用のXML出力なども生成可能です。
手順
1. NotebookLMでサイト情報をまとめる
今回は、NotebookLMを使って、まず営業支援パックの情報をまとめました。
- notebookLMで新しいノートブックを作成する
- 「ソース」として、kintoneヘルプの営業支援パックを使ってみようのURLをアップロードする
- 以下のようなプロンプトをチャットに投げる。
このサイトの内容をもとに、「kintone営業支援パック」のシステム構成要素とアプリ間の関係性を整理し、図式化に必要なポイントを要素ごとにリストアップしてください。
NotebookLMを使った理由：
”情報をまとめる”だけであれば、他のAIアシスタントツールでも良いのですが、PDF、サイト、YouTube動画、音声ファイル、Googleドキュメント、Googleスライドなど、指定したソースに基づいた根拠のある情報を取得してくれる NotebookLM を今回は使いました。
2. Claudeでdraw.io用のXMLを自動生成
- Claudeを開く(モデルはClaude Sonnet4を使用)
- NotebookLMで出力した内容をコピーする
- 以下のようなプロンプトをチャットに投げる。
～NotebookLMの内容を貼り付け～
この情報をもとに、draw.ioでシステム構成図を出力できるXMLを作成してください。
アプリやデータ連携の関係性が分かるような図になるようお願いします。また、アイコンなどを使って非エンジニアの方でも分かるように工夫してください。
3. draw.ioにXMLを貼り付け
- draw.ioを開く
- Claudeで出力した内容をコピーする
- 右クリックして「ここに貼り付け」を選択する
- システム構成図が自動生成される
- 必要に応じてレイアウトを微調整する
出力された結果を確認
営業支援パックのシステム構成図を出力することができました！
出力結果には、「案件管理」の関連レコードを「活動履歴」に表示する情報が含まれていませんでしたが、これはサイト内にその情報が明示されていなかったためだと思います。
ただ、サイトに記載されている情報については、問題なく構成図に反映できていたので、図作成の効率化という点では非常に良いと思いました！
まとめ
- 微修正は必要だが、図作成の効率化には便利！
- 根拠のある情報だけを使いたい場合は、NotebookLMの活用が良いかも！
- 同じプロンプトでも（NotebookLM・Claudeともに）、出力内容が毎回異なるため、何度か試してみると良いかも！ 試してみた結果👇
おわりに
今回は、kintoneの公式サイトの情報から、NotebookLM×Claudeを使って、draw.ioでシステム構成図を自動生成する流れをまとめました。
AIアシスタントツールを組み合わせれば、資料作成が効率化されます。この記事がどなたかのヒントや効率化につながれば幸いです！