GitHub公式のプレビューカード
draw.ioにAI操作を加え、自然文で図を作るNext.jsアプリ。
#図解#draw.io
※この説明はAIが公式READMEから自動生成したものです。内容は必ず公式ページでもご確認ください。
これは何？パソコンに入れて使うアプリ
できること
draw.ioにAI機能を組み込んだNext.jsアプリ。チャットに自然文で図の内容を書くと、構成図や認証フローなどの図を作成・修正・強化できる。
誰に効く？
図解を素早く作りたい人
用意するもの
ブラウザ、AI
時間のめやす
10〜20分
使うとこうなる
- 1作りたい図を入力すると→AIが図案を生成する
- 2draw.io上で開くと→図として編集できる
- 3修正指示を書くと→図の内容を更新できる
作れるもの・できることの例
RAG構成図、認証フロー図、業務フローチャート
使えるようになるまでの手順をひらく
- 下の「GitHubで見る」ボタンで公式ページを開く
- ページ内の「（リリース）」から自分のPC用（Windowsなど）のファイルをダウンロード
- ダウンロードしたファイルを開いてインストール
- アプリを起動すれば使えます（画面が英語のことも多いですが、操作はシンプルです）
⬇️ ダウンロードページでの操作（この3タップで完了）
- ページを下にスクロールして 「Assets」 という折りたたみを押して開く（ここがファイル一覧）
- Windowsの人 →「.exe」か「Setup」／Macの人 →「.dmg」と付くファイルを1回押す（ダウンロードが始まります）
- ダウンロードしたファイルを開く。Windowsが青い警告を出したら「詳細情報」→「実行」（有名な無料ソフトでもよく出る画面です）
※緑の「Code」ボタンは開発者用なので押さなくてOK。ファイルがたくさん並んでいたら、上の条件に合う1つだけ選べば大丈夫。
こんな人には向かないかも
- 登録やAPIキーの設定を一切やりたくない人
🔑 必要な鍵（APIキー）— 下のどれか1社でOK
すでにどこかの鍵を持っていればそれが使えます。まだ無いなら Google（Gemini）が一番かんたんです。
Google（Gemini） の発行ページ↗Googleアカウントがあれば無料で即発行。無料枠も大きく、一番かんたん
OpenAI（ChatGPT） の発行ページ↗発行は無料。APIはChatGPT Plus（月額）とは別勘定で、使った分だけの課金。※Codex等の一部公式ツールは、キーの代わりにChatGPTの月額プランでログインして使える
Anthropic（Claude） の発行ページ↗発行は無料。APIは月額プランとは別勘定で、使った分だけの課金。※Claude Codeは月額プラン（Pro等）のログインでも使える
鍵は「合鍵」の文字列。発行→コピー→ツールの設定に貼り付け、の3手です。迷ったらAIチャットに「画面つきで教えて」と。
迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って 「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。
注意点
複雑な図は手直しが必要になる。
ひとことメモ
として公開されています。内容は公式ページでもご確認ください。
このツールが活躍する場所