CDK アーキテクチャ図生成器 — AWS CDK アプリを瞬時に可視化

InfraSketch は、AWS CDK をサポートしています。`cdk synth` を実行して出力した JSON を CDK タブに貼り付け、数秒で VPC 閉じ込め、サブネットレーン、リソース接続、公式 AWS アイコンを備えた完全なアーキテクチャ図を得ることができます。ログインも credentails も不要で、ブラウザ内のすべてです。 cdk synth の出力を確認してすぐに図を表示します。InfraSketch を開く → なぜ CDK は図生成ツールが必要なのか CDK は、チームが AWS インフラを記述する際のデフォルト方法としてますます一般的になっています。TypeScript、Python、または Go コードが CloudFormation にコンパイルされ、インフラに落とし込まれます。アブстраクションは開発速度には優れています。しかし、彼らは問題提起を生みます：何かことが誤作動を起こした場合、またはあなた方のチーム外の誰かにアーキテクチャを説明する必要がある場合、ソースコードは共有するための適切な文書化ツールではありません。 CloudFormation コンソールはスタックを示していますが、閉じ込めを可視化しません。CDK のツリービューはコンストラクト階層を示しますが、ネットワークトポロジーを示しません。CDK アプリからクリーンなアーキテクチャ図に変換する、手動で描画する以外の組み込み方法はありません。 InfraSketch はそのギャップを埋めます。コマンド一つ、貼り付け、完了。 cdk synth | pbcopy # macOS — クリップボードにコピーする cdk synth > template.json # ファイルに保存する 次に、infrasketch.cloud を開き、CDK タブをクリックし、貼り付け、Generate Diagram をクリックします。 ヒント: アプリが複数のスタックを持っている場合は、cdk synth MyStack を使って特定のスタックを合成するか、各スタックの出力を個別に貼り付けて個別に図を作成してください。 CDK は CloudFormation JSON にコンパイルされます。InfraSketch の CDK タブは、CloudFormation タブと同じパルサーを実行します。これは Resources オブジェクトを読み取り、各 Type を可視カテゴリにマッピングし、リソース間の Ref と Fn::GetAtt 参照からトポロジを推論します。 CDK ロジカル ID は、手書きの CloudFormation と異なります。CDK は VPCB9E5F0B4 や EKSCluster9EE0221C などの名前を生成しますが、図のラベルはリソースタイプと切り取られたロジカル ID を使用し、CDK ソースコードの前にいることなくリソースを簡単に特定できるようにします。 VpcId: { Ref: VPC } を持つリソースは、VPC ボックス内に描画されます。CDK の ec2.Vpc コンストラクトはこのように自動的に生成されます。 CDK の SubnetSelection から公開およびプライベートサブネットレーン。合成された JSON 内の SubnetIds はリソースを適切なレーンに配置します。 すべてのサポートされているリソース間の Fn::GetAtt は一方方向の矢印に変換されます — Lambda → IAM ロール、ECS サービス → ALB ターゲットグループ、など。 Internet zone (IGW, CloudFront)、メッセージング zone (SQS, SNS)、データ zone (RDS, ElastiCache, S3) — すべてリソースタイプから自動的に推論されます。 すべての CDK L1 コンストラクト（Cfn 接頭辞付き）は、CloudFormation リソースタイプに直接マッピングされ、完全にサポートされます。一般的な L2 コンストラクトは同じ下流タイプに合成されます: ec2.Vpc → AWS::EC2::VPC + サブネット + IGW + NAT ゲートウェイ eks.Cluster → AWS::EKS::Cluster + ノードグループ + IAM ロール ecs.FargateService → AWS::ECS::Service + タスク定義 lambda.Function → AWS::Lambda::Function + IAM ロール rds.DatabaseInstance → AWS::RDS::DBInstance + サブネットグループ elasticache.CfnReplicationGroup → AWS::ElastiCache::ReplicationGroup s3.Bucket → AWS::S3::Bucket sqs.Queue → AWS::SQS::Queue sns.Topic → AWS::SNS::Topic elbv2.ApplicationLoadBalancer → AWS::ElasticLoadBalancingV2::LoadBalancer cloudfront.Distribution → AWS::CloudFront::Distribution kms.Key → AWS::KMS::Key iam.Role → AWS::IAM::Role wafv2.CfnWebACL → AWS::WAFv2::WebACL route53.HostedZone → AWS::Route53::HostedZone ユースケース コードレビュー — PR ブランチで `cdk synth` を実行して出力を貼り付け、視覚的にアーキテクチャ変更をみる オンボーディング — チームメンバーに CDK TypeScript を読むよう求める代わりに、図リンクを共有 ドキュメンテーション — PNG や SVG としてエクスポートし、Confluence、Notion、またはあなたの Wiki に埋め込む アーキテクチャレビュー — draw.io XML としてエクスポートし、設計ドキュメントのための完全に編集可能な図を得る ドリフト検出 — 変更前後に合成して図をサイドバイサイドで比較 CDK for Terraform (CDKTF) は Terraform JSON を合成できます。CDKTF を使用している場合、Terraform タブ并使用し、貼り付けを…

