MCPでAIエージェントにフローチャートを描かせてみた【DrillSpark × Claude】

はじめに

「AIにフローチャートを描かせたい」と思ったことはありませんか？

2025年後半から急速に普及している MCP（Model Context Protocol） を使えば、Claude や Cursor などのAIエージェントから 外部ツールを直接操作 できるようになります。

この記事では、フローチャート作成ツール DrillSpark のMCPサーバーを使って、Claude Code からフローチャートを自動生成するハンズオンを紹介します。

MCPとは？

MCPは Anthropic が策定した、AIエージェントと外部サービスをつなぐオープンプロトコルです。

従来のAPI連携との違いを簡単にまとめると：

項目	従来のAPI連携	MCP連携
呼び出し元	人間がコードを書く	AIが自律的に判断
ツール発見	ドキュメントを読む	AIが自動で認識
パラメータ	人間が指定	AIが文脈から推論
エラーハンドリング	人間がコード化	AIが判断して再試行

つまり、AIが「どのツールを、どう使うか」を自分で判断できるのがMCPの本質です。

準備

1. DrillSparkアカウント作成

DrillSpark で無料アカウントを作成します（月5回のAI生成が無料）。

2. PAT（Personal Access Token）の取得

1. DrillSpark にログイン
2. 設定 → API → 「トークンを生成」をクリック
3. dsk_ で始まるトークンが発行される
   

3. Claude Code / Claude Desktop での設定

claude_desktop_config.json または .mcp.json に以下を追加：

{
  "mcpServers": {
    "drillspark": {
      "command": "npx",
      "args": ["-y", "drillspark-mcp@latest"],
      "env": {
        "DRILLSPARK_PAT": "dsk_your_token_here"
      }
    }
  }
}

実践：業務フローを自動生成する

Step 1: プロジェクト作成

Claude Code のターミナルで、こう話しかけるだけ：

DrillSparkで「ECサイトの受注処理フロー」を作成して

Claude が MCP 経由で create_project ツールを呼び出し、以下のようなフローチャートが生成されます：

Step 2: ドリルダウンで詳細化

「決済処理のステップを詳しく展開して」と指示すると、Claude が update_diagram で子ダイアグラムを追加：

DrillSparkの「決済処理」ノードをドリルダウンして、
クレジットカード決済のサブフローを作って

これにより、ルート図の「決済処理」ノードをクリックすると、詳細なサブフローに遷移できるようになります。

Step 3: バージョン管理

DrillSparkのバージョン一覧を見せて

list_versions ツールで変更履歴を確認。間違えても restore_version で即座に復元可能です。

DrillSpark MCPの全ツール一覧

カテゴリ	ツール	説明	コスト
プロジェクト	list_projects	一覧取得	無料
	get_project	詳細取得	無料
	create_project	新規作成（階層一括対応）	1 credit
	update_project	更新	無料
	delete_project	削除	無料
ダイアグラム	list_diagrams	一覧取得	無料
	get_diagram	Mermaidコード取得	無料
	update_diagram	更新・サブ追加	1 credit
フォルダ	list_folders	一覧取得	無料
	create_folder	新規作成	無料
バージョン	list_versions	履歴一覧	無料
	restore_version	復元	無料
プロフィール	get_profile	残高確認	無料

読み取り系は完全無料 なので、まずはプロジェクトの閲覧から気軽に試せます。

対応AIクライアント

クライアント	認証方式	備考
Claude.ai	OAuth 2.0	ブラウザから直接
Claude Desktop	OAuth 2.0 + PKCE	デスクトップアプリ
Claude Code	PAT (dsk_*)	CLI・ターミナル
Cursor / Windsurf	PAT (dsk_*)	IDE統合

まとめ

MCPを使えば、AIエージェントが直接フローチャートを作成・編集できます。

従来の「AIにテキストで説明を書かせる → 手動で図に起こす」というワークフローが、「AIに指示するだけで図が完成する」に変わります。

DrillSparkは無料プランで月5回のAI生成が使えるので、まずは試してみてください。

• DrillSpark: https://drillspark.io
• MCPガイド: https://drillspark.io/mcp
• npm パッケージ: drillspark-mcp

---

この記事が参考になったら、いいね & ストックお願いします！