こんにちは！ABEJA でエンジニアとして活動している飯嶌です。今年の4月に新卒で入社しました！今回は技術設計やドキュメント作成を支援するAIツールである「Eraser AI」に関して、今まで個人利用で使ってきてその感想とその使い方に関してお話しできればと思います。
- Eraser AI とは : 自然言語プロンプトを使用して技術図解やドキュメントを生成できるAIツール
- Eraser AIの料金体系
- Eraser AIをより有効活用したい
- まとめ
- We Are Hiring!
Eraser AI とは : 自然言語プロンプトを使用して技術図解やドキュメントを生成できるAIツール
Eraser AIは、自然言語プロンプトを使用して技術図解やドキュメントを生成できるAIツールです。クラウドアーキテクチャ図やデータベース図などを自然言語を介して瞬時に作成できます。とはいっても図表作成は、mermaidが広く人気を集め利用されてきました。mermaidは、マークダウンライクな簡単な構文で様々な図表を作成できる強力なツールです。今では、LLMとmermaidを組み合わせることで、自然言語の入力からmermaidコードを生成し、図表を作成するというアプローチも考えられますね。
Eraser AI はそれと比べてどのようなメリットがあるのでしょうか。LLM と mermaidの組み合わせと比較しながら、Eraser AIの主要な特徴を見ていきましょう。
1. 図表生成：4つの種類の図表に対応
フローチャート、ER図、クラウドアーキテクチャ図、シーケンス図に対応しています。一方でmermaidは他の形式（ガントチャート、ユーザージャーニー図など）にも対応しているので、レパートリーという点ではmermaidに劣る面があるかもしれません。
2. 無限キャンバス：大規模設計も自由自在
制限のない広大な作業スペースを提供する無限キャンバス機能。大規模で複雑な図表の作成が可能になります。
企業全体のITインフラストラクチャを1つのキャンバス上に表現することも可能です。複雑なシステムの全体像を把握するのに役立ちます。mermaidでもMiroなどのキャンバスツールと組み合わせれば同様のことが可能ですが、Eraser AIではこの機能が統合されている点が強みです。
3. Diagram-as-code：バージョン管理が簡単に
図表をコードとして扱うDiagram-as-code機能により、バージョン管理や編集が容易になります。
- 図表をテキストベースのコードとして表現・管理
- バージョン管理が容易
- テキストエディタでの編集が可能
図表の変更履歴を追跡し、以前のバージョンに簡単にロールバックすることができます。この点はmermaidと共通する優れた機能です。
4. デザイン性：充実したアイコンやカラーリング
Eraser AIは、豊富なアイコンライブラリを提供し、プロフェッショナルな見た目の図表作成を可能にします。
- 多様なアイコンセットで視覚的に分かりやすい図表を作成
- カスタマイズ可能なカラースキームで図表デザインが可能
- 自動レイアウト調整機能で美しく整った図表を簡単に作成
これらの機能により、技術的な正確さと視覚的な魅力を兼ね備えた図表を作成できます。mermaid が主にシンプルなモノクロの図表に特化しているのに対し、Eraser AIはより豊かな表現力を提供します。プレゼンテーションや報告書用の洗練された図表作成が可能です。
Eraser AIの料金体系
Eraser AIは、ユーザーのニーズに合わせて複数の料金プランを提供しています。それぞれのプランの特徴を見ていきましょう。
1. Freeプラン：無料で始める図表作成
個人ユーザーや小規模チームに最適な無料プランです。
主な特徴：
- 5つまでのファイル作成
- 20回までのAI図表生成
- 無制限のゲスト招待
エクスポート形式： PNG, SVG, MD
バージョン履歴： 7日間
このプランは、Eraser AIの基本機能を試してみたい方や、occasional useの方に適しています。無料でありながら、AI図表生成やゲスト招待といった便利な機能が使えるのが魅力です。
2. Professionalプラン：プロフェッショナルのための高機能版
より高度な機能を求めるユーザーやチーム向けのプランです。
主な特徴：
- 無制限のファイル作成とAI図表生成
- カスタムアイコンの使用
- GitHubやNotionなどとのインテグレーション
- チームファイルと公開可能ファイルの作成
エクスポート形式： PDF, PNG, SVG, MD（Free プランよりも多様）
バージョン履歴： 90日間
Eraser API： 月200コール
Eraser AIをより有効活用したい
Eraser AIを無料版でも有効活用したいという方も多いかと思います。そこで、タイトルにもある通り、Eraser AIのポテンシャルを引き出すためにClaudeと組み合わせて使う方法を紹介します。
今回は、クラウドアーキテクチャ図を例に実際に作成してみましょう。まずはClaudeにEraserの使い方を理解してもらいます。プロンプトの作成には公式ドキュメントを参考にしました。
実際のプロンプトはこちらをクリックすると確認できます。
## 指示
以下のマニュアルと追加情報を参考に、Eraserの使い方をマスターしてください。
その後、私の指示に基づいてデータ処理の流れをクラウドアーキテクチャ図で記述してください。
わかったらOKと返してください。
## マニュアル
### 使用方法
1. 以下のステップに従って、クラウドアーキテクチャ図のコードを生成します。
2. 結論を急がず、段階的に思考過程を示しながら最終的なコードの生成を行ってください。
3. なるべく色やコメントを使ってユーザーが視覚的にわかりやすくなるようにしてください。
### ステップ1: 技術要件の定義
以下の点について簡潔に説明してください：
- システムの主要コンポーネント
- データの流れと主要な処理
- セキュリティ要件（ネットワーク分離、暗号化など）
- スケーラビリティとパフォーマンス要件
- 可用性と冗長性の要件
### ステップ2: Eraser構文の基本
1. ファイルの先頭に記述:
```
cloud-architecture-diagram
```
2. ノード（コンポーネント）の定義:
```
[ノード名] [プロパティ]
```
例: `EC2Instance [icon: aws-ec2]`
3. グループの定義:
```
[グループ名] {
[ノード1]
[ノード2]
}
```
例:
```
VPC {
PublicSubnet
PrivateSubnet
}
```
4. 接続の定義:
```
[ノード1] > [ノード2]
```
例: `LoadBalancer > EC2Instance`
5. プロパティ:
- `icon`: アイコン名（例: aws-ec2, aws-s3, azure-vm）
- `color`: 色名（例: blue）またはHEXコード（例: #000000）
- `label`: テキストラベル（スペースを含む場合は""で囲む）
- `styleMode`: スタイルモード（例: outlined）
- `colorMode`: カラーモード（例: accent）
例: `MainServer1 [icon: aws-ec2, color: blue, label: "main server"]`
6. 方向`の指定:
```
direction [方向]
```
方向: left, right, up, down
例: `direction right`
7. コメント:
`//` を使用してコメントを追加できます。
### ステップ3: アーキテクチャの作成
1. 主要コンポーネントの配置:
- システムの中心となる要素（例: EC2、RDS）を配置
- 例: `MainServer [icon: aws-ec2, label: "アプリケーションサーバー"]`
2. ネットワーク構造の定義:
- VPCとサブネットを使用して論理的な構造を作成
- 例:
```
VPC {
PublicSubnet {
MainServer
}
PrivateSubnet {
Database [icon: aws-rds, label: "メインDB"]
}
}
```
3. データフローの表現:
- コンポーネント間の接続を矢印で示す
- 例:
```
UserRequest > LoadBalancer
LoadBalancer > MainServer
MainServer > Database
```
4. 可視性の向上:
- 色とコメントを使用して重要な部分を強調
- 例: `MainServer [color: blue, label: "高負荷時に自動スケール"]`
- コメント例: `// 暗号化されたデータ転送`
5. レビューと調整:
- 全体を見直し、バランスと読みやすさを確認
- 必要に応じてレイアウトや接続を調整
準備ができたら、あなたの技術要件を説明してください。それに基づいて、技術的に正確で詳細なクラウドアーキテクチャ図のコードを生成します。
#### AWS Icons
aws-athena / aws-cloudsearch / aws-emr / aws-finspace / aws-kinesis / aws-kinesis-data-analytics / aws-kinesis-data-streams / aws-kinesis-firehose / aws-kinesis-video-streams / aws-managed-streaming-for-apache-kafka / aws-opensearch-service / aws-quicksight / aws-redshift / aws-data-exchange / aws-data-pipeline / aws-glue / aws-glue-databrew / aws-glue-elastic-views / aws-lake-formation / aws-api-gateway / aws-appflow / aws-eventbridge / aws-managed-workflows-for-apache-airflow / aws-mq / aws-simple-notification-service / aws-simple-queue-service / aws-appsync / aws-console-mobile-application / aws-express-workflows / aws-step-functions / aws-managed-blockchain / aws-quantum-ledger-database / aws-alexa-for-business / aws-chime / aws-chime-sdk / aws-chime-voice-connector / aws-connect / aws-honeycode / aws-pinpoint / aws-pinpoint-apis / aws-simple-email-service / aws-workdocs / aws-workdocs-sdk / aws-workmail / aws-application-cost-profiler / aws-billing-conductor / aws-budgets / aws-cost-and-usage-report / aws-cost-explorer / aws-reserved-instance-reporting / aws-savings-plans / aws-ec2 / aws-ec2-auto-scaling / aws-ec2-image-builder / aws-ec2-m5n / aws-ec2-r5n / aws-elastic-container-kubernetes / aws-elastic-container-registry / aws-elastic-container-service / aws-genomics-cli / aws-lightsail / aws-app-runner / aws-batch / aws-compute-optimizer / aws-elastic-beanstalk / aws-fargate / aws-lambda / aws-local-zones / aws-nitro-enclaves / aws-outposts-family / aws-outposts-rack / aws-outposts-servers / aws-parallelcluster / aws-serverless-application-repository / aws-thinkbox-deadline / aws-thinkbox-frost / aws-thinkbox-krakatoa / aws-thinkbox-sequoia / aws-thinkbox-stoke / aws-thinkbox-xmesh / aws-wavelength / aws-bottlerocket / aws-elastic-fabric-adapter / aws-nice-dcv / aws-nice-enginframe / aws-vmware-cloud-on-aws / aws-ecs-anywhere / aws-eks-anywhere / aws-eks-cloud / aws-eks-distro / aws-elastic-kubernetes-service / aws-red-hat-openshift / aws-activate / aws-iq / aws-managed-services / aws-professional-services / aws-repost / aws-support / aws-training-certification / aws-aurora / aws-documentdb / aws-dynamodb / aws-elasticache / aws-keyspaces / aws-memorydb-for-redis / aws-neptune / aws-rds / aws-rds-on-vmware / aws-timestream / aws-database-migration-service / aws-corretto / aws-cloud-control-api / aws-cloud-development-kit / aws-cloud9 / aws-cloudshell / aws-codeartifact / aws-codebuild / aws-codecommit / aws-codedeploy / aws-codepipeline / aws-codestar / aws-command-line-interface / aws-tools-and-sdks / aws-x-ray / aws-appstream / aws-worklink / aws-workspaces / aws-workspaces-web / aws-location-service / aws-amplify / aws-device-farm / aws-gamelift / aws-gamesparks / aws-gamekit / aws-open-3d-engine / aws-marketplace / aws-iot-1-click / aws-iot-analytics / aws-iot-button / aws-iot-core / aws-iot-device-defender / aws-iot-device-management / aws-iot-edukit / aws-iot-events / aws-iot-expresslink / aws-iot-fleetwise / aws-iot-greengrass / aws-iot-roborunner / aws-iot-sitewise / aws-iot-things-graph / aws-iot-twinmaker / aws-freertos / aws-augmented-ai-a2i / aws-codeguru / aws-codewhisperer / aws-comprehend / aws-comprehend-medical / aws-devops-guru / aws-elastic-inference / aws-forecast / aws-fraud-detector / aws-healthlake / aws-kendra / aws-lex / aws-lookout-for-equipment / aws-lookout-for-metrics / aws-lookout-for-vision / aws-monitron / aws-personalize / aws-polly / aws-rekognition / aws-sagemaker / aws-sagemaker-ground-truth / aws-sagemaker-studio-lab / aws-textract / aws-transcribe / aws-translate / aws-apache-mxnet-on-aws / aws-deep-learning-amis / aws-deep-learning-containers / aws-deepcomposer / aws-deeplens / aws-deepracer / aws-neuron / aws-panorama / aws-tensorflow-on-aws / aws-torchserve / aws-cloudwatch / aws-managed-grafana / aws-managed-service-for-prometheus / aws-appconfig / aws-application-auto-scaling / aws-auto-scaling / aws-backint-agent / aws-chatbot / aws-cloudformation / aws-cloudtrail / aws-config / aws-control-tower / aws-distro-for-opentelemetry / aws-fault-injection-simulator / aws-launch-wizard / aws-license-manager / aws-management-console / aws-opsworks / aws-organizations / aws-personal-health-dashboard / aws-proton / aws-resilience-hub / aws-service-catalog / aws-systems-manager / aws-systems-manager-incident-manager / aws-trusted-advisor / aws-well-architected-tool / aws-elastic-transcoder / aws-interactive-video-service / aws-nimble-studio / aws-elemental-appliances-&-software / aws-elemental-conductor / aws-elemental-delta / aws-elemental-link / aws-elemental-live / aws-elemental-mediaconnect / aws-elemental-mediaconvert / aws-elemental-medialive / aws-elemental-mediapackage / aws-elemental-mediastore / aws-elemental-mediatailor / aws-elemental-server / aws-application-discovery-service / aws-application-migration-service / aws-datasync / aws-mainframe-modernization / aws-migration-evaluator / aws-migration-hub / aws-server-migration-service / aws-transfer-family / aws-cloud-directory / aws-cloudfront / aws-route-53 / aws-virtual-private-cloud / aws-app-mesh / aws-client-vpn / aws-cloud-map / aws-cloud-wan / aws-direct-connect / aws-global-accelerator / aws-private-5g / aws-privatelink / aws-site-to-site-vpn / aws-transit-gateway / aws-elastic-load-balancing / aws-braket / aws-robomaker / aws-ground-station / aws-cognito / aws-detective / aws-guardduty / aws-inspector / aws-macie / aws-artifact / aws-audit-manager / aws-certificate-manager / aws-cloudhsm / aws-directory-service / aws-firewall-manager / aws-iam-identity-center / aws-identity-and-access-management / aws-key-management-service / aws-network-firewall / aws-resource-access-manager / aws-secrets-manager / aws-security-hub / aws-shield / aws-signer / aws-waf / aws-efs / aws-elastic-block-store / aws-fsx / aws-fsx-for-lustre / aws-fsx-for-netapp-ontap / aws-fsx-for-openzfs / aws-fsx-for-wfs / aws-s3-on-outposts / aws-simple-storage-service / aws-simple-storage-service-glacier / aws-backup / aws-snowball / aws-snowball-edge / aws-snowcone / aws-snowmobile / aws-storage-gateway / aws-cloudendure-disaster-recovery / aws-sumerian / aws-analytics / aws-application-integration / aws-blockchain / aws-business-applications / aws-cloud-financial-management / aws-compute / aws-containers / aws-customer-enablement / aws-database / aws-developer-tools / aws-end-user-computing / aws-front-end-web-mobile / aws-game-tech / aws-internet-of-things / aws-machine-learning / aws-management-governance / aws-media-services / aws-migration-transfer / aws-networking-content-delivery / aws-quantum-technologies / aws-robotics / aws-satellite / aws-security-identity-compliance / aws-serverless / aws-storage / aws-vr-ar
#### Google Cloud Icons
gcp-access-context-manager / gcp-administration / gcp-advanced-agent-modeling / gcp-advanced-solutions-lab / gcp-agent-assist / gcp-ai-hub / gcp-ai-platform-unified / gcp-ai-platform / gcp-analytics-hub / gcp-anthos-config-management / gcp-anthos-service-mesh / gcp-anthos / gcp-api-analytics / gcp-api-monetization / gcp-api / gcp-apigee-api-platform / gcp-apigee-sense / gcp-app-engine / gcp-artifact-registry / gcp-asset-inventory / gcp-assured-workloads / gcp-automl-natural-language / gcp-automl-tables / gcp-automl-translation / gcp-automl-video-intelligence / gcp-automl-vision / gcp-automl / gcp-bare-metal-solutions / gcp-batch / gcp-beyondcorp / gcp-bigquery / gcp-bigtable / gcp-billing / gcp-binary-authorization / gcp-catalog / gcp-certificate-authority-service / gcp-certificate-manager / gcp-cloud-api-gateway / gcp-cloud-apis / gcp-cloud-armor / gcp-cloud-asset-inventory / gcp-cloud-audit-logs / gcp-cloud-build / gcp-cloud-cdn / gcp-cloud-code / gcp-cloud-composer / gcp-cloud-data-fusion / gcp-cloud-deploy / gcp-cloud-deployment-manager / gcp-cloud-dns / gcp-cloud-domains / gcp-cloud-ekm / gcp-cloud-endpoints / gcp-cloud-external-ip-addresses / gcp-cloud-firewall-rules / gcp-cloud-for-marketing / gcp-cloud-functions / gcp-cloud-generic / gcp-cloud-gpu / gcp-cloud-healthcare-api / gcp-cloud-healthcare-marketplace / gcp-cloud-hsm / gcp-cloud-ids / gcp-cloud-inference-api / gcp-cloud-interconnect / gcp-cloud-jobs-api / gcp-cloud-load-balancing / gcp-cloud-logging / gcp-cloud-media-edge / gcp-cloud-monitoring / gcp-cloud-nat / gcp-cloud-natural-language-api / gcp-cloud-network / gcp-cloud-ops / gcp-cloud-optimization-ai---fleet-routing-api / gcp-cloud-optimization-ai / gcp-cloud-router / gcp-cloud-routes / gcp-cloud-run-for-anthos / gcp-cloud-run / gcp-cloud-scheduler / gcp-cloud-security-scanner / gcp-cloud-shell / gcp-cloud-spanner / gcp-cloud-sql / gcp-cloud-storage / gcp-cloud-tasks / gcp-cloud-test-lab / gcp-cloud-tpu / gcp-cloud-translation-api / gcp-cloud-vision-api / gcp-cloud-vpn / gcp-compute-engine / gcp-configuration-management / gcp-connectivity-test / gcp-connectors / gcp-contact-center-ai / gcp-container-optimized-os / gcp-container-registry / gcp-data-catalog / gcp-data-labeling / gcp-data-layers / gcp-data-loss-prevention-api / gcp-data-qna / gcp-data-studio / gcp-data-transfer / gcp-database-migration-service / gcp-dataflow / gcp-datalab / gcp-dataplex / gcp-datapol / gcp-dataprep / gcp-dataproc-metastore / gcp-dataproc / gcp-datashare / gcp-datastore / gcp-datastream / gcp-debugger / gcp-developer-portal / gcp-dialogflow-cx / gcp-dialogflow-insights / gcp-dialogflow / gcp-document-ai / gcp-early-access-center / gcp-error-reporting / gcp-eventarc / gcp-filestore / gcp-financial-services-marketplace / gcp-firestore / gcp-fleet-engine / gcp-free-trial / gcp-game-servers / gcp-gce-systems-management / gcp-genomics / gcp-gke-on-prem / gcp-google-cloud-marketplace / gcp-google-kubernetes-engine / gcp-google-maps-platform / gcp-healthcare-nlp-api / gcp-home / gcp-identity-and-access-management / gcp-identity-platform / gcp-identity-aware-proxy / gcp-iot-core / gcp-iot-edge / gcp-key-access-justifications / gcp-key-management-service / gcp-kuberun / gcp-launcher / gcp-local-ssd / gcp-looker / gcp-managed-service-for-microsoft-active-directory / gcp-media-translation-api / gcp-memorystore / gcp-migrate-for-anthos / gcp-migrate-for-compute-engine / gcp-my-cloud / gcp-network-connectivity-center / gcp-network-intelligence-center / gcp-network-security / gcp-network-tiers / gcp-network-topology / gcp-onboarding / gcp-os-configuration-management / gcp-os-inventory-management / gcp-os-patch-management / gcp-partner-interconnect / gcp-partner-portal / gcp-performance-dashboard / gcp-permissions / gcp-persistent-disk / gcp-phishing-protection / gcp-policy-analyzer / gcp-premium-network-tier / gcp-private-connectivity / gcp-private-service-connect / gcp-producer-portal / gcp-profiler / gcp-project / gcp-pubsub / gcp-quantum-engine / gcp-quotas / gcp-real-world-insights / gcp-recommendations-ai / gcp-release-notes / gcp-retail-api / gcp-risk-manager / gcp-runtime-config / gcp-secret-manager / gcp-security-command-center / gcp-security-health-advisor / gcp-security-key-enforcement / gcp-security / gcp-service-discovery / gcp-speech-to-text / gcp-stackdriver / gcp-standard-network-tier / gcp-stream-suite / gcp-support / gcp-tensorflow-enterprise / gcp-text-to-speech / gcp-tools-for-powershell / gcp-trace / gcp-traffic-director / gcp-transfer-appliance / gcp-transfer / gcp-user-preferences / gcp-vertexai / gcp-video-intelligence-api / gcp-virtual-private-cloud / gcp-visual-inspection / gcp-vmware-engine / gcp-web-risk / gcp-web-security-scanner / gcp-workflows / gcp-workload-identity-pool
#### Azure Icons
azure-batch-ai / azure-machine-learning-studio-(classic)-web-services / azure-genomics / azure-translator-text / azure-experimentation-studio / azure-object-understanding / azure-cognitive-services / azure-genomics-accounts / azure-bot-services / azure-machine-learning / azure-machine-learning-studio-workspaces / azure-machine-learning-studio-web-service-plans / azure-applied-ai / azure-language-services / azure-log-analytics-workspaces / azure-event-hubs / azure-stream-analytics-jobs / azure-endpoint-analytics / azure-synapse-analytics / azure-workbooks / azure-hd-insight-clusters / azure-data-lake-analytics / azure-analysis-services / azure-event-hub-clusters / azure-data-lake-store-gen1 / azure-databricks / azure-app-service-plans / azure-app-service-certificates / azure-app-service-domains / azure-cdn-profiles / azure-app-services / azure-api-management-services / azure-search-services / azure-notification-hubs / azure-app-service-environments / azure-collaborative-service / azure-applens / azure-hybrid-center / azure-multi-tenancy / azure-infrastructure-backup / azure-capacity / azure-offers / azure-user-subscriptions / azure-plans / azure-stack / azure-updates / azure-avs / azure-blockchain-applications / azure-outbound-connection / azure-blockchain-service / azure-token-service / azure-abs-member / azure-consortium / azure-maintenance-configuration / azure-disk-encryption-sets / azure-workspaces / azure-automanaged-vm / azure-managed-service-fabric / azure-metrics-advisor / azure-image-templates / azure-restore-points / azure-restore-points-collections / azure-compute-galleries / azure-virtual-machine / azure-kubernetes-services / azure-mesh-applications / azure-availability-sets / azure-disks-snapshots / azure-os-images-(classic) / azure-virtual-machines-(classic) / azure-function-apps / azure-cloud-services-(classic) / azure-batch-accounts / azure-disks / azure-images / azure-vm-scale-sets / azure-service-fabric-clusters / azure-image-definitions / azure-image-versions / azure-shared-image-galleries / azure-vm-images-(classic) / azure-disks-(classic) / azure-container-services-(deprecated) / azure-container-instances / azure-host-groups / azure-hosts / azure-spring-cloud / azure-container-registries / azure-sql-data-warehouses / azure-sql / azure-ssis-lift-and-shift-ir / azure-purview-accounts / azure-sql-edge / azure-database-postgresql-server-group / azure-cosmos-db / azure-database-mysql-server / azure-database-mariadb-server / azure-sql-vm / azure-data-factory / azure-virtual-clusters / azure-elastic-job-agents / azure-sql-database / azure-database-postgresql-server / azure-sql-server / azure-database-migration-services / azure-sql-elastic-pools / azure-managed-database / azure-sql-managed-instance / azure-sql-server-stretch-databases / azure-cache-redis / azure-instance-pools / azure-data-explorer-clusters / azure-sql-server-registries / azure-application-insights / azure-cloudtest / azure-devops / azure-devtest-labs / azure-lab-services / azure-cost-management-and-billing / azure-preview-features / azure-all-resources / azure-subscriptions / azure-reservations / azure-service-health / azure-information / azure-recent / azure-resource-groups / azure-marketplace / azure-templates / azure-quickstart-center / azure-management-groups / azure-help-and-support / azure-tag / azure-dashboard / azure-free-services / azure-cost-management / azure-region-management / azure-troubleshoot / azure-resource-explorer / azure-biz-talk / azure-blob-block / azure-blob-page / azure-branch / azure-browser / azure-bug / azure-builds / azure-cache / azure-code / azure-commit / azure-controls / azure-controls-horizontal / azure-cost-alerts / azure-cost-analysis / azure-cost-budgets / azure-counter / azure-cubes / azure-dev-console / azure-download / azure-error / azure-extensions / azure-file / azure-files / azure-folder-blank / azure-folder-website / azure-ftp / azure-gear / azure-globe-error / azure-globe-success / azure-globe-warning / azure-guide / azure-heart / azure-image / azure-input-output / azure-journey-hub / azure-launch-portal / azure-learn / azure-load-test / azure-location / azure-log-streaming / azure-management-portal / azure-media-file / azure-mobile / azure-mobile-engagement / azure-power / azure-powershell / azure-power-up / azure-preview / azure-process-explorer / azure-production-ready-database / azure-resource-group-list / azure-resource-linked / azure-scale / azure-scheduler / azure-search / azure-server-farm / azure-ssd / azure-storage-azure-files / azure-storage-container / azure-storage-queue / azure-table / azure-tags / azure-tfs-vc-repository / azure-toolbox / azure-versions / azure-website-power / azure-website-staging / azure-web-slots / azure-web-test / azure-workflow / azure-backlog / azure-media / azure-module / azure-search-grid / azure-verifiable-credentials / azure-pim / azure-tenant-properties / azure-custom-azure-ad-roles / azure-aad-licenses / azure-active-directory / azure-ad-domain-services / azure-groups / azure-active-directory-connect-health / azure-enterprise-applications / azure-managed-identities / azure-ad-b2c / azure-information-protection / azure-users / azure-ad-identity-protection / azure-app-registrations / azure-ad-privilege-identity-management / azure-identity-governance / azure-integration-service-environments / azure-partner-topic / azure-system-topic / azure-partner-registration / azure-partner-namespace / azure-logic-apps / azure-event-grid-topics / azure-relays / azure-api-for-fhir / azure-software-as-a-service / azure-event-grid-domains / azure-data-catalog / azure-integration-accounts / azure-app-configuration / azure-sendgrid-accounts / azure-event-grid-subscriptions / azure-logic-apps-custom-connector / azure-service-bus / azure-time-series-insights-access-policies / azure-device-security-apple / azure-device-security-google / azure-device-security-windows / azure-intune / azure-ebooks / azure-client-apps / azure-devices / azure-device-compliance / azure-software-updates / azure-security-baselines / azure-device-enrollment / azure-device-configuration / azure-exchange-access / azure-ad-roles-and-administrators / azure-tenant-status / azure-intune-for-education / azure-intune-app-protection / azure-mindaro / azure-digital-twins / azure-industrial-iot / azure-time-series-insights-environments / azure-iot-hub / azure-iot-central-applications / azure-maps-accounts / azure-iot-edge / azure-time-series-insights-event-sources / azure-time-series-data-sets / azure-windows10-core-services / azure-device-provisioning-services / azure-monitor / azure-alerts / azure-advisor / azure-blueprints / azure-activity-log / azure-diagnostics-settings / azure-scheduler-job-collections / azure-compliance / azure-my-customers / azure-recovery-services-vaults / azure-metrics / azure-solutions / azure-automation-accounts / azure-operation-log-(classic) / azure-service-providers / azure-education / azure-service-catalog-mad / azure-lighthouse / azure-universal-print / azure-arc / azure-user-privacy / azure-managed-desktop / azure-managed-applications-center / azure-customer-lockbox-for-microsoft-azure / azure-policy / azure-resource-graph-explorer / azure-machinesazurearc / azure-keys / azure-data-box / azure-data-box-edge / azure-migrate / azure-remote-rendering / azure-spatial-anchor-accounts / azure-sap-azure-monitor / azure-firewall-manager / azure-private-link / azure-ip-groups / azure-private-link-service / azure-resource-management-private-link / azure-private-link-hub / azure-load-balancer-hub / azure-bastions / azure-virtual-router / azure-spot-vmss / azure-spot-vm / azure-dns-private-resolver / azure-virtual-networks / azure-load-balancers / azure-virtual-network-gateways / azure-dns-zones / azure-traffic-manager-profiles / azure-network-watcher / azure-network-security-groups / azure-public-ip-addresses-(classic) / azure-public-ip-addresses / azure-on-premises-data-gateways / azure-route-filters / azure-ddos-protection-plans / azure-front-doors / azure-virtual-networks-(classic) / azure-application-gateways / azure-local-network-gateways / azure-expressroute-circuits / azure-network-interfaces / azure-connections / azure-route-tables / azure-firewalls / azure-service-endpoint-policies / azure-nat / azure-virtual-wans / azure-web-application-firewall-policies(waf) / azure-proximity-placement-groups / azure-reserved-ip-addresses-(classic) / azure-public-ip-prefixes / azure-intune-trends / azure-dashboard-hub / azure-avs-vm / azure-network-manager / azure-dedicated-hsm / azure-modular-data-center / azure-api-proxy / azure-fiji / azure-monitor-dashboard / azure-support-center-blue / azure-connected-cache / azure-web-app-+-database / azure-hpc-workbench / azure-connected-vehicle-platform / azure-aquila / azure-reserved-capacity / azure-custom-ip-prefix / azure-confidential-ledger / azure-reserved-capacity-groups / azure-windows-notification-services / azure-mission-landing-zone / azure-private-mobile-network / azure-vm-application-definition / azure-vm-application-version / azure-edge-hardware-center / azure-ceres / azure-azurite / azure-update-center / azure-image-definition / azure-image-version / azure-savings-plan / azure-worker-container-app / azure-grafana / azure-storage-tasks / azure-sonic-dash / azure-compliance-center / azure-load-testing / azure-acs-solutions-builder / azure-container-app-environments / azure-marketplace-management / azure-edge-management / azure-sphere / azure-exchange-on-premises-access / azureattestation / azure-web-jobs / azure-windows-virtual-desktop / azure-ssh-keys / azure-internet-analyzer-profiles / azure-cloud-shell / azure-expressroute-direct / azure-communication-services / azure-peering-service / azure-resource-mover / azure-chaos-studio / azure-template-specs / azure-backup-center / azure-device-update-iot-hub / azure-cloud-services-(extended-support) / azure-disk-pool / azure-bare-metal-infrastructure / azure-open-supply-chain-platform / azure-managed-instance-apache-cassandra / azure-test-base / azure-orbital / azure-network-function-manager / azure-quotas / azure-wac / azure-rtos / azure-detonation / azure-defender / azure-conditional-access / azure-security-center / azure-application-security-groups / azure-key-vaults / azure-sentinel / azure-extendedsecurityupdates / azure-stack-edge / azure-hcp-cache / azure-storage-accounts / azure-storage-accounts-(classic) / azure-storsimple-device-managers / azure-data-lake-storage-gen1 / azure-storage-explorer / azure-storsimple-data-managers / azure-storage-sync-services / azure-netapp-files / azure-data-share-invitations / azure-data-shares / azure-import-export-jobs / azure-fileshare / azure-static-apps / azure-api-connections / azure-signalr / azure-notification-hub-namespaces / azure-media-service
#### Kubernetes Icons
k8s-kubernetes Kubernetes / k8s-api API server / k8s-c-c-m Cloud controller manager / k8s-c-m Controller manager / k8s-k-proxy Kubernetes proxy / k8s-kubelet Kubelet / k8s-sched Scheduler / k8s-control-plane Control plane / k8s-node Node / k8s-etcd etcd / k8s-c-role ClusterRole / k8s-cm ConfigMap / k8s-crb ClusterRoleBinding / k8s-crd CustomRoleDefinition / k8s-cronjob CronJob / k8s-deploy Deployment / k8s-ds DaemonSet / k8s-ep Endpoint / k8s-group Group / k8s-hpa HorizontalPodAutoscaler / k8s-ing Ingress / k8s-job Job / k8s-limits Limits / k8s-netpol Network policy / k8s-ns Namespace / k8s-pod Pod / k8s-psp PodSecurityPolicy / k8s-pv PersistentVolume / k8s-pvc PersistentVolumeClaim / k8s-quota Quota / k8s-rb RoleBinding / k8s-role Role / k8s-rs ReplicaSet / k8s-sa ServiceAccount / k8s-sc StorageClass / k8s-secret Secret / k8s-sts StatefulSet / k8s-svc Service / k8s-user User / k8s-vol Volume
#### Tech Logos
adobe / airflow / airplay-audio / airplay-video / algolia / alibaba-cloud / alibaba / alipay / amazon / alexa / api-gateway / aws / cloudwatch / dynamodb / rds / s3 / sqs / amp / android / angular / ant / apache / cassandra / cloudstack / cordova / couchdb / druid / echarts / flink / groovy / hadoop / hive / kafka / kylin / maven / pulsar / rocketmq / solr / spark / tomcat / apollo-graphql / apple / apple-pay / apple-podcasts / app-store / arduino / assemblyscript / atlassian / auth0 / authy / babel / bitcoin / bluetooth / bootstrap / box / brave / bytedance / chromecast / circleci / clojure / cloudflare / cockroach-labs / codepen / codesandbox / coffeescript / confluence / couchbase / cpanel / css3 / cypress / dart / databricks / datadog / dbt / debian / deno / discord / django / docker / dot-net / dropbox / drupal / dynamics-365 / eclipse-ide / elastic / elasticsearch / electron / elixir / eslint / ethereum / facebook / fastly / figma / firebase / firefox / flask / flutter / gatsby / git / github / github-actions / gitlab / gmail / gnome / gnu / gnu-bash / gnu-emacs / go / google / google-analytics / google-calendar / chrome / google-cloud / google-drive / google-maps / google-meet / google-sheets / google-tag-manager / grafana / graphql / haskell / hasura / heroku / homebrew / html5 / hubspot / ibm / ibm-cloud / ibm-watson / instagram / intellij-idea / intercom / internet-explorer / ios / jamstack / javascript / jekyll / jenkins / jest / jetbrains / jira / jquery / json / jupyter / kibana / kotlin / kubernetes / laravel / linkedin / linux / lodash / looker / loom / magento / mapbox / mariadb / markdown / marketo / messenger / meta / meteor / microsoft / access / azure / bing / edge / excel / exchange / office / outlook / powerpoint / sharepoint / sql-server / teams / word / mongodb / mozilla / mysql / neo4j / netlify / next / nginx / nintendo / node / npm / oculus / okta / oracle / perl / php / playstation / postgres / postman / power-bi / powershell / prisma / pulumi / puppeteer / python / pytorch / rabbitmq / railway / raspberry-pi / react / red-hat / redis / redux / rss / rstudio / ruby-on-rails / rust / safari / salesforce / sap / scala / sentry / shopify / slack / snowflake / splunk / sqlite / square / stripe / svelte / swagger / swift / tableau / tencent-qq / tensorflow / terraform / typescript / ubuntu / unity / vercel / vs-code / vite / vue / webassembly / webflow / webgl / webpack / webrtc / wechat / whatsapp / windows / wordpress / xbox / youtube / zendesk / zoom
#### General icons
activity / airplay / alert-circle / alert-octagon / alert-triangle / align-center / align-justify / align-left / align-right / anchor / aperture / archive / arrow-down-circle / arrow-down-left / arrow-down-right / arrow-down / arrow-left-circle / arrow-left / arrow-right-circle / arrow-right / arrow-up-circle / arrow-up-left / arrow-up-right / arrow-up / at-sign / award / bar-chart-2 / bar-chart / battery-charging / battery / bell-off / bell / bold / book-open / book / bookmark / briefcase / calendar / camera-off / camera / cast / check-circle / check-square / check / chevron-down / chevron-left / chevron-right / chevron-up / chevrons-down / chevrons-left / chevrons-right / chevrons-up / circle / clipboard / clock / cloud-drizzle / cloud-lightning / cloud-off / cloud-rain / cloud-snow / cloud / code / coffee / columns / command / compass / copy / corner-down-left / corner-down-right / corner-left-down / corner-left-up / corner-right-down / corner-right-up / corner-up-left / corner-up-right / cpu / credit-card / crop / crosshair / database / delete / disc / divide-circle / divide-square / divide / dollar-sign / download-cloud / download / dribbble / droplet / edit-2 / edit-3 / edit / external-link / eye-off / eye / fast-forward / feather / file-minus / file-plus / file-text / file / film / filter / flag / folder-minus / folder-plus / folder / framer / frown / gift / git-branch / git-commit / git-merge / git-pull-request / globe / grid / hard-drive / hash / headphones / heart / help-circle / hexagon / home / image / inbox / info / italic / key / layers / layout / life-buoy / link-2 / link / list / loader / lock / log-in / log-out / mail / map-pin / map / maximize-2 / maximize / meh / menu / message-circle / message-square / mic-off / mic / minimize-2 / minimize / minus-circle / minus-square / minus / monitor / moon / more-horizontal / more-vertical / mouse-pointer / move / music / navigation-2 / navigation / octagon / package / paperclip / pause-circle / pause / pen-tool / percent / phone-call / phone-forwarded / phone-incoming / phone-missed / phone-off / phone-outgoing / phone / pie-chart / play-circle / play / plus-circle / plus-square / plus / pocket / power / printer / radio / refresh-ccw / refresh-cw / repeat / rewind / rotate-ccw / rotate-cw / save / scissors / search / send / server / settings / share-2 / share / shield-off / shield / shopping-bag / shopping-cart / shuffle / sidebar / skip-back / skip-forward / slash / sliders / smartphone / smile / speaker / star / stop-circle / sun / sunrise / sunset / tablet / tag / target / terminal / thermometer / thumbs-down / thumbs-up / toggle-left / toggle-right / tool / trash-2 / trash / trello / trending-down / trending-up / triangle / truck / tv / twitch / twitter / type / umbrella / underline / unlock / upload-cloud / upload / user-check / user-minus / user-plus / user-x / user / users / video-off / video / voicemail / volume-1 / volume-2 / volume-x / volume / watch / wifi-off / wifi / wind / x-circle / x-octagon / x-square / x / zap-off / zap / zoom-in / zoom-out
こちらのプロンプトでは、以下の点を意識しました。
- 詳細な技術情報: Eraserの構文や使用方法について、具体的な例を交えて詳細に説明する。加えて、コードブロックを使用して、構文の例を分かりやすく提示する。
- 段階的な思考プロセス: 結論を急がず、段階的に思考過程を示すよう指示する。これにより、出力の精度が向上する。
他にも、調整することによってこちらのプロンプトの精度をより良くする余地もあるかと思います。
次に、Claudeに生成してほしいコンテンツをリクエストします。今回は「kubernetesの仕組み」をテーマに依頼してみましょう。数回のチャットで調整しながら次のような図が作成できました。
実際のチャットはこちらをクリックすると確認できます。
Claude: OK、理解しました。Eraserを使ってクラウドアーキテクチャ図を作成する準備ができています。技術要件の説明をお待ちしています。
User: それではKubernetesの基本の解説図を記載して欲しいです。
Claude: はい、承知しました。Kubernetesの基本構造を解説する図を作成していきます。まず、技術要件を定義し、その後でEraserを使ってアーキテクチャ図のコードを生成していきます。
ステップ1: 技術要件の定義
1. システムの主要コンポーネント:
- Kubernetesクラスター
- マスターノード（コントロールプレーン）
- ワーカーノード
- ポッド
- サービス
- Ingress
2. データの流れと主要な処理:
- 外部からのリクエストがIngressを通じてサービスに到達
- サービスがポッドにトラフィックを分散
- マスターノードがクラスター全体を管理
3. セキュリティ要件:
- クラスター内の通信の暗号化（簡略化のため図では省略）
4. スケーラビリティとパフォーマンス要件:
- ポッドの複数レプリカを示す
5. 可用性と冗長性の要件:
- 複数のワーカーノードを示す
これらの要件に基づいて、Kubernetesの基本構造を表現するアーキテクチャ図を作成していきます。
ステップ2・3: Eraser構文を使用したアーキテクチャの作成
それでは、Eraserの構文を使用してKubernetesの基本アーキテクチャ図のコードを生成します。
```
cloud-architecture-diagram
// 全体の方向を右向きに設定
direction right
// Kubernetesクラスターの定義
KubernetesCluster [icon: k8s-kubernetes, label: "Kubernetes Cluster", color: #326CE5] {
// マスターノード（コントロールプレーン）の定義
MasterNode [icon: k8s-control-plane, label: "Master Node", color: #326CE5] {
APIServer [icon: k8s-api, label: "API Server"]
Scheduler [icon: k8s-sched, label: "Scheduler"]
ControllerManager [icon: k8s-c-m, label: "Controller Manager"]
Etcd [icon: k8s-etcd, label: "etcd"]
}
// ワーカーノードの定義
WorkerNode1 [icon: k8s-node, label: "Worker Node 1", color: #326CE5] {
Kubelet1 [icon: k8s-kubelet, label: "Kubelet"]
KubeProxy1 [icon: k8s-k-proxy, label: "Kube Proxy"]
Pod1 [icon: k8s-pod, label: "Pod"]
Pod2 [icon: k8s-pod, label: "Pod"]
}
WorkerNode2 [icon: k8s-node, label: "Worker Node 2", color: #326CE5] {
Kubelet2 [icon: k8s-kubelet, label: "Kubelet"]
KubeProxy2 [icon: k8s-k-proxy, label: "Kube Proxy"]
Pod3 [icon: k8s-pod, label: "Pod"]
Pod4 [icon: k8s-pod, label: "Pod"]
}
// サービスとIngressの定義
Service [icon: k8s-svc, label: "Service", color: #FFA630]
Ingress [icon: k8s-ing, label: "Ingress", color: #FF4F8B]
}
// 外部ユーザーの定義
ExternalUser [icon: user, label: "External User"]
// コンポーネント間の接続
ExternalUser > Ingress
Ingress > Service
Service > Pod1
Service > Pod2
Service > Pod3
Service > Pod4
MasterNode > WorkerNode1
MasterNode > WorkerNode2
// コメントの追加
// Kubernetesクラスターの基本構造
// マスターノードがクラスター全体を管理
// ワーカーノードでポッドが実行される
// Ingressが外部からのトラフィックをサービスにルーティング
// サービスがポッドにトラフィックを分散
```
この図は以下の特徴を持っています：
1. Kubernetesクラスター全体を表現し、その中にマスターノードとワーカーノードを配置しています。
2. マスターノード（コントロールプレーン）には主要なコンポーネント（APIサーバー、スケジューラー、コントローラーマネージャー、etcd）を含めています。
3. 2つのワーカーノードを示し、各ノードにKubelet、Kube Proxy、そして複数のポッドを配置しています。
4. サービスとIngressを使用して、外部からのトラフィックがどのようにポッドに到達するかを示しています。
5. コンポーネント間の接続を矢印で表現し、データの流れを示しています。
6. 色を使用して異なるコンポーネントを区別しやすくしています。
7. コメントを追加して、図の主要な特徴を説明しています。
この図は、Kubernetesの基本的な構造と主要コンポーネントの関係を視覚的に表現しています。ユーザーはこの図を通じて、外部リクエストがどのようにKubernetesクラスター内のポッドに到達するか、そしてマスターノードがどのようにクラスター全体を管理しているかを理解することができます。
User: 色をカラーコードで指定する場合は""で囲う必要があります。
Claude: ご指摘ありがとうございます。その通りですね。カラーコードを正しく指定するために、修正したバージョンのコードを提供いたします。
```
cloud-architecture-diagram
// 全体の方向を右向きに設定
direction right
// Kubernetesクラスターの定義
KubernetesCluster [icon: k8s-kubernetes, label: "Kubernetes Cluster", color: "#326CE5"] {
// マスターノード（コントロールプレーン）の定義
MasterNode [icon: k8s-control-plane, label: "Master Node", color: "#326CE5"] {
APIServer [icon: k8s-api, label: "API Server"]
Scheduler [icon: k8s-sched, label: "Scheduler"]
ControllerManager [icon: k8s-c-m, label: "Controller Manager"]
Etcd [icon: k8s-etcd, label: "etcd"]
}
// ワーカーノードの定義
WorkerNode1 [icon: k8s-node, label: "Worker Node 1", color: "#326CE5"] {
Kubelet1 [icon: k8s-kubelet, label: "Kubelet"]
KubeProxy1 [icon: k8s-k-proxy, label: "Kube Proxy"]
Pod1 [icon: k8s-pod, label: "Pod"]
Pod2 [icon: k8s-pod, label: "Pod"]
}
WorkerNode2 [icon: k8s-node, label: "Worker Node 2", color: "#326CE5"] {
Kubelet2 [icon: k8s-kubelet, label: "Kubelet"]
KubeProxy2 [icon: k8s-k-proxy, label: "Kube Proxy"]
Pod3 [icon: k8s-pod, label: "Pod"]
Pod4 [icon: k8s-pod, label: "Pod"]
}
// サービスとIngressの定義
Service [icon: k8s-svc, label: "Service", color: "#FFA630"]
Ingress [icon: k8s-ing, label: "Ingress", color: "#FF4F8B"]
}
// 外部ユーザーの定義
ExternalUser [icon: user, label: "External User"]
// コンポーネント間の接続
ExternalUser > Ingress
Ingress > Service
Service > Pod1
Service > Pod2
Service > Pod3
Service > Pod4
MasterNode > WorkerNode1
MasterNode > WorkerNode2
// コメントの追加
// Kubernetesクラスターの基本構造
// マスターノードがクラスター全体を管理
// ワーカーノードでポッドが実行される
// Ingressが外部からのトラフィックをサービスにルーティング
// サービスがポッドにトラフィックを分散
```
この修正版では、すべてのカラーコードを二重引用符（""）で囲んでいます。これにより、Eraserが正しくカラーコードを解釈し、指定した色を適用することができます。
この変更により、図の視覚的な表現は変わりませんが、Eraserがコードを正しく解釈できるようになります。ありがとうございました。このような細かい点に注意を払うことで、より正確で効果的なアーキテクチャ図を作成することができます。
User: Node内のそれぞれの要素感でのやり取りも記載したいです。
Claude: はい、了解しました。Node内の要素間のやり取りを追加することで、Kubernetesの内部動作をより詳細に表現できます。以下に、Node内の要素間の相互作用を含めた改訂版のコードを提供します。
```
cloud-architecture-diagram
// 全体の方向を右向きに設定
direction right
// Kubernetesクラスターの定義
KubernetesCluster [icon: k8s-kubernetes, label: "Kubernetes Cluster", color: "#326CE5"] {
// マスターノード（コントロールプレーン）の定義
MasterNode [icon: k8s-control-plane, label: "Master Node", color: "#326CE5"] {
APIServer [icon: k8s-api, label: "API Server"]
Scheduler [icon: k8s-sched, label: "Scheduler"]
ControllerManager [icon: k8s-c-m, label: "Controller Manager"]
Etcd [icon: k8s-etcd, label: "etcd"]
}
// ワーカーノードの定義
WorkerNode1 [icon: k8s-node, label: "Worker Node 1", color: "#326CE5"] {
Kubelet1 [icon: k8s-kubelet, label: "Kubelet"]
KubeProxy1 [icon: k8s-k-proxy, label: "Kube Proxy"]
Pod1 [icon: k8s-pod, label: "Pod"]
Pod2 [icon: k8s-pod, label: "Pod"]
}
WorkerNode2 [icon: k8s-node, label: "Worker Node 2", color: "#326CE5"] {
Kubelet2 [icon: k8s-kubelet, label: "Kubelet"]
KubeProxy2 [icon: k8s-k-proxy, label: "Kube Proxy"]
Pod3 [icon: k8s-pod, label: "Pod"]
Pod4 [icon: k8s-pod, label: "Pod"]
}
// サービスとIngressの定義
Service [icon: k8s-svc, label: "Service", color: "#FFA630"]
Ingress [icon: k8s-ing, label: "Ingress", color: "#FF4F8B"]
}
// 外部ユーザーの定義
ExternalUser [icon: user, label: "External User"]
// コンポーネント間の接続
ExternalUser > Ingress
Ingress > Service
Service > Pod1
Service > Pod2
Service > Pod3
Service > Pod4
// マスターノード内の相互作用
APIServer <> Scheduler: "Pod スケジューリング"
APIServer <> ControllerManager: "状態管理"
APIServer <> Etcd: "クラスター状態の保存/取得"
// マスターノードとワーカーノードの相互作用
APIServer <> Kubelet1: "Pod 管理指示"
APIServer <> Kubelet2: "Pod 管理指示"
APIServer <> KubeProxy1: "ネットワーク設定"
APIServer <> KubeProxy2: "ネットワーク設定"
// ワーカーノード1内の相互作用
Kubelet1 <> Pod1: "Pod ライフサイクル管理"
Kubelet1 <> Pod2: "Pod ライフサイクル管理"
KubeProxy1 <> Pod1: "ネットワークプロキシ"
KubeProxy1 <> Pod2: "ネットワークプロキシ"
// ワーカーノード2内の相互作用
Kubelet2 <> Pod3: "Pod ライフサイクル管理"
Kubelet2 <> Pod4: "Pod ライフサイクル管理"
KubeProxy2 <> Pod3: "ネットワークプロキシ"
KubeProxy2 <> Pod4: "ネットワークプロキシ"
// コメントの追加
// Kubernetesクラスターの基本構造と内部相互作用
// マスターノードがクラスター全体を管理し、各コンポーネントが協調して動作
// ワーカーノードでPodが実行され、KubeletとKube Proxyが管理
// Ingressが外部からのトラフィックをサービスにルーティング
// サービスがPodにトラフィックを分散
```
この改訂版では以下の変更を加えました：
1. マスターノード内の相互作用:
- API ServerとScheduler、Controller Manager、etcdの間の相互作用を追加しました。
2. マスターノードとワーカーノードの相互作用:
- API ServerとKubelet、KubeProxyの間の相互作用を追加しました。
3. ワーカーノード内の相互作用:
- KubeletとPodの間の相互作用（Podライフサイクル管理）を追加しました。
- KubeProxyとPodの間の相互作用（ネットワークプロキシ）を追加しました。
4. 相互作用の説明:
- 各相互作用に簡単な説明を追加し、その役割を明確にしました。
この改訂により、Kubernetesクラスター内の各コンポーネントがどのように相互作用し、協調して動作しているかがより明確に表現されています。ユーザーはこの図を通じて、Kubernetesの内部動作やコンポーネント間の関係をより深く理解することができます。
User: 全てを書くとごちゃごちゃしてしまうので重要な部分のみを記載してください。
Claude: ご指摘ありがとうございます。確かに、全ての相互作用を記載するとごちゃごちゃしてしまう可能性があります。重要な部分に焦点を当てた、より簡潔なバージョンを作成します。
```
cloud-architecture-diagram
direction right
// Kubernetesクラスターの定義
KubernetesCluster [icon: k8s-kubernetes, label: "Kubernetes Cluster", color: "#326CE5"] {
// マスターノード（コントロールプレーン）の定義
MasterNode [icon: k8s-control-plane, label: "Master Node", color: "#326CE5"] {
APIServer [icon: k8s-api, label: "API Server"]
Scheduler [icon: k8s-sched, label: "Scheduler"]
ControllerManager [icon: k8s-c-m, label: "Controller Manager"]
Etcd [icon: k8s-etcd, label: "etcd"]
}
// ワーカーノードの定義
WorkerNode [icon: k8s-node, label: "Worker Node", color: "#326CE5"] {
Kubelet [icon: k8s-kubelet, label: "Kubelet"]
KubeProxy [icon: k8s-k-proxy, label: "Kube Proxy"]
Pod1 [icon: k8s-pod, label: "Pod"]
Pod2 [icon: k8s-pod, label: "Pod"]
}
// サービスとIngressの定義
Service [icon: k8s-svc, label: "Service", color: "#FFA630"]
Ingress [icon: k8s-ing, label: "Ingress", color: "#FF4F8B"]
}
// 外部ユーザーの定義
ExternalUser [icon: user, label: "External User"]
// 主要な相互作用
ExternalUser > Ingress: "1. リクエスト"
Ingress > Service: "2. ルーティング"
Service > Pod1: "3. 負荷分散"
Service > Pod2: "3. 負荷分散"
APIServer <> Etcd: "4. 状態管理"
APIServer <> Scheduler: "5. Podスケジューリング"
APIServer <> ControllerManager: "6. クラスター状態管理"
APIServer <> Kubelet: "7. Pod管理"
Kubelet <> Pod1: "8. Podライフサイクル"
Kubelet <> Pod2: "8. Podライフサイクル"
// コメント
// Kubernetesの主要コンポーネントと重要な相互作用
// 1-3: 外部リクエストの処理フロー
// 4-6: マスターノード内の主要な操作
// 7-8: ワーカーノードでのPod管理
```
この簡略化されたバージョンでは：
1. ワーカーノードを1つに減らし、全体的な複雑さを軽減しました。
2. 最も重要な相互作用のみを記載し、番号を付けて順序を示しました：
- 外部リクエストの処理フロー
- マスターノード内の主要な操作
- ワーカーノードでのPod管理
3. 各相互作用に簡潔な説明を加え、その目的を明確にしました。
4. コメントセクションで、図の主要な部分を簡単に説明しています。
この簡略化された図は、Kubernetesの基本的な構造と主要な相互作用を示しながら、視覚的な複雑さを軽減しています。これにより、初心者でも理解しやすく、かつ重要なポイントを押さえた図になっていると思います。
User: kube-proxyが何をやっているかがわからないので、その点だけ修正してください。
Claude: ご指摘ありがとうございます。確かに、kube-proxyの役割が明確になっていませんでした。kube-proxyの重要な機能を図に追加します。以下が修正後のコードです：
```
cloud-architecture-diagram
direction right
// Kubernetesクラスターの定義
KubernetesCluster [icon: k8s-kubernetes, label: "Kubernetes Cluster", color: "#326CE5"] {
// マスターノード（コントロールプレーン）の定義
MasterNode [icon: k8s-control-plane, label: "Master Node", color: "#326CE5"] {
APIServer [icon: k8s-api, label: "API Server"]
Scheduler [icon: k8s-sched, label: "Scheduler"]
ControllerManager [icon: k8s-c-m, label: "Controller Manager"]
Etcd [icon: k8s-etcd, label: "etcd"]
}
// ワーカーノードの定義
WorkerNode [icon: k8s-node, label: "Worker Node", color: "#326CE5"] {
Kubelet [icon: k8s-kubelet, label: "Kubelet"]
KubeProxy [icon: k8s-k-proxy, label: "Kube Proxy"]
Pod1 [icon: k8s-pod, label: "Pod"]
Pod2 [icon: k8s-pod, label: "Pod"]
}
// サービスとIngressの定義
Service [icon: k8s-svc, label: "Service", color: "#FFA630"]
Ingress [icon: k8s-ing, label: "Ingress", color: "#FF4F8B"]
}
// 外部ユーザーの定義
ExternalUser [icon: user, label: "External User"]
// 主要な相互作用
ExternalUser > Ingress: "1. リクエスト"
Ingress > Service: "2. ルーティング"
Service > KubeProxy: "3. サービス情報"
KubeProxy > Pod1: "4. トラフィック転送"
KubeProxy > Pod2: "4. トラフィック転送"
APIServer <> Etcd: "5. 状態管理"
APIServer <> Scheduler: "6. Podスケジューリング"
APIServer <> ControllerManager: "7. クラスター状態管理"
APIServer <> Kubelet: "8. Pod管理"
Kubelet <> Pod1: "9. Podライフサイクル"
Kubelet <> Pod2: "9. Podライフサクル"
APIServer > KubeProxy: "10. サービス更新"
// コメント
// Kubernetesの主要コンポーネントと重要な相互作用
// 1-4: 外部リクエストの処理とPodへの転送フロー
// 5-7: マスターノード内の主要な操作
// 8-9: ワーカーノードでのPod管理
// 10: kube-proxyによるサービス情報の更新
// kube-proxyはクラスター内のネットワークルールを管理し、Podへのトラフィック転送を行う
```
この修正版では、以下の変更を加えました：
1. Service から KubeProxy への矢印を追加し、サービス情報が kube-proxy に渡されることを示しました。
2. KubeProxy から各 Pod への矢印を追加し、kube-proxy がトラフィックを適切な Pod に転送することを示しました。
3. APIServer から KubeProxy への矢印を追加し、kube-proxy がサービスの更新情報を受け取ることを示しました。
4. コメントセクションに kube-proxy の役割についての説明を追加しました。
これらの変更により、kube-proxy の主要な機能が明確になりました：
- クラスター内のネットワークルールを管理する
- サービスの情報を受け取り、適切な Pod にトラフィックを転送する
- API サーバーからサービスの更新情報を受け取り、ネットワークルールを動的に更新する
この修正により、kube-proxy の重要性と、それがどのようにクラスター内のネットワーキングを支援しているかがより明確になったと思います。
このような形で簡単に作図することができました。
まとめ
今回は「Eraser AI」のこれまでの使用経験について紹介しました。使ってみた感想としては、「Mermaid」よりも美しいビジュアルが作成でき、ドキュメント化する際に理解しやすくなる点が魅力的です。また、コードの修正も文法が比較的簡単なため、使いやすいと感じました。ぜひ皆さんもEraser AIを活用してみてください。
We Are Hiring!
ABEJAは、テクノロジーの社会実装に取り組んでいます。 技術はもちろん、技術をどのようにして社会やビジネスに組み込んでいくかを考えるのが好きな方は、下記採用ページからエントリーください！ （新卒の方のエントリーもお待ちしております）