InfraSketch now supports AWS CDK. Run cdk synth, paste the JSON output into the CDK tab, and get a full architecture diagram in seconds — VPC containment, subnet lanes, resource connections, official AWS icons. No login, no credentials, everything in your browser. cdk synth output and see the diagram instantly. Open InfraSketch → Why CDK needs a diagram tool CDK is increasingly the default way teams write AWS infrastructure — TypeScript, Python, or Go code that compiles down to CloudFormation. The abstractions are great for development velocity, but they create a visibility problem: when something goes wrong, or when you need to explain the architecture to someone outside your team, the source code is not the right artifact to share. The CloudFormation console shows you a stack but won't visualize containment. The CDK tree view shows construct hierarchy, not network topology. There's no built-in way to go from a CDK app to a clean architecture diagram without manually drawing one. InfraSketch fills that gap. One command, paste, done. cdk synth | pbcopy # macOS — copies to clipboard cdk synth > template.json # save to file Then open infrasketch.cloud, click the CDK tab, paste, and click Generate Diagram. Tip: If your app has multiple stacks, use cdk synth MyStack to synthesize a specific stack, or paste each stack's output separately to diagram them individually. CDK compiles to CloudFormation JSON. InfraSketch's CDK tab runs the same parser as the CloudFormation tab — it reads the Resources object, maps each Type to a visual category, and infers topology from Ref and Fn::GetAtt references between resources. CDK logical IDs look different from hand-written CloudFormation — CDK generates names like VPCB9E5F0B4 and EKSCluster9EE0221C — but the diagram labels use the resource type and truncated logical ID, making it easy to identify resources without needing the CDK source code in front of you. Resources with VpcId: { Ref: VPC } are drawn inside the VPC box. CDK's ec2.Vpc construct generates this automatically. Public and private subnet lanes from CDK's SubnetSelection — SubnetIds in the synthesized JSON places resources in the right lane. Every Fn::GetAtt between supported resources becomes a directed arrow — Lambda → IAM Role, ECS Service → ALB Target Group, etc. Internet zone (IGW, CloudFront), messaging zone (SQS, SNS), data zone (RDS, ElastiCache, S3) — all inferred automatically from resource type. Any CDK L1 construct (prefixed Cfn) maps directly to a CloudFormation resource type and is fully supported. Common L2 constructs synthesize to the same underlying types: ec2.Vpc → AWS::EC2::VPC + subnets + IGW + NAT gateways eks.Cluster → AWS::EKS::Cluster + node groups + IAM roles ecs.FargateService → AWS::ECS::Service + task definition lambda.Function → AWS::Lambda::Function + IAM role rds.DatabaseInstance → AWS::RDS::DBInstance + subnet group elasticache.CfnReplicationGroup → AWS::ElastiCache::ReplicationGroup s3.Bucket → AWS::S3::Bucket sqs.Queue → AWS::SQS::Queue sns.Topic → AWS::SNS::Topic elbv2.ApplicationLoadBalancer → AWS::ElasticLoadBalancingV2::LoadBalancer cloudfront.Distribution → AWS::CloudFront::Distribution kms.Key → AWS::KMS::Key iam.Role → AWS::IAM::Role wafv2.CfnWebACL → AWS::WAFv2::WebACL route53.HostedZone → AWS::Route53::HostedZone Use cases Code reviews — run cdk synth on a PR branch and paste the output to see what the architecture change looks like visually Onboarding — share a diagram link with new team members instead of asking them to read CDK TypeScript they've never seen Documentation — export as PNG or SVG and embed in Confluence, Notion, or your wiki Architecture reviews — export as draw.io XML to get a fully editable diagram for your design doc Drift detection — synthesize before and after a change and compare diagrams side by side CDK for Terraform (CDKTF) can synthesize Terraform JSON. If you're using CDKTF, use the Terraform tab and paste the synthesized JSON — InfraSketch's plan JSON parser handles it directly. cdk synth | pbcopy, paste into the CDK tab, click Generate. Free, no login, nothing leaves your browser. Open InfraSketch →