Next AI Draw.io

サンプル図とそのプロンプト

ここにある図は、どれも 1 つのプロンプトから描かれました。図を開いて拡大したり、プロンプトをコピーしたりできます。エディタを開くと、そのプロンプトがチャットの入力欄に入った状態になるので、手を加えてから送信できます。

どの図も Claude Code が MCP サーバーを通して描きました。使ったモデルはカードに書いてあります。サーバーの指示に従って、Claude Code は描いた結果のスクリーンショットを確認し、重なりを直しています。同じプロンプトでも描くたびに少しずつ違う図になり、ほかのモデルでは描き方も変わります。

  • クラウドとインフラClaude Opus 5.5

    Web ショップの Kubernetes デプロイ

    プロンプト: Draw a Kubernetes deployment for a web shop: an ingress, web and API deployments with their services and pods, a Redis StatefulSet with a persistent volume, a ConfigMap, a Secret, and an autoscaler on the API.

    このプロンプトを試す
  • ソフトウェア設計Claude Opus 5.5

    オンラインショップの ER 図

    プロンプト: Draw an ER diagram for an online shop: customers, addresses, orders, order items, products, categories and payments, with primary and foreign keys and the cardinality of each relationship.

    このプロンプトを試す
  • AI と研究Claude Opus 5.5

    アニメーション付きの Transformer 構成

    プロンプト: Give me an animated connector diagram of transformer's architecture.

    このプロンプトを試す
  • 業務フローClaude Opus 5.5

    BPMN の経費精算プロセス

    プロンプト: Draw a BPMN process for an expense claim: an employee submits it, the manager approves or rejects it, finance checks the receipts and pays, and the claim goes back to the employee when receipts are missing.

    このプロンプトを試す
  • クラウドとインフラClaude Opus 5.5

    AWS の高可用性 Web アプリ

    プロンプト: Draw an AWS architecture for a highly available web app across two Availability Zones with AWS icons: Route 53, CloudFront with AWS WAF, an Application Load Balancer, ECS Fargate services in private subnets, Aurora PostgreSQL with a writer and a reader, ElastiCache for Redis, S3 for static assets, NAT gateways, and CloudWatch for monitoring.

    このプロンプトを試す
  • 計画とビジネスClaude Opus 5.5

    製品ローンチのマインドマップ

    プロンプト: Draw a mind map for planning a product launch: goals, audience, messaging, channels, timeline, budget and metrics, each with a few ideas.

    このプロンプトを試す
  • ソフトウェア設計Claude Opus 5.5

    OAuth 2.0 PKCE ログインのシーケンス図

    プロンプト: Draw a sequence diagram of an OAuth 2.0 login with PKCE between the user, a browser app, the identity provider and an API.

    このプロンプトを試す
  • 計画とビジネスClaude Opus 5.5

    モバイルバンキングのカスタマージャーニーマップ

    プロンプト: Draw a customer journey map for a mobile banking app across five stages (discover, sign up, first payment, everyday use, get help), with the customer's actions, touchpoints, feelings and pain points in each stage, and an opportunity for each pain point.

    このプロンプトを試す
  • 計画とビジネスClaude Opus 5.5

    スタートアップの組織図

    プロンプト: Draw an org chart for a 25-person startup: the CEO, a CTO with two engineering teams, a head of product with designers, a head of sales with account executives, and operations.

    このプロンプトを試す
  • AI と研究Claude Opus 5.5

    チャットアプリの RAG 構成

    プロンプト: Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion

    このプロンプトを試す
  • クラウドとインフラClaude Opus 5.5

    Google Cloud のデータ分析パイプライン

    プロンプト: Draw a Google Cloud analytics pipeline with GCP icons: apps send events to Pub/Sub, Dataflow processes the stream, raw data lands in Cloud Storage, BigQuery is the warehouse, Vertex AI trains a model on it, Looker shows dashboards, and Cloud Composer runs the nightly batch jobs.

    このプロンプトを試す
  • 業務フローClaude Opus 5.5

    採用プロセスのスイムレーン図

    プロンプト: Draw a swimlane diagram of a hiring process across the candidate, the recruiter, the hiring manager and the interview panel, from application to offer.

    このプロンプトを試す
  • ソフトウェア設計Claude Opus 5.5

    図書館システムの UML クラス図

    プロンプト: Draw a UML class diagram for a library system: Book, Copy, Member, Loan, Reservation, Librarian and Fine, with their main attributes, methods and the relationships between them.

    このプロンプトを試す
  • 計画とビジネスClaude Opus 5.5

    12 週間のアプリ公開計画

    プロンプト: Draw a Gantt chart for a 12-week mobile app launch: discovery, design, three development sprints, beta testing, app store review and launch, with milestones.

    このプロンプトを試す
  • クラウドとインフラClaude Opus 5.5

    2 つの Azure リージョンで動く Web アプリ

    プロンプト: Draw an Azure architecture for a web app that runs in two regions, with Azure icons: Azure Front Door, App Service in each region, Azure SQL Database with geo-replication, Azure Cache for Redis, Blob Storage, Key Vault, sign-in with Microsoft Entra ID, and Application Insights.

    このプロンプトを試す
  • クラウドとインフラClaude Opus 5.5

    GitHub Actions の CI/CD パイプライン

    プロンプト: Draw a CI/CD pipeline with GitHub Actions: on a pull request run lint, unit tests and a security scan in parallel, build a Docker image, deploy to staging, wait for approval, then deploy to production on AWS, with a rollback path.

    このプロンプトを試す
  • ソフトウェア設計Claude Opus 5.5

    注文の状態遷移図

    プロンプト: Draw a state machine for an e-commerce order: created, payment pending, paid, packed, shipped, delivered, cancelled, refund requested and refunded, with the events between them.

    このプロンプトを試す
  • クラウドとインフラClaude Opus 5.5

    小規模オフィスのネットワーク

    プロンプト: Draw a network diagram of a small office with Cisco icons: the internet, a firewall, a router, a core switch, Wi-Fi access points, laptops, a file server, a printer and a separate guest VLAN.

    このプロンプトを試す
  • AI と研究Claude Opus 5.5

    ResNet50 のモデル構成

    プロンプト: Give me an animated architecture diagram of the ResNet50 model.

    このプロンプトを試す
  • 業務フローClaude Opus 5.5

    アジャイル Scrum のワークフロー

    プロンプト: Generate agile scrum workflow diagram for software development team.

    このプロンプトを試す
  • クラウドとインフラClaude Opus 5.5

    React と AWS のサーバーレス認証

    プロンプト: Generate authentication process using React with AWS. Use Serverless architecture.

    このプロンプトを試す
  • AI と研究Claude Opus 5.5

    論文を図にまとめる

    プロンプト: Summarize this paper as a diagram論文のファイルを添付

  • イラストClaude Opus 5.5

    図形で描いた猫

    プロンプト: Draw a cute cat for me.

    このプロンプトを試す

自分でプロンプトを書く

図に入れる要素を挙げる

「customers, addresses, orders, order items, products, categories and payments」

要素どうしのつながりを書く

「the manager approves or rejects it, finance checks the receipts and pays」

図の種類を書く

ER 図、シーケンス図、BPMN、スイムレーン、ガントチャート、カスタマージャーニーマップ。

アイコンは名前で指定する

必要なら AWS、Azure、GCP、Kubernetes、Cisco のアイコンを指定します。

依頼の書き方はドキュメントにもあります: