draw.io公式MCPサーバーでER図・フローチャートを自動生成｜Claude Code連携ガイド

{
 "mcpServers":{
   "drawio":{
     "command":"npx",
     "args":["-y","@jgraph/mcp-server-drawio"]
   }
 }
}

あなた:このSQLiteのスキーマからER図を作って。ファイルは./schema.sql

Claude:スキーマを読み込みます...（draw.ioMCPで生成）
→er-diagram.drawioが生成されました

CREATETABLEusers(
 idINTEGERPRIMARYKEY,
 emailTEXTNOTNULLUNIQUE,
 nameTEXTNOTNULL,
 created_atTIMESTAMPDEFAULTCURRENT_TIMESTAMP
);

CREATETABLEposts(
 idINTEGERPRIMARYKEY,
 user_idINTEGERREFERENCESusers(id),
 titleTEXTNOTNULL,
 contentTEXT,
 published_atTIMESTAMP
);

CREATETABLEtags(
 idINTEGERPRIMARYKEY,
 nameTEXTNOTNULLUNIQUE
);

CREATETABLEpost_tags(
 post_idINTEGERREFERENCESposts(id),
 tag_idINTEGERREFERENCEStags(id),
 PRIMARYKEY(post_id,tag_id)
);

あなた:このPython関数の処理フローをフローチャートにして

Claude:関数を解析してフローチャートを生成します...
→flowchart.drawioが生成されました

defprocess_order(order_id: str) -> dict:
    order = fetch_order(order_id)
    if not order:
        return {"status": "error", "message": "Order not found"}

    if order["status"] == "pending":
        stock = check_stock(order["items"])
        if stock["available"]:
            reserve_stock(order["items"])
            payment = process_payment(order["payment"])
            if payment["success"]:
                update_order_status(order_id, "confirmed")
                send_confirmation_email(order["user_email"])
                return {"status": "success"}
            else:
                release_stock(order["items"])
                return {"status": "error", "message": "Payment failed"}
        else:
            return {"status": "error", "message": "Out of stock"}

    return {"status": "skipped", "message": f"Order already{order['status']}"}

あなた:APIGateway→AuthService→UserService→DBの構成図を作って。
       CDN→APIGateway→ProductService→RedisCacheも含めて。

Claude:アーキテクチャ図を生成します...
→architecture.drawioが生成されました

VS Code → Extensions → "Draw.io Integration" (hediet.vscode-drawio) をインストール

あなた:er-diagram.drawioにOrderItemsテーブルを追加して。
       columns:id,order_id(FK→orders),product_id(FK→products),quantity,price

Claude:既存のER図を読み込んで更新します...
→er-diagram.drawioが更新されました（OrderItemsテーブルと外部キーリレーションを追加）