Forem: Raghvendra Pandey

Generate IaC Architecture Diagrams Inside Claude Code and Cursor with InfraSketch MCP

Raghvendra Pandey — Thu, 14 May 2026 00:51:46 +0000

TL;DR: Install the InfraSketch MCP server with one command (claude mcp add infrasketch -- npx infrasketch-mcp), then ask Claude Code to diagram any Terraform, Kubernetes, or Pulumi code without leaving your editor. The diagram opens in your browser, your code never leaves your machine.

The context-switching problem: diagrams while you code

AI editors like Claude Code, Cursor, and Windsurf have gotten surprisingly good at infrastructure work. You can paste a 2,000-line Terraform module into context, ask it to refactor a subnet configuration, and get a working diff in seconds. But ask it to show you an architecture diagram of that same code? Until recently, the answer was "open a browser, paste it somewhere else, render it there."

That break is annoying in a specific way. It's not just the thirty seconds — it's that you lose the thread. The AI has been building context about your codebase, your constraints, what you're trying to do. When you jump to another tool and come back, you're starting that context fresh.

The InfraSketch MCP server fixes this by adding diagram generation as a tool your AI assistant can call natively. Two tools: generate_diagram and detect_iac_format. Ask Claude "can you show me a diagram of this?" and it calls the tool, gets a URL, and includes it in its response. You never left the editor.

What is MCP and why it matters for infrastructure teams

Model Context Protocol (MCP) is an open standard developed by Anthropic that lets AI assistants communicate with external tools and services through a standardized interface. Instead of an AI assistant being limited to the text in its context window, MCP lets it call out to tools — read files, run searches, query APIs, generate artifacts — and incorporate the results back into the conversation.

For infrastructure teams the implication is straightforward: your AI assistant can now do things that previously required leaving the editor:

Look up the current state of a Terraform resource in a cloud account
Check a security scanner for misconfigurations
Generate an architecture diagram of whatever code it's currently looking at
Figure out what IaC format a file is before processing it

MCP servers are lightweight processes that run locally alongside your editor. They communicate with the AI assistant over a stdio or SSE transport — there's no cloud intermediary. The InfraSketch MCP server is published as infrasketch-mcp on npm and requires only Node.js to run.

Installing infrasketch-mcp (npx, global, Claude Code one-liner)

The fastest way to install is the Claude Code one-liner, which registers the MCP server in your Claude Code configuration in a single command:

claude mcp add infrasketch -- npx infrasketch-mcp

This tells Claude Code to start the InfraSketch MCP server on demand using npx, which downloads and runs the package without a global install. The server starts fresh each session and exits when Claude Code closes — no persistent daemon.

If you prefer a global install to avoid npx startup overhead:

npm install -g infrasketch-mcp

Then reference it directly in your MCP configuration as infrasketch-mcp instead of npx infrasketch-mcp.

Setup: Claude Code (claude mcp add command + settings.json method)

After running the claude mcp add command above, the server is registered automatically. To verify it's registered correctly, run:

claude mcp list

You should see infrasketch in the list. If you prefer to configure it manually, or if you're deploying a shared configuration to a team, edit your Claude Code MCP settings file at ~/.claude/settings.json and add the server to the mcpServers object:

{
"mcpServers": {
"infrasketch": {
"command": "npx",
"args": ["infrasketch-mcp"]
}
}
}

For project-level configuration (useful when you want to check the MCP config into your repository so the whole team gets it automatically), create or edit .claude/settings.json in your project root:

{
"mcpServers": {
"infrasketch": {
"command": "npx",
"args": ["infrasketch-mcp"],
"description": "Generate architecture diagrams from IaC code"
}
}
}

After editing the settings file, restart Claude Code for the changes to take effect. The MCP server will be available in all sessions in that project.

Setup: Cursor and Windsurf

Cursor uses the same MCP configuration format. Create or edit ~/.cursor/mcp.json (for global configuration) or .cursor/mcp.json in your project root:

{
"mcpServers": {
"infrasketch": {
"command": "npx",
"args": ["infrasketch-mcp"]
}
}
}

In Cursor, go to Settings → MCP to verify the server appears and shows a green connected status. You may need to click "Reload MCP Servers" after saving the config file.

Windsurf follows the same pattern. Edit ~/.windsurf/mcp.json with the same configuration block. Once the server is connected, both Cursor's Composer and Windsurf's Cascade will have access to the InfraSketch tools and can call them in response to natural language prompts about your infrastructure code.

Node.js required: The MCP server requires Node.js 18 or later. Run node --version to check. If you're using a version manager like nvm or fnm, make sure the active version is 18+ before starting your editor.

The generate_diagram tool in action (with example prompt + example output)

Once the MCP server is connected, you can ask Claude to generate diagrams in natural language. You don't need to know the tool name or its parameters — just describe what you want:

Generate a diagram for this terraform code:

resource "aws_vpc" "main" {
cidr_block = "10.0.0.0/16"
tags = { Name = "main-vpc" }
}

resource "aws_subnet" "public" {
vpc_id            = aws_vpc.main.id
cidr_block        = "10.0.1.0/24"
availability_zone = "us-east-1a"
}

resource "aws_internet_gateway" "igw" {
vpc_id = aws_vpc.main.id
}

resource "aws_route_table" "public" {
vpc_id = aws_vpc.main.id
route {
cidr_block = "0.0.0.0/0"
gateway_id = aws_internet_gateway.igw.id
}
}

resource "aws_route_table_association" "public" {
subnet_id      = aws_subnet.public.id
route_table_id = aws_route_table.public.id
}

Claude will call the generate_diagram MCP tool with the code and format, and return something like:

Here's your architecture diagram:

**[View Interactive Diagram](https://infrasketch.cloud/#eJyVVdtu2zgQffdXEH...)**

The diagram shows:
- **VPC** (10.0.0.0/16) as the top-level container
- **Public Subnet** (10.0.1.0/24) in us-east-1a inside the VPC
- **Internet Gateway** attached to the VPC
- **Route Table** with a default route (0.0.0.0/0) pointing to the IGW
- **Route Table Association** linking the public subnet to the route table

You can click the link to open an interactive, zoomable diagram in your browser.

The diagram URL is a permanent shareable link. The iframe embed lets you paste the diagram directly into documentation, Notion, Confluence, or any HTML page. The AI assistant also provides a human-readable summary of what the diagram shows, which is useful for accessibility and for quickly confirming the rendering is correct without opening a browser.

The detect_iac_format tool

The second tool exposed by the MCP server is detect_iac_format. This is useful when you have an ambiguous file and want the AI to determine its format before processing it. You can invoke it explicitly:

What IaC format is this file?

apiVersion: apps/v1
kind: Deployment
metadata:
name: nginx-deployment
spec:
replicas: 3
selector:
matchLabels:
app: nginx
template:
metadata:
labels:
app: nginx
spec:
containers:
- name: nginx
image: nginx:1.21

The tool returns the detected format (kubernetes in this case) along with a confidence score. Claude Code will then use this information to call generate_diagram with the correct type parameter, producing an accurate diagram for Kubernetes resources rather than trying to parse it as Terraform or CloudFormation.

In practice, the format detection runs automatically when you ask for a diagram — you rarely need to invoke it explicitly. It's most useful in agentic workflows where code is being passed programmatically and the format isn't known in advance.

Real workflow: reviewing a Terraform PR with Claude + InfraSketch

Concrete example. A teammate opens a PR adding an ECS cluster with autoscaling to an existing VPC. You're reviewing it in Claude Code:

Ask Claude to show you what changed: "What's different in the terraform/ directory compared to main?" It reads the diff and summarizes.
"Generate a diagram of the full terraform/environments/prod/ directory so I can see how the ECS cluster fits in." Claude calls generate_diagram, gets a URL back.
Click the URL. You get an interactive, zoomable diagram — ECS cluster, task definitions, ALB, target groups, VPC subnets, security groups, all in one view.
Back in Claude: "The ECS tasks are in the public subnet. Intentional?" Claude already has all the code in context and can answer immediately.
Your review comment is specific — "the ECS tasks should be in the private subnet per our networking standards, the security group on line 43 is too permissive" — not just "looks good" or a vague worry about networking.

Reading HCL line by line is fine for small changes. For anything spanning multiple resources and subnets, the diagram gets you oriented in about ten seconds instead of ten minutes.

For teams that want this diagram to appear automatically on every PR without any manual step, the GitHub Action (pandey-raghvendra/infrasketch@v4) posts the diagram as a PR comment whenever Terraform files change.

How the URL is generated (no upload, privacy-first, works offline)

The MCP server uses the same URL-encoding approach as the CLI and browser tool. When generate_diagram is called:

The code is serialized into a JSON envelope with the detected format
The JSON is compressed with gzip and base64-encoded
The encoded string is appended as a URL fragment to https://infrasketch.cloud/
The resulting URL is returned to the AI assistant, which includes it in its response

The MCP server process runs entirely on your machine. It never makes outbound HTTP requests to InfraSketch servers. The URL it generates encodes your code in the fragment, which — by the HTTP specification — is never transmitted to a server. When you open the URL in a browser, the InfraSketch web app decodes and renders the diagram entirely client-side.

This means the tool works in air-gapped environments (as long as your browser can load the web app), needs no API keys, stores nothing server-side, and leaves no audit trail. If your team has strict data residency requirements, that matters. Cloud-hosted diagramming APIs typically process your code on their servers — this one doesn't, by design.

Combining MCP with CLI and embed for full workflow

The MCP server, CLI, and embed component are designed to complement each other across different parts of the development lifecycle:

MCP server — Use during active coding and code review inside your AI editor. Get diagrams inline without leaving your editor or conversation.
CLI (npx infrasketch) — Use for quick local checks, scripting, and CI pipelines. See the CLI guide for full details.
GitHub Action — Use for automated PR comments. Zero friction for reviewers — the diagram appears without anyone running a command.
Embed web component — Use for documentation, runbooks, and internal wikis. Keep diagrams live and synchronized with the source code.

In practice, a team that's using all four ends up with: MCP for daily coding and reviews, CLI for pre-commit sanity checks and one-off scripting, the GitHub Action for automated PR comments, and embed for the internal docs wiki. Every diagram comes from the same source of truth. Nothing ever gets uploaded.

Supported formats and limitations

The MCP server supports the same eight IaC formats as the web tool and CLI:

Format	Auto-detected	Multi-file support	Notes
terraform	Yes (.tf extension)	Yes (concatenated)	Best coverage of all formats
kubernetes	Yes (apiVersion field)	Yes	Helm chart values not rendered
pulumi	Partial (Pulumi.yaml)	Partial	Heuristic extraction from source
cloudformation	Yes (Resources key)	Yes	Nested stacks shown as references
cdk	Partial	Partial	Works best with synthesized output
bicep	Yes (.bicep extension)	Yes	Modules shown as references
terragrunt	Yes (terragrunt.hcl)	Yes	Module dependency graph included
docker-compose	Yes (services key)	Single file	Networks and volumes visualized

The main limitation to be aware of is code size. The URL fragment approach has a practical ceiling around 2 MB of raw IaC content before browser URL limits become a concern. For most individual modules and services this is not an issue, but for very large monorepos you should point the tool at a specific subdirectory rather than the entire repository root.

FAQ

Does the MCP server require any API key or account?

No. Completely free, no authentication. It runs locally and talks to your AI editor over stdio. No InfraSketch account, no key, no usage limits. Just Node.js.

Does my Terraform code get sent to InfraSketch servers?

No. The MCP server encodes your code into a URL fragment. Fragments are never transmitted in HTTP requests — that's part of the HTTP spec, not something special we're doing. The InfraSketch web app decodes and renders everything in the browser. The InfraSketch server only ever serves the static HTML/JS/CSS files, same as any website.

Can I use the MCP server with VS Code or other editors?

Anything that supports Model Context Protocol over stdio will work. Claude Code, Cursor, and Windsurf are the most common. VS Code has MCP support in some extensions. For editors that don't support MCP at all, the CLI and browser tool still cover most of the same use cases.

What happens if the diagram looks wrong?

The MCP server passes your code to the renderer exactly as-is — no modification, no interpretation. So if the diagram is wrong, it's the renderer's parsing that's off, not how the AI called the tool. Open the interactive diagram in your browser, check what's there, and if you spot a bug file it on GitHub with the example code.

Can I use the MCP server in a team setting with a shared configuration?

Yes, and this is actually the easiest setup. Add the MCP config to .claude/settings.json (Claude Code) or .cursor/mcp.json (Cursor) at the project root and check it into your repo. Anyone who clones gets it automatically. Since it uses npx, nobody needs to install anything manually.

Diagram your infrastructure without leaving your editor Add the InfraSketch MCP server to Claude Code in one command, or try the browser tool right now — no account needed. Try InfraSketch Free →

Visualize Terraform, Kubernetes, and Pulumi from the Terminal with npx infrasketch

Raghvendra Pandey — Thu, 14 May 2026 00:51:43 +0000

TL;DR: Run npx infrasketch . in any IaC repository to instantly open an interactive architecture diagram in your browser. No login, no install, no file upload. Works with Terraform, Kubernetes, Pulumi, CloudFormation, CDK, Bicep, Terragrunt, and Docker Compose.

The copy-paste problem with IaC diagrams

You finish a Terraform module, open Lucidchart or draw.io, manually drag in an EC2 box, an RDS cylinder, an ALB arrow — 45 minutes recreating what the code already describes. Two weeks later the code changes, the diagram doesn't, and you've got a lie pinned to your Confluence page. I've seen this on every team I've worked with.

The browser-based InfraSketch tool at infrasketch.cloud cuts most of that: paste your HCL, YAML, or JSON and get an interactive diagram instantly, no account required. But there was still friction. You had to leave your terminal, copy the file contents, navigate to a website. For anyone living in the command line, that adds up over a day.

The CLI removes that last step. Point it at a file, a directory, or a raw GitHub URL, and it generates the diagram and opens your browser — usually in under two seconds. In CI where there's no browser to open, --no-open prints the shareable URL to stdout so you can pipe it wherever you need it.

What npx infrasketch does (and what it doesn't)

The CLI is a thin Node.js wrapper published to npm as infrasketch. When you run it, it reads your IaC file or directory, serializes the content into a base64-encoded JSON fragment, appends that fragment to the InfraSketch web app URL, and opens the result in your default browser.

What it doesn't do matters more than you'd expect:

Your code never leaves your machine — no upload, no server processing.
No account, no API key, nothing to sign up for.
It doesn't touch your IaC files. Read-only.
No background process. It runs, opens the browser, and exits.

The diagram is rendered entirely in the browser using the URL fragment. Browsers don't send the hash to the server — they only transmit the path and query string. So when you open https://infrasketch.cloud/#eJy..., the server gets a plain GET / with no idea what's in the fragment. That's not a hack; it's just how HTTP works, and we're leaning into it deliberately. It also means the tool works in air-gapped environments as long as the browser can load the InfraSketch page.

Zero-install usage: your first diagram in 10 seconds

Because the CLI is on npm, you can run it immediately with npx without installing anything globally. Navigate to any directory that contains IaC files and run:

npx infrasketch .

That's it. The CLI will scan the current directory, detect the format automatically, and open your browser. If you have a mixed repository with, say, a terraform/ subdirectory and a k8s/ subdirectory, run it from the root — it will pick the dominant format or let you point it at a subdirectory.

If you prefer a permanent global install to skip the npx overhead on every invocation, add it to your PATH once:

npm install -g infrasketch

After that, infrasketch . works from any directory, just like terraform or kubectl.

Single file mode

When you want to diagram a specific file rather than an entire directory, pass the file path directly:

npx infrasketch main.tf

Single file mode is useful when you're working on a large module and want to check just the resources you're currently editing. The CLI reads only that file, so it's faster for large repositories where a full directory scan would pull in many files you don't care about right now.

The format is auto-detected from the file extension and content. .tf files are parsed as Terraform HCL, .yaml and .yml files trigger heuristic detection to distinguish between Kubernetes manifests, Docker Compose files, and CloudFormation templates. For ambiguous cases you can override with the --type flag:

npx infrasketch template.yaml --type cloudformation

Supported values for --type are: terraform, kubernetes, pulumi, cloudformation, cdk, bicep, terragrunt, docker-compose.

Directory scan mode — multi-file Terraform projects

Real Terraform projects rarely live in a single file. A production module typically spans main.tf, variables.tf, outputs.tf, locals.tf, and any number of resource-specific files. Directory scan mode reads all of them and stitches them into one diagram:

npx infrasketch ./terraform/environments/prod/

The CLI recursively finds all .tf files under the given path, concatenates their contents, and feeds the combined HCL to the diagram renderer. This gives you a complete picture of the environment rather than a partial view of whichever file you happened to open first.

For Terragrunt projects where each module lives in its own subdirectory with a terragrunt.hcl, point the CLI at the root of the deployment tree:

npx infrasketch ./live/prod/ --type terragrunt

It will discover all terragrunt.hcl files and combine the dependency graph across modules, giving you visibility into how modules reference each other — something that's notoriously hard to visualize manually.

Tip: For very large Terraform codebases (hundreds of files), consider running the CLI against a specific module subdirectory rather than the repository root. The URL fragment has a practical size limit around 2 MB of raw content, which covers most real-world modules comfortably.

Kubernetes and Pulumi projects

Kubernetes works the same way. Point it at a directory of YAML files and it picks up Deployments, Services, Ingresses, ConfigMaps, StatefulSets, DaemonSets — and renders how they connect:

npx infrasketch ./k8s/ --type kubernetes

The --type flag is optional here if your YAML files have the standard apiVersion and kind fields — the auto-detector recognizes Kubernetes manifests reliably. But if you have a directory that mixes Kubernetes YAML with other YAML (for example, a Helm chart with both templates and values files), being explicit avoids ambiguity.

For more detail on the Kubernetes diagram format and what relationships are visualized, see the Kubernetes diagram generator guide.

Pulumi projects work similarly. Navigate to a Pulumi project directory (the one containing Pulumi.yaml) and run:

npx infrasketch . --type pulumi

The CLI reads the Pulumi program source — TypeScript, Python, Go, or YAML — and extracts resource declarations. Because Pulumi programs are general-purpose code rather than declarative config, the extraction is necessarily heuristic: it looks for new aws.ec2.Instance()-style patterns in TypeScript/Python and equivalent patterns in other languages. Coverage is good for standard resource declarations but may miss resources created inside complex loops or conditional logic.

Remote GitHub raw URL mode

You don't have to clone a repository to diagram it. Pass any raw GitHub URL (or any other URL that returns plain text) and the CLI will fetch it, parse it, and open the diagram:

npx infrasketch https://raw.githubusercontent.com/hashicorp/terraform-provider-aws/main/examples/two-tier/main.tf

This mode is particularly useful for:

Reviewing open-source Terraform modules before adding them as dependencies
Quickly understanding the architecture of a reference implementation you found
Sharing a diagram of a public repository without cloning it locally
Generating diagrams in documentation pipelines where the source lives in a separate repo

The URL is fetched by the CLI process on your machine (not by the browser or any server), parsed locally, and then encoded into the diagram URL. Your network request goes to GitHub's raw content CDN, not to InfraSketch servers.

CI/CD pipeline integration (--no-open flag)

In a headless CI environment there's no browser to open, so the default behavior would hang or error. The --no-open flag suppresses browser launch and instead prints the diagram URL to stdout:

npx infrasketch main.tf --no-open

This emits a single line like:

https://infrasketch.cloud/#eJyVVdtu2zgQ...

You can capture this URL and use it anywhere: a PR comment, a Slack notification, a build artifact, a release note. Here's a complete GitHub Actions workflow that posts the diagram URL as a PR comment whenever Terraform files change:

name: Terraform Diagram

on:
pull_request:
paths:
- '**.tf'
- '**.tfvars'

jobs:
diagram:
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v4

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'

- name: Generate diagram URL
id: diagram
run: |
URL=$(npx infrasketch . --no-open)
echo "url=$URL" >> "$GITHUB_OUTPUT"

- name: Post diagram comment
uses: actions/github-script@v7
with:
script: |
const url = '${{ steps.diagram.outputs.url }}';
await github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
body: `## Architecture Diagram\n\n[View interactive diagram](${url})\n\n> Generated by InfraSketch CLI`
});

If you'd rather use the purpose-built GitHub Action instead of the raw CLI in CI, see the GitHub Action guide — it handles the comment posting and diff detection automatically with less boilerplate.

How it works under the hood (URL encoding, no upload, privacy)

If you're going to run a tool against production Terraform code, you should know what it actually does. Here's the full flow:

Reads file contents from disk (or fetches from URL). No preprocessing — the raw content goes through as-is, including variable references and module calls.
Wraps the content in a JSON envelope: {"type":"terraform","code":"..."}. Multi-file mode concatenates everything into the code field with separator comments between files.
Gzip-compresses the JSON and base64-encodes the result into a compact ASCII string.
Appends the encoded string to the InfraSketch URL as a hash fragment: https://infrasketch.cloud/#.
Opens that URL in your default browser (open on macOS, xdg-open on Linux, start on Windows). The web app decodes the fragment entirely client-side.

The key detail is step 5. The URL fragment — everything after the # — is never transmitted in HTTP requests. When your browser loads https://infrasketch.cloud/#eJy..., the actual HTTP request to the server is just GET /. No server ever sees your infrastructure code. That's a browser standard, not something we're doing specially — we're just building on top of it.

This also means the diagram URL is a permanent, shareable link with no expiry. The entire diagram state is encoded in the URL itself — there's no server-side session or storage. You can bookmark it, share it in Slack, or save it in documentation and it will work forever, as long as the InfraSketch web app is running.

Combining CLI with GitHub Action for full automation

The CLI is for you while you're coding. The GitHub Action is for your reviewers when they're not.

Practically, the workflow goes: you write a new Terraform module for a VPC peering connection, run npx infrasketch . locally to make sure the diagram looks right (subnets, route tables, peering connections all there), then open a PR. The GitHub Action (pandey-raghvendra/infrasketch@v4) fires automatically and posts the diagram as a comment. Reviewers click the link, see the architecture interactively, no tooling required on their end.

The CLI is fast and zero-ceremony — just a command. The Action is automated and requires no one to remember to run anything. They cover different moments in the same workflow, not the same moment twice.

Comparison table: CLI vs browser vs GitHub Action vs MCP

Method	Best for	Install needed	Works in CI	Opens browser
Browser	Quick one-off diagrams, paste-and-view	None	No	Already in browser
CLI (npx infrasketch)	Local dev, scripting, remote URLs	Node.js (npx auto-installs)	Yes (--no-open)	Yes (default)
GitHub Action	Automated PR comments on IaC changes	None (uses Action)	Yes (built for it)	No
MCP Server	AI-assisted coding in Claude Code / Cursor	Node.js (npx auto-installs)	No	Yes (via AI prompt)

FAQ

Does npx infrasketch work without internet access?

First run via npx needs to download the package, so yes, internet required there. After that, npm install -g infrasketch once and it runs offline. The generated URL needs a browser to load the InfraSketch web app — so some internet to load the page initially, though your IaC code never gets uploaded to any server regardless.

What happens with .tfvars files that contain secrets?

The code goes into the URL fragment, which is never sent to a server. But the fragment does show up in browser history and in any URL you share. So treat the URL like you'd treat the source code — don't paste it in a public Slack channel if the file has real credentials in it. Stick to main.tf or module directories for diagramming; leave the .tfvars with the actual secrets out of it.

Can I use the CLI with Terraform workspaces?

Yes, workspaces only affect state — the HCL source files are the same regardless of which workspace you're on. npx infrasketch . works normally. If you have workspace-specific variable files like prod.tfvars, you can point the CLI at them directly.

How large can the IaC file be before the URL gets too long?

HCL compresses well — gzip typically gets 5-10x reduction before base64, so a 500 KB Terraform project ends up under 100 KB in the URL. In practice, URL length limits never bite you with normal module-sized codebases. If you're running against an entire monorepo root with hundreds of files, run it against a subdirectory instead.

Can I get the diagram URL without opening the browser, even locally?

--no-open works anywhere, not just CI. npx infrasketch main.tf --no-open on your laptop prints the URL to stdout without touching the browser. Pipe it to pbcopy, drop it in a script, whatever you need.

Diagram your infrastructure in 10 seconds Run npx infrasketch . in your IaC repo right now — or try the browser tool directly with no install required. Try InfraSketch Free →

How to Embed a Live IaC Architecture Diagram on Any Website with <infra-sketch>

Raghvendra Pandey — Thu, 14 May 2026 00:28:11 +0000

TL;DR: Add one script tag to your page, then use `` or inline your IaC code between the tags. The diagram renders interactively, updates when you update the source, and never sends your code to a server.

Why living diagrams beat static images in docs

There's a specific kind of documentation rot that hits infrastructure teams hard: the architecture diagram that was accurate when someone drew it, is now pinned to a Confluence page, and describes an environment that no longer exists. Someone added an RDS read replica. Someone else swapped EC2 for ECS Fargate. The diagram stayed put.

Static diagram images — PNGs and SVGs exported from draw.io or Lucidchart — have a structural problem. Keeping them current requires someone to remember to update them, have the original tool open, export a new image, and re-upload it. That chain breaks constantly in practice. Not because people are careless; they're just busy.

A living diagram solves this by rendering from the actual IaC file every time the page loads. When the Terraform changes, the diagram changes. No export, no re-upload, no manual step. It's accurate because it's always generated from the current code, not from a snapshot.

The InfraSketch embed component makes this work on any website, docs platform, or wiki that accepts custom HTML: one script tag, then drop the `` element wherever you want the diagram.

Two ways to embed: iframe vs web component

Two ways to embed, and which one you use depends on your platform:

The iframe approach works everywhere — Confluence, Notion, GitHub Pages, internal wikis, anything that allows an HTML iframe. You generate a diagram URL first (browser tool, CLI, or MCP server), then paste the iframe tag. It's a bit more manual but totally reliable across any platform, including those that restrict JavaScript.

The web component is cleaner for HTML-based sites. One script tag in the head, then use `` anywhere on your page — point it at a source URL or write IaC code inline between the tags. The component fetches, detects the format, and renders. For docs sites built with MkDocs, Docusaurus, Hugo, or Jekyll, this is the approach I'd recommend.

Getting the iframe embed code (from the app)

If you have an existing diagram open in the InfraSketch web app, the fastest way to get embed code is the share button. The app generates both an iframe snippet and a direct link:

`plaintext

Paste this into any HTML page or any platform with an HTML/embed block. The iframe is fully self-contained — the diagram state is in the URL, so there are no external dependencies beyond the InfraSketch web app itself.

For platforms that strip the src attribute from iframes for security reasons (some wiki platforms and CMS editors do this), see the CORS considerations section below.

The infra-sketch web component: one-line setup

The web component is loaded with a single script tag that you add once to your page's or just before :

`plaintext

After loading, the `` custom element is registered and available anywhere on the page. It renders as a responsive iframe-like widget with pan and zoom support, the same interactive experience as the full web app.

The script is small, loads from a CDN, and is cached aggressively. Including it on a documentation page adds negligible overhead — the component only fetches and renders when an `` element is actually present in the DOM, so unused script inclusions don't trigger any work.

Embedding by URL: the src= attribute

The simplest way to embed a diagram is to point the component at a URL that returns IaC code. The component fetches the URL, detects the format, and renders the diagram:

`plaintext

When the page loads, the component fetches the src URL, reads the content, auto-detects the IaC format, and renders the interactive diagram. If the file changes in GitHub, the diagram on your documentation page changes the next time someone loads it — without any manual intervention.

You can also pass an explicit type attribute to skip format detection and ensure correct rendering for ambiguous files:

`plaintext

The height attribute sets the diagram height in pixels. If omitted, a default of 480px is used. Width is always 100% of the container element, making the component responsive to its parent layout.

Embedding inline code

For documentation where you want to show a specific, curated snippet rather than an entire file, write the IaC code directly between the `` tags:


apiVersion: apps/v1
kind: Deployment
metadata:
name: api-server
namespace: production
spec:
replicas: 3
selector:
matchLabels:
app: api-server
template:
spec:
containers:
- name: api
image: your-org/api:latest
ports:
- containerPort: 8080
---
apiVersion: v1
kind: Service
metadata:
name: api-service
spec:
selector:
app: api-server
ports:
- port: 80
targetPort: 8080
type: ClusterIP

When no src attribute is provided, the component uses the element's text content as the IaC code. The type attribute is recommended for inline code since there's no file extension to auto-detect from. The content is treated as plain text — HTML entities inside the element are decoded before parsing, so you can use `
Tip: For documentation sites that process Markdown, wrap inline IaC code in a raw HTML block to prevent the Markdown parser from mangling the whitespace or escaping characters inside the element.

All supported attributes (src, type, height, width)

Attribute	Required	Default	Description
src	No	—	URL of the IaC file to fetch and render. Omit to use inline content.
type	No	auto-detect	IaC format: terraform, kubernetes, pulumi, cloudformation, cdk, bicep, terragrunt, docker-compose
height	No	480	Height of the diagram widget in pixels
width	No	100%	Width of the diagram widget. Accepts px or % values.

The component also exposes a custom event, infra-sketch-load, that fires when the diagram has finished rendering. You can listen to it for analytics, lazy-load triggers, or to show/hide a loading skeleton:

javascript document.querySelector('infra-sketch').addEventListener('infra-sketch-load', (e) => { console.log('Diagram rendered:', e.detail.resourceCount, 'resources'); });

Real examples: GitHub Pages docs, Backstage, Confluence, Notion

GitHub Pages / Jekyll / Hugo / MkDocs

For static site generators, add the embed script to your theme's base template and use the component in any page. For MkDocs with the Material theme, add the script to overrides/main.html. For Jekyll, add it to _layouts/default.html. Then use the component in any Markdown file within a raw HTML block:

`markdown

Network Architecture

The following diagram shows the production VPC layout:

Backstage TechDocs

Backstage TechDocs is built on MkDocs and renders Markdown for service catalogs. The same pattern applies — add the script to the TechDocs theme override and embed diagrams inline in your service's docs/ directory. Because TechDocs serves content from the same origin as Backstage, there are no CORS restrictions when fetching from GitHub raw URLs.

Confluence

Confluence's HTML macro lets you paste raw HTML including script tags. Create an HTML macro block on your page, paste in the embed script tag and the element. Alternatively, use the iframe approach — generate the iframe URL from the InfraSketch app and paste it using Confluence's iframe macro. The iframe approach is more reliable across Confluence versions since some restrict JavaScript in HTML macros by default.

Notion

Notion doesn't support arbitrary HTML or script tags in pages, but it does have an Embed block that accepts iframe URLs. Generate the diagram URL from the InfraSketch app (or via the CLI with --no-open), then use Notion's /embed command and paste the URL. Notion will render it as an embedded iframe. The result is an interactive diagram inside your Notion page that anyone with page access can pan and zoom.

Loading from GitHub raw URLs — the recommended pattern

Pointing the src attribute at a GitHub raw URL is the most maintainable pattern for living diagrams. The URL format is:

plaintext https://raw.githubusercontent.com/{owner}/{repo}/{branch}/{path}

For example:

`plaintext

When main.tf is updated and merged, the next page load will show the updated diagram. No documentation update required. No diagram export needed. The diagram is always synchronized with the code in your default branch.

For branch-specific documentation — for example, showing the architecture as it will look after a specific feature branch is merged — use the branch name in the URL:

`plaintext

This is particularly useful when combined with the GitHub Action, which posts a diagram to the PR. You can also link to branch-specific documentation that shows what the architecture will look like after the PR is merged, and the diagram will automatically become the "post-merge" diagram once the branch is merged to main.

For private repositories, GitHub raw URLs require authentication. In that case, you can either use the inline code approach (copy the relevant code into your documentation page directly) or host your own IaC files on an authenticated endpoint and point src at that.

Error handling and CORS considerations

When using the src attribute, the web component fetches the URL from the browser using the Fetch API. This means the target URL must be accessible from the user's browser and must allow cross-origin requests via CORS headers.

GitHub raw URLs (raw.githubusercontent.com) are served with permissive CORS headers — they allow requests from any origin, so they work out of the box. Most public file hosting services and CDNs also support CORS for public content.

If the src URL is on a private server or an origin that doesn't send CORS headers, the fetch will fail with a network error. In that case:

Use inline content instead of src
Configure your server to send Access-Control-Allow-Origin: * for the IaC files
Use a CORS proxy (only for non-sensitive content)
Generate the diagram URL server-side and embed it as a static iframe URL instead of using the web component's dynamic fetch

When a fetch fails, the component shows a visible error state — it doesn't silently disappear. Non-200 response, empty body, network error — you get "Could not load diagram source" in the widget and the actual error in the browser console, so you know what went wrong.

For inline content, there's no network request and no CORS consideration — the content is right there in the DOM, and the component reads it synchronously.

Privacy: what the embed does and doesn't send

Same privacy model as the rest of InfraSketch: your IaC code never touches InfraSketch servers. Here's exactly what happens when you use src:

The browser fetches the src URL — request goes to GitHub or wherever you're hosting the file, not to InfraSketch
File content lands in the browser
The component encodes it into a URL fragment (gzip + base64) in-memory
Creates an iframe pointing to https://infrasketch.cloud/#
Browser loads the InfraSketch web app — the HTTP request goes to our CDN, but fragments are never included in HTTP requests (that's the HTTP spec)
The web app decodes the fragment client-side and renders

What InfraSketch servers actually see: a request for the embed script, a request for the web app assets. That's it. No IaC code, no diagram content, no infrastructure metadata. Standard CDN logs with IP, user agent, timestamp — same as any website.

With inline content, step 1 doesn't happen at all. The only network contact is loading the web app assets.

A complete minimal embed page

Here's a full, self-contained HTML page that embeds a Terraform diagram using the web component. You can use this as a starting point for a GitHub Pages documentation page or any static HTML site:

`css

Network Architecture - Internal Docs

body { font-family: system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 20px; }
h1 { font-size: 24px; margin-bottom: 8px; }
p { color: #555; margin-bottom: 24px; }

Production Network Architecture
This diagram is generated live from the Terraform source in the infra repository.

Diagram always reflects the current main branch. View source

This page requires no build step, no server-side processing, and no InfraSketch account. It works as a standalone HTML file served from any static host.

FAQ

Does the embed component work with private GitHub repositories?

The src fetch runs in the user's browser, so private GitHub raw URLs would need a token — which you obviously can't bake into a public HTML page. For private repos, use inline content instead: copy the relevant Terraform or Kubernetes code between the tags. Or generate the URL server-side with npx infrasketch main.tf --no-open and embed it as a static iframe. The state is in the fragment, so it doesn't expire.

Will the diagram break if infrasketch.cloud goes down?

If the web app is unavailable, iframes and components pointing to it will show an error. If you need high reliability for critical docs, pre-generate the URL with the CLI and embed it as a static iframe — then if you ever want to self-host the web app, the same URL works unchanged.

Can I control the diagram layout or colors through the embed?

Not through attributes currently. Users can pan, zoom, and move nodes interactively inside the embedded diagram. If you want a specific layout, open the diagram in the full web app, arrange it, and use the "share" URL — it encodes the adjusted node positions in the fragment. Custom theming via attributes is on the roadmap.

Does the component support lazy loading for pages with many diagrams?

Yes — it uses IntersectionObserver internally to defer fetching and rendering until the element is near the viewport. Put 10 diagrams on a page and only the visible ones actually load. The rest wait until you scroll to them. This makes diagram-heavy runbooks and wikis load fast enough to be practical.

Can I use the embed component with React, Vue, or other frameworks?

Web components work natively in all modern browsers, so any framework is fine. React treats it like any other HTML element. Vue might show an "unknown element" warning — add infra-sketch to compilerOptions.isCustomElement in your Vite/Vue config to silence it. No npm package needed — just the script tag.

Turn your IaC docs into living architecture diagrams Add one script tag to your docs site and your diagrams stay synchronized with your code automatically. Try it in the browser first — no account needed. Try InfraSketch Free →

Visualize Infracost on Your Architecture Diagram

Raghvendra Pandey — Tue, 12 May 2026 01:21:28 +0000

Infracost estimates your monthly cloud bill from Terraform code before you deploy. But its output — a long table of resource costs in the terminal — makes it hard to see which part of your architecture is driving spend. Is it the database? The NAT gateway? The EC2 fleet?

InfraSketch's cost overlay answers this visually. Run infracost breakdown --format json, paste the output, and every resource node in your architecture diagram gets a colour-coded cost pill showing its monthly cost. Green for cheap, red for expensive. See your cloud bill spatially, in context.

TL;DR: Generate your diagram → click 💰 Cost → paste infracost breakdown --path . --format json output → colour-coded cost badges appear on every resource. Free, no login, stays in your browser.

The problem with cost tables

Here's a typical Infracost breakdown summary:

Name                                         Monthly Qty  Unit   Monthly Cost
aws_instance.web_server                               730  hours        $73.00
aws_db_instance.postgres                              730  hours       $185.10
aws_nat_gateway.main                                    1  months        $32.40
aws_elasticache_cluster.sessions                      730  hours        $25.55
...
TOTAL                                                                   $316.05

You can see the numbers, but not the relationships. The NAT gateway costs $32/month — but is it serving one subnet or eight? The RDS instance at $185/month — what's connected to it, and could you downsize it without breaking the data pipeline? The table doesn't tell you.

A visual overlay does. You see the RDS instance sitting inside its private subnet, connected to the application servers and the analytics Lambda. You see the NAT gateway at the boundary of the public subnet serving the entire private tier. Cost becomes architectural context, not just numbers.

Step-by-step: generate and overlay

Install Infracost

brew install infracost # macOS # or curl -fsSL https://raw.githubusercontent.com/infracost/infracost/master/scripts/install.sh | sh infracost auth login # free account needed for cost data
Run the breakdown and save JSON

infracost breakdown --path . --format json > infracost.json

For a specific Terraform module: infracost breakdown --path ./modules/networking --format json > infracost.json For Terragrunt: infracost breakdown --path . --terragrunt-flags="--terragrunt-working-dir ." --format json > infracost.json
Generate your architecture diagram Open infrasketch.cloud, paste your Terraform HCL (or plan JSON for the most accurate results), and click Generate Diagram.
Open the Cost overlay In the export bar at the bottom of the page, click the 💰 Cost button. A modal opens with a textarea.
Paste the Infracost JSON and apply Copy the contents of infracost.json, paste into the textarea, and click Apply. Cost pills appear on every resource that Infracost priced.

Reading the cost colour scale

Each node gets a pill badge at its bottom centre showing the monthly cost estimate. The colour indicates cost tier:

Free / $0
<$10/mo
$10–$100/mo
$100–$500/mo

$500/mo

Resources with no cost data (e.g., IAM roles, security groups, Route 53 records) don't get a badge. Resources Infracost estimates as free (Lambda free tier, CloudWatch basic metrics) get a grey "Free" pill.

Hover over any pill to see the cost breakdown by component. For example, an RDS instance might show:

aws_db_instance.postgres
Database instance (db.t3.medium): $60.74/mo
Storage (gp2, 100GB): $11.50/mo
Backup storage: $0.00/mo

This tells you exactly which component is driving cost — useful when deciding between instance types or storage tiers.

Common cost patterns to spot in the diagram

The hidden NAT gateway cost

NAT gateways often appear as a single small node in the architecture but carry significant cost: $0.045/GB data processed plus the hourly charge. In the diagram, a yellow/orange NAT gateway node connected to dozens of private resources immediately flags a potential optimization — could some of those services use VPC endpoints (free) instead?

Idle or over-provisioned compute

An EC2 cluster with red-tier cost badges ($500+/mo) that's only connected to a dev database and a single Lambda is a red flag. The spatial context makes over-provisioning obvious in a way that the cost table alone doesn't.

Cascading storage costs

S3 buckets, EBS volumes attached to EC2 instances, and RDS storage often combine to form a significant portion of the bill. When you see multiple amber/orange storage nodes grouped in the same subnet, you can immediately identify candidates for lifecycle policies or right-sizing.

Multi-AZ vs single-AZ databases

A Multi-AZ RDS setup doubles the instance cost. In the diagram, both the primary and standby show up as nodes. If the standby has a red cost badge and your app is internal-only, that's a candidate for a discussion about RTO/RPO tradeoffs vs. cost.

Combining with the security overlay

InfraSketch supports both the Checkov security overlay (🛡) and the Infracost cost overlay (💰) simultaneously. Security badges appear top-right, cost pills appear bottom-centre — no overlap.

The most actionable pattern is a resource that's both expensive and misconfigured: orange/red cost pill plus a red security border. That's a double priority — it's costing you money and creating compliance risk.

Conversely, a resource with many security failures but a "Free" cost pill might be lower priority to fix urgently — though you should still fix it. The combined view helps teams triage when they have limited sprint capacity.

Using Infracost in CI for cost-aware PR reviews

Infracost has a native GitHub Action that posts cost diffs on pull requests. Combine it with the InfraSketch GitHub Action for full cost-and-architecture visibility on every IaC PR:

# .github/workflows/iac-review.yml
name: IaC Review
on:
pull_request:
paths: ['**/*.tf']

jobs:
diagram:
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v4
- uses: pandey-raghvendra/infrasketch@v4
with:
github-token: ${{ secrets.GITHUB_TOKEN }}

cost:
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v4
- uses: infracost/actions/setup@v3
with:
api-key: ${{ secrets.INFRACOST_API_KEY }}
- run: infracost diff --path . --format json --out-file infracost.json
- uses: infracost/actions/comment@v3
with:
path: infracost.json
behavior: update

The InfraSketch job posts diagram links for changed files. The Infracost job posts a cost diff table showing exactly how much the PR changes the monthly bill. Reviewers see both — architecture impact and cost impact — without leaving the PR page.

Note: the Infracost GitHub Action requires an INFRACOST_API_KEY secret (free account at infracost.io). The InfraSketch Action requires only the built-in GITHUB_TOKEN.

Supported Terraform patterns

HCL files

The simplest case: paste one or more .tf files into InfraSketch, run Infracost against the same directory, and overlay. Resource names match directly since both tools read the same HCL.

Terraform plan JSON (most accurate)

For accurate cost estimates — especially when your code uses count, for_each, or variable values — use plan JSON for both tools:

# Generate plan JSON
terraform plan -out=tfplan
terraform show -json tfplan > tfplan.json

# Diagram: paste tfplan.json into InfraSketch
# Cost: point Infracost at the plan
infracost breakdown --path tfplan.json --format json > infracost.json

This gives Infracost the resolved resource counts (e.g., 3 EC2 instances from a count = 3 expression) and gives InfraSketch the same expanded resource list. Matching is more accurate.

Terragrunt

infracost breakdown --path . --format json > infracost.json

Infracost detects Terragrunt automatically. For the diagram, paste the underlying .tf files (not terragrunt.hcl) or use plan JSON.

Troubleshooting

No cost pills appear

Check that you pasted the full JSON (starting with {"version":). Infracost's JSON format starts with a version field and a projects array. If you pasted the summary output instead of the JSON, it won't parse.

Also verify: run cat infracost.json | python3 -m json.tool to confirm it's valid JSON. If Infracost errored silently, it may have written an empty or partial file.

Some resources have pills, others don't

Infracost only prices resources with a known pricing model. IAM roles, security groups, VPCs, subnets, route tables, and many other resources are free in AWS and won't appear in Infracost's output — so they won't get a pill. This is expected behaviour.

Resource names don't match

If you generated the diagram from plan JSON but ran Infracost on raw HCL (or vice versa), resource names may differ. Plan JSON includes module paths in resource names. Run both tools on the same input format for best matching.

Costs look wrong

Infracost estimates are based on on-demand pricing in the region detected from your Terraform config. Reserved instance pricing, Savings Plans, enterprise discounts, and free tier credits are not included by default. The estimates are a useful relative comparison between resources, not an exact billing forecast.

Frequently asked questions

Does InfraSketch send my cost data to any server?

No. The Infracost JSON is parsed entirely in your browser in JavaScript. No data is transmitted anywhere. Your infrastructure cost breakdown stays private.

Do I need an Infracost account to use the overlay?

You need an Infracost account (free) to run infracost breakdown — it calls the Infracost API to fetch cloud pricing data. You don't need any account to use InfraSketch or its cost overlay. Just paste the JSON output InfraSketch generates.

Can the overlay show hourly costs instead of monthly?

Not currently. The pill shows monthly cost, which is the standard unit for comparing infrastructure spend. Hover on the pill to see the components breakdown, which is also monthly.

Does it work with AWS CDK, CloudFormation, or Bicep?

Infracost natively supports Terraform and Terragrunt. For CDK and CloudFormation, Infracost has experimental support via the --format=cloudformation flag. For Bicep (Azure), there's no native Infracost support yet — the azure-cost CLI or Azure Cost Management export can serve a similar purpose, but InfraSketch's overlay only parses Infracost's JSON schema.

What if my infrastructure spans multiple Terraform workspaces or accounts?

Run Infracost separately for each workspace and merge the outputs using infracost output --path infra1.json --path infra2.json --format json > merged.json. Paste the merged JSON into InfraSketch for a combined overlay.

Can I keep the cost overlay when exporting to PNG or SVG?

Yes. Export PNG or SVG with the overlay active — cost pills are rendered into the export. This is useful for attaching to Confluence pages, architecture review docs, or FinOps reports. The share link encodes the diagram structure but not the overlay state.

Try the cost overlay now Generate your architecture diagram and see monthly costs per resource — free, no login, nothing leaves your browser. Open InfraSketch →

Related guides

GitHub Action: Auto-Post Architecture Diagrams on IaC PRs

Raghvendra Pandey — Tue, 12 May 2026 01:20:56 +0000

Every time your team opens a pull request that changes Terraform, Kubernetes, Bicep, or any other IaC file, reviewers face the same problem: they have to mentally simulate what the code change does to the actual infrastructure. The InfraSketch GitHub Action solves this by automatically posting a clickable architecture diagram link in the PR comment — no secrets, no paid plan, no setup beyond a single workflow file.

View on GitHub Marketplace Free, no secrets needed. Works with Terraform, Bicep, Pulumi, Kubernetes, CloudFormation, CDK, and Docker Compose. Install the Action →

What the action does

When a contributor opens or updates a pull request, the action:

Reads the list of changed files from the GitHub API
Filters for IaC files — .tf, .bicep, terragrunt.hcl, Kubernetes YAML, CloudFormation templates, Pulumi TypeScript/Python, and Docker Compose files
Reads each file's content and auto-detects its format
Encodes the content into a shareable infrasketch.cloud URL
Posts a PR comment with a table of diagram links — one per IaC file
Updates the existing comment on subsequent pushes rather than spamming new ones

The PR comment looks like this:

## 🗺️ InfraSketch — Architecture Diagrams

Found 2 infrastructure files in this PR.

| File              | Format     | Status      | Diagram         |
|-------------------|------------|-------------|-----------------|
| infra/main.tf     | Terraform  | ✏️ modified | View diagram →  |
| k8s/deploy.yaml   | Kubernetes | 🆕 added    | View diagram →  |

Clicking "View diagram →" opens InfraSketch in the browser with the file content pre-loaded. The diagram renders immediately — no login, no account, nothing to install.

Setup: 2 minutes

Create the following file in your repository at .github/workflows/infrasketch.yml:

name: Architecture Diagram

on:
pull_request:
types: [opened, synchronize, reopened]
paths:
- '**/*.tf'
- '**/*.tfvars'
- '**/*.bicep'
- '**/terragrunt.hcl'
- '**/docker-compose*.yml'
- '**/docker-compose*.yaml'
- '**/__main__.py'
- '**/index.ts'
- '**/*.yaml'
- '**/*.yml'

jobs:
diagram:
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v4

- uses: pandey-raghvendra/infrasketch@v4
with:
github-token: ${{ secrets.GITHUB_TOKEN }}

Note: permissions: pull-requests: write must be set on the job, not just the workflow. The github-token input defaults to the automatic token — you don't need to create any secrets.

That's it. Open a PR that touches a .tf file and the action posts the comment automatically.

Supported formats

The action auto-detects format from file extension and content — you don't need to configure anything per-format:

Terraform — *.tf, *.tfvars
Terragrunt — terragrunt.hcl
Bicep / ARM — *.bicep, ARM JSON templates (detected by schema URL)
Kubernetes — *.yaml / *.yml files containing apiVersion: and kind:
CloudFormation — YAML/JSON containing AWSTemplateFormatVersion
CDK — synthesized CloudFormation JSON with Resources key
Pulumi — __main__.py or index.ts with @pulumi/ imports
Docker Compose — docker-compose*.yml, compose.yml

How it differs from other diagram PR tools

Several tools post infrastructure-related comments on PRs, but they all have meaningful trade-offs:

Pluralith — purpose-built for Terraform visualization with a beautiful diff view. Excellent tool, but the CI integration starts at $250/month per workspace. Free tier is local-only.
Infracost — posts cost estimates as text tables. Doesn't generate architecture diagrams.
Holori — generates diagrams and posts PR comments. Requires signup and a connected cloud account for full functionality.
InfraSketch GitHub Action — fully free, no account, no secrets beyond the automatic GITHUB_TOKEN. Diagram links open instantly in any browser. Supports 8 IaC formats without per-format configuration.

The trade-off: InfraSketch does static analysis of the changed files rather than running terraform plan. This means it works without cloud credentials and without Terraform being initialized, but it won't show resources created by count or for_each expressions that depend on variable values.

Customizing which files trigger the action

The paths filter in the workflow controls which file changes trigger the action. You can narrow it to specific directories:

on:
pull_request:
paths:
- 'infra/**/*.tf'
- 'k8s/**/*.yaml'
- 'deployments/**'

Or broaden it to catch all YAML files in a monorepo:

on:
pull_request:
paths:
- '**/*.tf'
- '**/*.yaml'
- '**/*.yml'

Large files: Files over 200 KB are detected but skipped — a warning appears in the PR comment. For large Terraform projects, use plan JSON (terraform show -json) pasted directly into infrasketch.cloud for the most accurate diagram.

Using it with a monorepo

InfraSketch works well in monorepos where infrastructure lives alongside application code. The action only processes files listed as changed in the PR — it won't scan the entire repository. A PR that changes services/api/main.go and infra/api/main.tf will post a diagram link only for infra/api/main.tf.

If you have multiple Terraform root modules in a monorepo (e.g. infra/vpc/, infra/eks/, infra/rds/), changes to any of them generate separate diagram links in the same PR comment table.

Combining with Checkov and Infracost

InfraSketch pairs naturally with other IaC PR tools. A common setup combines three GitHub Actions on the same PR:

InfraSketch — architecture diagram links for visual review
Checkov — security scan results as a text comment
Infracost — cost estimate diff as a text comment

Beyond the PR comment, InfraSketch lets you paste the Checkov or Infracost JSON output directly into the diagram tool to overlay security findings or cost estimates visually on the architecture nodes. See the Checkov overlay guide and Infracost overlay guide for details.

# .github/workflows/iac-checks.yml — combine all three
name: IaC Checks

on:
pull_request:
paths: ['**/*.tf', '**/*.yaml']

jobs:
diagram:
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v4
- uses: pandey-raghvendra/infrasketch@v4
with:
github-token: ${{ secrets.GITHUB_TOKEN }}

cost:
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v4
- uses: infracost/actions/setup@v3
with:
api-key: ${{ secrets.INFRACOST_API_KEY }}
- run: infracost diff --path . --format json --out-file infracost.json
- uses: infracost/actions/comment@v3
with:
path: infracost.json
behavior: update

security:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: bridgecrewio/checkov-action@v12
with:
directory: .
output_format: cli

Frequently asked questions

Does the action need AWS, Azure, or GCP credentials?

No. InfraSketch does static analysis of your HCL/YAML source code — it never calls cloud APIs. Only GITHUB_TOKEN is needed, and that's provided automatically by GitHub Actions.

Does my code get sent to InfraSketch servers?

No. The action encodes your file content as a base64 URL hash. The diagram link opens infrasketch.cloud — a static website that decodes the hash in the browser and renders the diagram client-side. No content ever reaches InfraSketch servers.

The comment isn't appearing — what's wrong?

Check that permissions: pull-requests: write is set on the job block, not just the workflow. Also verify the paths filter matches your changed files — if no matching files changed, the action exits silently.

Can I use it with GitHub Enterprise?

Yes. The action uses the standard GitHub API via GITHUB_TOKEN — the same mechanism works on GitHub Enterprise Server 3.x+. No additional configuration needed.

Will it work with private repositories?

Yes. The GitHub Action runs within your repository's GitHub Actions context. The generated diagram links encode content in the URL hash — they open InfraSketch in the browser locally. Private repo code is never transmitted anywhere.

Install the InfraSketch GitHub Action Free, no secrets, works in 2 minutes. Supports Terraform, Bicep, Pulumi, Kubernetes, CloudFormation, CDK, Terragrunt, and Docker Compose. View on GitHub Marketplace →

Visualize Checkov Results on Your Architecture Diagram

Raghvendra Pandey — Tue, 12 May 2026 01:20:47 +0000

Checkov finds hundreds of misconfigurations in your Terraform, Kubernetes, and CloudFormation code — but its output is a wall of terminal text. Resource names like aws_s3_bucket.data_lake and check IDs like CKV_AWS_18 don't tell you much when you're looking at 60 resources across 12 files.

InfraSketch's security overlay fixes this. Run checkov -o json, paste the output, and every failing resource gets a red border directly on your architecture diagram. Hover for the failing check IDs. See at a glance which part of your infrastructure is the riskiest.

TL;DR: Generate your diagram in InfraSketch → click 🛡 Security → paste checkov -d . -o json output → failing resources highlighted instantly. Free, no login, nothing leaves your browser.

Why "checkov diagram" matters

When Checkov reports that CKV_AWS_18 failed on aws_s3_bucket.access_logs, your next question is always: "Where does this bucket sit in my architecture? What connects to it? Is it public-facing or internal?" The terminal output can't answer that. You have to mentally map resource names to your architecture.

A visual overlay eliminates this mental overhead. You see the bucket in context — inside its VPC, connected to the CloudFront distribution, adjacent to the Lambda that writes to it. The security failure becomes spatially meaningful, not just a name on a list.

This matters even more when you're reviewing someone else's infrastructure. You can hand a reviewer a diagram link with security failures already highlighted, and they immediately understand scope without reading any code.

Step-by-step: generate and overlay

Run Checkov and save JSON output checkov -d . -o json > checkov-results.json If you're scanning a specific file: checkov -f main.tf -o json > checkov-results.json For Kubernetes manifests: checkov -d ./k8s -o json > checkov-results.json
Generate your architecture diagram Open infrasketch.cloud, paste your Terraform (or Kubernetes YAML, CloudFormation, etc.), and click Generate Diagram. Your resources appear as nodes with official cloud icons.
Open the Security overlay In the export bar at the bottom, click the 🛡 Security button. A modal opens with a textarea.
Paste the Checkov JSON output Open checkov-results.json, copy its contents, paste into the textarea, and click Apply.
Review the highlighted diagram Resources with failing checks get a red border ring and a red badge in the top-right corner showing the number of failing checks. Hover over any red badge to see the specific check IDs in a tooltip (e.g., CKV_AWS_18, CKV_AWS_19, CKV_AWS_21).

The overlay is non-destructive — click Clear in the modal to remove all highlighting without regenerating the diagram. You can also close and re-apply with different Checkov output (e.g., after a targeted scan).

What Checkov checks does InfraSketch cover?

InfraSketch maps Checkov's resource IDs (e.g., aws_s3_bucket.my_bucket) to diagram nodes using the resource field from each failed check in the JSON output. Any check that Checkov reports a failure on will be highlighted — there's no fixed list on InfraSketch's side.

That said, here are the most common AWS checks you'll see highlighted:

Check ID	Resource Type	Description
CKV_AWS_18	S3 Bucket	Access logging enabled
CKV_AWS_19	S3 Bucket	Server-side encryption enabled
CKV_AWS_20	S3 Bucket	Bucket not publicly accessible
CKV_AWS_21	S3 Bucket	Versioning enabled
CKV_AWS_23	CloudFront	Minimum TLS 1.2 enforced
CKV_AWS_57	S3 Bucket	Block public ACLs
CKV_AWS_91	ALB	Access logging enabled
CKV_AWS_116	Lambda	Dead letter queue configured
CKV_AWS_149	Secrets Manager	KMS CMK used for encryption
CKV_K8S_14	Pod	Container does not run as root

The same principle applies for Azure and GCP checks — as long as the resource name in the Checkov JSON matches the resource name in your IaC code, the overlay works.

Understanding the overlay: what the red badges mean

Each highlighted node shows a number badge in the top-right corner. That number is the count of failing checks for that specific resource. A badge showing 5 means Checkov found five distinct misconfigurations on that resource.

Hover over the badge to see a tooltip listing the check IDs. For example:

aws_s3_bucket.raw_data
CKV_AWS_18: Access logging not enabled
CKV_AWS_19: Server-side encryption not configured
CKV_AWS_20: Bucket is publicly readable
CKV_AWS_21: Versioning not enabled
CKV_AWS_57: Public ACLs not blocked

This tells you the full picture without leaving the diagram. A resource with a badge of 5 on a public-facing S3 bucket is an obvious priority. A badge of 1 on an internal Lambda with a missing dead-letter queue is much lower risk.

High-risk pattern to watch for: Any storage resource (S3, RDS, DynamoDB) with red borders that sits outside a VPC boundary in the diagram is likely exposed. Prioritize these above all else.

Combining security and cost overlays

InfraSketch supports two overlays simultaneously: Checkov security (🛡) and Infracost cost (💰). You can apply both at once — security badges appear top-right, cost pills appear bottom-centre, so they don't overlap.

This combination is especially useful for prioritization. A resource that's both expensive and misconfigured (red border + amber/red cost badge) is a double priority: it's costing you money and creating risk. A cheap misconfigured resource can be triaged differently.

To use both overlays:

Generate the diagram
Apply Checkov overlay via 🛡 Security
Apply Infracost overlay via 💰 Cost (see the Infracost guide)
Both overlays remain active — export as PNG or SVG to share

Using the overlay in pull request reviews

The most powerful workflow is combining the Checkov overlay with the InfraSketch GitHub Action. The action auto-posts diagram links on every IaC PR. Reviewers can then manually apply the Checkov overlay on their local scan, or you can run Checkov in CI and include results in the PR comment.

Here's a CI workflow that posts both the diagram link and the Checkov scan summary:

# .github/workflows/infrasketch-security.yml
name: IaC Diagram + Security Scan
on:
pull_request:
paths: ['**/*.tf', '**/*.yaml']

jobs:
diagram:
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v4
- uses: pandey-raghvendra/infrasketch@v4
with:
github-token: ${{ secrets.GITHUB_TOKEN }}

checkov:
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v4
- uses: bridgecrewio/checkov-action@master
with:
directory: .
framework: terraform
output_format: github_failed_only

The diagram job posts a table with diagram links. The Checkov job posts inline PR annotations on the failing lines. Together, reviewers get both spatial context (which resources, where in the architecture) and precise line-level failures.

Supported IaC formats for the security overlay

The security overlay works with any diagram InfraSketch can generate. Checkov supports the same formats — so you can overlay results from any Checkov-compatible scan:

Terraform HCL — checkov -d . --framework terraform -o json
Terraform plan JSON — checkov -f tfplan.json --framework terraform_plan -o json
CloudFormation — checkov -d . --framework cloudformation -o json
Kubernetes YAML — checkov -d ./k8s --framework kubernetes -o json
Docker Compose — checkov -f docker-compose.yml --framework dockerfile -o json
Bicep / ARM — checkov -f template.bicep --framework bicep -o json

Paste the resulting JSON into InfraSketch's Security overlay after generating the diagram for that format.

Exporting diagrams with security overlays

Once you've applied the Checkov overlay, you can export the diagram with the security highlighting preserved:

PNG (2× retina) — best for Confluence pages, Notion, Slack, or Jira tickets. Red borders and badges export cleanly.
SVG — scalable, icons inlined. Good for design tools or documentation systems that support SVG.
Share link — copies a URL that encodes your diagram state. The security overlay state is not included in the share link (the receiver needs to apply it themselves), but the diagram structure is preserved.

For PNG export: click Export PNG in the export bar. The overlay renders at full resolution. For documentation-heavy teams, this is the fastest way to attach a security-annotated architecture snapshot to a ticket or post-mortem.

Troubleshooting common issues

No resources highlighted after pasting Checkov output

The overlay matches on the resource name exactly as it appears in your IaC code (e.g., aws_s3_bucket.my_bucket). If your diagram was generated from a Terraform plan JSON, resource names include a module path prefix (module.storage.aws_s3_bucket.my_bucket). InfraSketch strips common module prefixes during matching, but if resources still don't match, try:

Regenerate the diagram from the same HCL files that Checkov scanned (not plan JSON)
Check the Checkov JSON for the exact resource field value and compare to node IDs in the diagram
Ensure you're pasting the full JSON (not just the summary section)

Checkov output is an array, not a single object

When scanning multiple frameworks together, Checkov sometimes wraps results in a JSON array ([{...}, {...}]). InfraSketch handles both formats — array-wrapped and single-object — automatically.

Only some resources are highlighted, not all failing ones

This usually means some resources in the Checkov scan correspond to files that weren't included in the diagram. For example, if your diagram shows only the networking layer but Checkov scanned the whole codebase, compute-layer failures won't have matching nodes to highlight. Generate a diagram from the same scope as the Checkov scan.

Frequently asked questions

Does InfraSketch send my Checkov output to any server?

No. Everything runs in your browser. The Checkov JSON is parsed in JavaScript on your machine. Nothing is transmitted — no analytics, no logging, no server-side processing. Your security findings stay private.

Can I overlay Checkov results from a CI/CD pipeline?

Yes. Run checkov -d . -o json > checkov.json as a CI step, download the artifact, and paste it into the InfraSketch security overlay. The process is identical whether you ran Checkov locally or in GitHub Actions, GitLab CI, or Jenkins.

Does the overlay work with Checkov's SARIF output?

Not currently. InfraSketch parses Checkov's -o json format, which includes the results.failed_checks array with resource fields. SARIF is a different schema. Use -o json (not -o sarif) when generating output for InfraSketch.

Can I pass Checkov results while skipping certain checks?

Yes — filter before scanning. Use checkov --skip-check CKV_AWS_18,CKV_AWS_21 -d . -o json to exclude checks you've accepted as known risks. Only the remaining failures appear in the JSON, so only those get highlighted.

Does the overlay work with custom Checkov policies?

Yes. Custom policies that output the standard Checkov JSON format (with results.failed_checks[].resource) work identically to built-in checks. InfraSketch doesn't validate check IDs — it just reads the resource names and highlights them.

Can I use this with Bridgecrew / Prisma Cloud results?

Bridgecrew and Prisma Cloud use Checkov under the hood and can export in the same JSON format. As long as the output includes a results.failed_checks array with resource fields, InfraSketch can parse it.

Try the security overlay now Generate your architecture diagram and overlay Checkov results — free, no login, nothing leaves your browser. Open InfraSketch →

Related guides

Terraform Diagram Generator — Visualize HCL Architecture Instantly

Raghvendra Pandey — Tue, 12 May 2026 00:28:34 +0000

Paste your Terraform HCL into InfraSketch and get a full architecture diagram in seconds — AWS, GCP, and Azure resources auto-detected, grouped by layer, with official cloud provider icons. No CLI, no credentials, no signup. Everything runs in your browser.

Try it now — free Paste your .tf files and see the architecture diagram instantly. Open InfraSketch →

Why Terraform needs a diagram tool

A real-world Terraform codebase is hard to read as architecture. Resources live across dozens of files, module calls hide what actually gets deployed, and count / for_each meta-arguments mean one block can create ten resources. Reviewing a PR with 500 lines of HCL changes requires mental simulation to understand what the resulting infrastructure looks like.

Built-in options fall short. terraform graph outputs DOT format that, when rendered, produces an unreadable tangle of every internal dependency edge — providers, variables, locals, outputs — alongside actual resources. The AWS console shows deployed resources but not their relationships or intended topology. Visio and draw.io require manual box-drawing that drifts from the real infrastructure the moment someone runs terraform apply.

InfraSketch parses your HCL statically — no plan, no state, no AWS credentials required — and generates a topology diagram grouped by logical layer: Internet, Ingress, Compute, Data, Messaging, Security, and more. It works for AWS, GCP, and Azure resources in the same file.

How to generate a Terraform diagram

Open infrasketch.cloud. The Terraform tab is selected by default. Paste your HCL — one file, multiple concatenated files, or a partial module — and click Generate Diagram. The diagram renders immediately.

# Example: paste this into the Terraform tab
resource "aws_vpc" "main" {
cidr_block           = "10.0.0.0/16"
enable_dns_hostnames = true
}

resource "aws_subnet" "private" {
vpc_id            = aws_vpc.main.id
cidr_block        = "10.0.1.0/24"
availability_zone = "us-east-1a"
}

resource "aws_eks_cluster" "app" {
name     = "production"
role_arn = aws_iam_role.eks.arn

vpc_config {
subnet_ids = [aws_subnet.private.id]
}
}

resource "aws_rds_cluster" "db" {
cluster_identifier = "app-db"
engine             = "aurora-postgresql"
engine_version     = "15.4"
}

resource "aws_elasticache_replication_group" "cache" {
replication_group_id = "app-cache"
description          = "Redis for session data"
node_type            = "cache.t4g.micro"
}

Tip: You can paste multiple .tf files concatenated together. InfraSketch parses the full block structure, so cross-file references like aws_subnet.private.id resolve correctly for containment and connection detection.

What gets visualized

Resource grouping

Resources grouped into swimlanes — Networking, Compute, Database, Messaging, Security — for instant topology understanding.

VPC containment

Resources referencing a VPC via vpc_id are drawn inside the VPC boundary. Subnets appear as nested lanes.

Reference arrows

HCL references like aws_subnet.private.id and module.vpc.vpc_id become directed arrows between nodes.

Multi-cloud support

AWS, GCP, and Azure resource types all parse in the same file. Mixed-provider setups diagram correctly.

Three common Terraform patterns

Pattern 1: VPC + EKS + RDS (three-tier web app)

The most common AWS architecture: public subnets for load balancers, private subnets for application pods, isolated subnets for databases. InfraSketch detects the subnet references and draws each resource in its correct network zone.

resource "aws_vpc" "main" {
cidr_block = "10.0.0.0/16"
}

resource "aws_subnet" "public" {
vpc_id     = aws_vpc.main.id
cidr_block = "10.0.0.0/24"
}

resource "aws_subnet" "private" {
vpc_id     = aws_vpc.main.id
cidr_block = "10.0.1.0/24"
}

resource "aws_lb" "app" {
load_balancer_type = "application"
subnets            = [aws_subnet.public.id]
}

resource "aws_eks_cluster" "app" {
name = "production"
vpc_config {
subnet_ids = [aws_subnet.private.id]
}
}

resource "aws_db_instance" "postgres" {
engine         = "postgres"
instance_class = "db.t4g.medium"
db_subnet_group_name = aws_db_subnet_group.main.name
}

The diagram shows ALB in the public subnet, EKS in the private subnet, and RDS in the isolated database tier — with arrows following the actual HCL references.

Pattern 2: Lambda + SQS + DynamoDB (serverless event pipeline)

Serverless architectures have no VPC by default, so InfraSketch groups them by service category rather than network zone. Lambda functions, SQS queues, and DynamoDB tables each land in their logical tier.

resource "aws_sqs_queue" "jobs" {
name = "job-queue"
}

resource "aws_lambda_function" "processor" {
function_name = "job-processor"
runtime       = "python3.12"
handler       = "handler.main"
filename      = "lambda.zip"

environment {
variables = {
QUEUE_URL = aws_sqs_queue.jobs.url
TABLE     = aws_dynamodb_table.results.name
}
}
}

resource "aws_lambda_event_source_mapping" "trigger" {
event_source_arn = aws_sqs_queue.jobs.arn
function_name    = aws_lambda_function.processor.arn
}

resource "aws_dynamodb_table" "results" {
name         = "job-results"
billing_mode = "PAY_PER_REQUEST"
hash_key     = "jobId"

attribute {
name = "jobId"
type = "S"
}
}

Pattern 3: GCP Terraform with Cloud Run + Cloud SQL

InfraSketch supports GCP resources using the google_* provider prefix. Cloud Run services, Cloud SQL instances, Pub/Sub topics, GKE clusters, Cloud Storage buckets, and more all render with GCP icons.

resource "google_cloud_run_v2_service" "api" {
name     = "api"
location = "us-central1"

template {
containers {
image = "gcr.io/my-project/api:latest"
env {
name  = "DB_CONN"
value = google_sql_database_instance.main.connection_name
}
}
}
}

resource "google_sql_database_instance" "main" {
name             = "app-db"
database_version = "POSTGRES_15"
region           = "us-central1"
}

resource "google_pubsub_topic" "events" {
name = "app-events"
}

resource "google_storage_bucket" "assets" {
name     = "my-project-assets"
location = "US"
}

Supported resource types

InfraSketch maps 85+ resource types across all three major providers:

AWS networking: VPC, Subnet, ALB/NLB, Route 53, CloudFront, API Gateway, Transit Gateway, NAT Gateway
AWS compute: EC2, ECS, EKS, Lambda, Elastic Beanstalk, Auto Scaling Groups
AWS data: RDS, Aurora, DynamoDB, ElastiCache, Redshift, S3, Glacier
AWS messaging: SQS, SNS, EventBridge, Kinesis, MSK (Kafka)
AWS security: IAM, Security Groups, WAF, Shield, Secrets Manager, KMS
AWS observability: CloudWatch, X-Ray
GCP compute: GCE, GKE, Cloud Run, Cloud Functions, App Engine
GCP data: Cloud SQL, Bigtable, Firestore, Spanner, BigQuery, Cloud Storage
GCP networking: VPC, Load Balancer, Cloud DNS, Cloud CDN
GCP messaging: Pub/Sub, Dataflow
Azure: AKS, App Service, Functions, SQL, Cosmos DB, Service Bus, Key Vault, VNet, and 20+ more

Unrecognized resource types are silently skipped — they don't cause errors. The diagram shows what it knows and omits the rest.

How Terraform references become diagram connections

InfraSketch parses HCL attribute values for resource references in the pattern resource_type.resource_name.attribute. When it finds aws_subnet.private.id inside an aws_eks_cluster block, it draws an arrow from the EKS node to the subnet node. This covers the most common connection patterns:

vpc_id = aws_vpc.main.id → containment inside VPC boundary
subnet_ids = [aws_subnet.private.id] → placement in subnet lane
security_group_ids = [aws_security_group.app.id] → connection to security group node
db_subnet_group_name = aws_db_subnet_group.main.name → RDS in database tier
event_source_arn = aws_sqs_queue.jobs.arn → Lambda triggered by SQS

Module references like module.vpc.vpc_id also parse — the module name is shown as a dashed group boundary when module blocks are present in the input.

Export and share

Once your diagram is generated, export it in three formats:

PNG — paste into Confluence, Notion, Slack, or any wiki
SVG — scalable for presentations and design files
draw.io XML — import into draw.io or diagrams.net for manual editing and annotation

The Share button generates a URL with your diagram state encoded in the hash — shareable without any server, since InfraSketch is 100% client-side.

Terraform diagram generator use cases

PR reviews — paste a PR's .tf changes to see what new resources appear before merging
Onboarding — generate a diagram of your Terraform codebase and share it with new engineers instead of asking them to read HCL
Architecture review boards — export PNG for design review submissions without touching Visio or Lucidchart
Documentation — embed diagrams in README files, runbooks, and ADRs that stay in sync with your IaC
Incident response — quickly diagram the affected infrastructure during an outage to understand blast radius
Multi-cloud audits — diagram AWS + GCP or AWS + Azure resources from the same Terraform workspace

Generate your Terraform diagram now Paste any .tf file and see your infrastructure topology in seconds. Free, no signup, nothing leaves your browser. Open InfraSketch →

Frequently asked questions

Does InfraSketch run terraform plan or access my AWS account?

No. InfraSketch does static analysis of your HCL source code only. It never runs Terraform, never contacts AWS/GCP/Azure APIs, and never reads your state file. Your code is parsed locally in the browser and nothing is sent to any server.

Does it support Terraform modules?

InfraSketch parses module blocks and shows them as grouped boundaries in the diagram. Resources defined inside modules appear when you paste the module's .tf files into the input along with the root module — just concatenate the files together before pasting.

What about count and for_each resources?

Resources using count or for_each are shown as single nodes — InfraSketch doesn't expand them into multiple instances since it doesn't evaluate variable values. The diagram shows the intended architecture pattern rather than the exact instance count.

Can I use it with Terragrunt?

Yes — InfraSketch has a dedicated Terragrunt tab. Paste your terragrunt.hcl files to diagram the dependency graph between Terragrunt units. See the blog for a full Terragrunt walkthrough.

How is this different from terraform graph?

terraform graph outputs a raw dependency graph of every internal Terraform object — providers, variables, locals, outputs, and resources — which renders as an unreadable tangle for any real codebase. InfraSketch produces an architecture diagram grouped by logical layer, using only the resources you care about, with official cloud icons. It's intended for human communication, not debugging execution order.

Is it free?

Yes, InfraSketch is completely free with no usage limits. The source code is open on GitHub. There's no paid tier, no API key required, and no account to create.

Bicep Diagram Generator — Visualize Azure Bicep & ARM Templates Instantly

Raghvendra Pandey — Tue, 12 May 2026 00:16:39 +0000

InfraSketch supports Azure Bicep and ARM JSON templates. Paste your .bicep file or ARM azuredeploy.json into the Bicep / ARM tab and get a full architecture diagram in seconds — VNet containment, subnet placement, resource connections, and official Azure icons. No login, no credentials, everything runs in your browser.

Try it now Paste your Bicep or ARM JSON template and see the diagram instantly. Open InfraSketch →

Why Azure Bicep needs a diagram tool

Bicep is Microsoft's domain-specific language for Azure infrastructure. It compiles to ARM JSON and deploys via Azure Resource Manager. A production Bicep template can define dozens of resources — virtual networks, subnets, AKS clusters, API Management gateways, SQL servers, Key Vaults, Service Bus namespaces, and more. Reading that code to understand the topology is slow and error-prone.

ARM JSON is even harder. A 1,000-line azuredeploy.json with nested dependsOn arrays and resourceId() references takes real effort to parse mentally. The Azure portal shows deployed resources but not their relationships. Visio and draw.io require manual box-drawing. There's no free tool that takes your Bicep or ARM code and generates a diagram automatically — until now.

InfraSketch parses Bicep and ARM JSON directly in the browser. No Azure subscription required. No CLI. No compile step. Paste and generate.

How to use it

Open infrasketch.cloud, click the Bicep / ARM tab, paste your template, and click Generate Diagram. InfraSketch auto-detects whether the input is Bicep syntax or ARM JSON — you don't need to switch modes.

// Bicep example — paste this into the Bicep / ARM tab
param location string = 'eastus'

resource vnet 'Microsoft.Network/virtualNetworks@2023-04-01' = {
name: 'prod-vnet'
location: location
properties: {
addressSpace: { addressPrefixes: ['10.0.0.0/16'] }
}
}

resource appSubnet 'Microsoft.Network/virtualNetworks/subnets@2023-04-01' = {
parent: vnet
name: 'app'
properties: { addressPrefix: '10.0.1.0/24' }
}

resource aks 'Microsoft.ContainerService/managedClusters@2024-01-01' = {
name: 'prod-aks'
location: location
properties: {
agentPoolProfiles: [{ name: 'nodepool1', vnetSubnetID: appSubnet.id }]
}
}

Tip: InfraSketch handles both Bicep and ARM JSON automatically. Paste either format — the tool detects it from the syntax.

What gets visualized

VNet containment

Resources referencing a VNet via virtualNetworkId or parent: vnet are drawn inside the VNet boundary.

Subnet placement

Resources with vnetSubnetID or subnetId references are placed inside the correct subnet lane.

Connection arrows

ARM dependsOn and Bicep .id references between resources become directed arrows on the diagram.

Inline subnets

Subnets defined inside a VNet's properties.subnets array are automatically extracted and rendered.

Supported Azure resource types

InfraSketch maps 40+ Azure resource types from Bicep and ARM templates into diagram nodes with official Microsoft icons:

Networking: Virtual Networks, Subnets, Application Gateway, Load Balancer, Front Door, Traffic Manager, VPN Gateway, Azure Firewall, Bastion, NSG, DNS Zones
Compute: Virtual Machines, VM Scale Sets, AKS (Managed Clusters), Container Instances, App Service, Function Apps, Static Web Apps
Containers: Container Registry (ACR), AKS node pools
Data: SQL Server, SQL Database, Cosmos DB, PostgreSQL, MySQL, Redis Cache, Storage Accounts
Integration: Service Bus, Event Hub, API Management, SignalR, Web PubSub
AI & Analytics: Cognitive Services, Azure AI, Data Factory, AI Search
Security: Key Vault, NSG
Observability: Log Analytics Workspace, Application Insights

Resource types not yet in the mapping still parse — they're just omitted from the diagram rather than causing an error. Supported types grow with each release.

Bicep vs ARM JSON — both work

Bicep is the recommended authoring format for new Azure projects. ARM JSON is what Bicep compiles to, and what older templates use. InfraSketch supports both:

Bicep: Parses resource varName 'Type@version' = { ... } syntax. Resolves parent references for containment. Follows varName.id and varName.name references for connections.
ARM JSON: Parses the resources array in azuredeploy.json. Resolves dependsOn with resourceId() expressions. Reads properties.subnet.id and properties.virtualNetwork.id for containment.

{
"$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
"contentVersion": "1.0.0.0",
"resources": [
{
"type": "Microsoft.Network/virtualNetworks",
"name": "prod-vnet",
"apiVersion": "2023-04-01",
"location": "[resourceGroup().location]",
"properties": {
"addressSpace": { "addressPrefixes": ["10.0.0.0/16"] },
"subnets": [{ "name": "app", "properties": { "addressPrefix": "10.0.1.0/24" } }]
}
},
{
"type": "Microsoft.ContainerService/managedClusters",
"name": "prod-aks",
"apiVersion": "2024-01-01",
"location": "[resourceGroup().location]",
"dependsOn": ["[resourceId('Microsoft.Network/virtualNetworks', 'prod-vnet')]"],
"properties": {}
}
]
}

Use cases

Azure landing zone reviews — visualize your hub-and-spoke VNet topology before deploying
PR reviews — paste a PR's Bicep changes and see what new resources get created
Onboarding — share a diagram with new engineers instead of asking them to read raw ARM JSON
Documentation — export as PNG, SVG, or draw.io XML and embed in Azure DevOps wikis or Confluence
Migration planning — diagram existing ARM templates before converting them to Bicep modules
Architecture reviews — generate a diagram for an ARB submission without opening Visio

Bicep vs Terraform diagrams

If your team uses both Terraform (for AWS/GCP) and Bicep (for Azure), InfraSketch handles both in the same tool. Switch between the Terraform and Bicep / ARM tabs to diagram each side of a multi-cloud deployment. The layout zones — Internet, Ingress, Compute, Data, Messaging, Security — are consistent across providers, so diagrams from both tools are comparable at a glance.

Generate your Bicep diagram now Paste your .bicep file or azuredeploy.json into the Bicep / ARM tab. Free, no login, nothing leaves your browser. Open InfraSketch →

What's New in InfraSketch — May 2026: Pulumi & Kubernetes Support

Raghvendra Pandey — Thu, 30 Apr 2026 21:12:57 +0000

Two major new input formats land in InfraSketch this month: Pulumi TypeScript and Python, and Kubernetes YAML. Together they bring InfraSketch support to every major infrastructure-as-code tool in active use today.

Try the new formats now Click the Pulumi or Kubernetes tab and paste your code. Open InfraSketch →

Pulumi support — TypeScript & Python

New Pulumi tab

Parse Pulumi TypeScript (index.ts) and Python (__main__.py) directly — no compile step
95+ resource types across AWS, GCP, and Azure
VPC containment from vpcId: vpc.id / vpc_id=vpc.id references
Subnet placement from subnetId, subnets, subnetIds arguments
Connection arrows from variable references between resources
Auto-detects TypeScript vs Python from syntax
3 built-in examples: AWS production stack (TS), AWS serverless (Python), GCP Cloud Run (TS)

AWS resources covered: VPC, subnets, EC2, EKS, ECS, Lambda, RDS, DynamoDB, ElastiCache, S3, ALB, Route53, CloudFront, SQS, SNS, IAM, KMS, WAF, ECR, Auto Scaling, CloudWatch.

GCP resources covered: Compute Engine, GKE, Cloud Run, Cloud Functions, Cloud SQL, BigQuery, Spanner, Bigtable, Firestore, Redis, Pub/Sub, Cloud Storage, Secret Manager, KMS, IAM, DNS, Monitoring.

Azure resources covered: Virtual Networks, AKS, App Service, Functions, SQL, Cosmos DB, Key Vault, Container Groups, CDN Frontdoor, Redis, Service Bus, Event Hub.

Read the full guide: Pulumi Diagram Generator — Visualize Pulumi Infrastructure Instantly

Kubernetes YAML support

New Kubernetes tab

Parse multi-document YAML (documents separated by ---)
16 resource kinds: Deployment, StatefulSet, DaemonSet, Job, CronJob, Pod, ReplicaSet, Service, Ingress, NetworkPolicy, ConfigMap, Secret, PersistentVolumeClaim, PersistentVolume, ServiceAccount, HorizontalPodAutoscaler
Namespace grouping — resources grouped into labelled namespace boundaries from metadata.namespace
Selector-based connections — Service spec.selector matched to workload spec.selector.matchLabels
Ingress routing — spec.rules[].http.paths[].backend.service.name becomes Ingress→Service arrows
Volume/envFrom references — Deployment→ConfigMap and Deployment→Secret arrows from volume mounts and envFrom
HPA target links — spec.scaleTargetRef connects HPA to its scale target
1 built-in example: full-stack web app with Ingress, Service, Deployment, ConfigMap, Secret, HPA

Works with raw manifests, kubectl get all -o yaml output, Helm template output (helm template), and Kustomize builds (kustomize build).

Read the full guide: Kubernetes Diagram Generator — Visualize K8s YAML Instantly

Bug fixes

Fix Diagram display

Diagram panel no longer shows half the diagram when output is taller than the panel height
SVG height set to auto — aspect ratio preserved via viewBox
Diagram canvas scrolls from top rather than clipping vertically centered content

What's next

Auto-detect format — paste any IaC code and InfraSketch detects the format automatically
Keyboard shortcuts — generate, zoom, export without reaching for the mouse
More Kubernetes samples — microservices, ingress controller, monitoring stack
Bicep / ARM — Azure-native template formats

Feature requests and bug reports welcome on GitHub.

Try Pulumi and Kubernetes diagrams now Free, no login, nothing leaves your browser. Open InfraSketch →

Pulumi Diagram Generator — Visualize Pulumi Infrastructure Instantly

Raghvendra Pandey — Thu, 30 Apr 2026 21:12:25 +0000

InfraSketch now supports Pulumi. Paste your Pulumi TypeScript or Python code into the Pulumi tab and get a full architecture diagram in seconds — VPC containment, subnet grouping, resource connections, official AWS, GCP, and Azure icons. No login, no credentials, everything runs in your browser.

Try it now Paste your Pulumi TypeScript or Python code and see the diagram instantly. Open InfraSketch →

Why Pulumi needs a diagram tool

Pulumi lets you write infrastructure in real programming languages — TypeScript, Python, Go, C#. That's great for developer productivity, but it creates the same visibility problem every IaC tool has: your infrastructure lives in code, not in a picture. When a new engineer joins the team, or when you're reviewing a PR that adds a VPC and six new resources, reading TypeScript is not the fastest way to understand what gets built.

Unlike Terraform's HCL, Pulumi code doesn't have a declarative format that's easy to inspect at a glance. A function might conditionally create resources. Loops might generate dozens of similar components. The Pulumi console shows state, not topology. There's no built-in way to go from code to architecture diagram.

InfraSketch parses Pulumi TypeScript and Python directly — no compile step, no export, just paste and generate.

How to use it

Open infrasketch.cloud, click the Pulumi tab, paste your index.ts or __main__.py file, and click Generate Diagram. You can paste a partial file — InfraSketch handles incomplete code gracefully.

// Example: paste this into the Pulumi tab
import * as aws from "@pulumi/aws";

const vpc = new aws.ec2.Vpc("main", { cidrBlock: "10.0.0.0/16" });
const subnet = new aws.ec2.Subnet("public", {
vpcId: vpc.id,
cidrBlock: "10.0.1.0/24",
});
const igw = new aws.ec2.InternetGateway("igw", { vpcId: vpc.id });
const lb = new aws.lb.LoadBalancer("alb", { subnets: [subnet.id] });

Tip: Pulumi Python uses the same resource types with underscores — aws.ec2.Vpc in TypeScript is aws.ec2.Vpc in Python too. Both work with InfraSketch.

What gets visualized

VPC containment

Resources referencing a VPC via vpcId: vpc.id are drawn inside the VPC boundary automatically.

Subnet placement

Resources with subnetId or subnets arguments are placed in public or private subnet lanes.

Connection arrows

Variable references between resources — vpc.id, cluster.endpoint — become directed arrows on the diagram.

Multi-cloud

AWS, GCP, and Azure resources in the same stack all render on one diagram with their respective provider icons.

Supported Pulumi resource types

InfraSketch supports 95+ Pulumi resource types across AWS, GCP, and Azure. Key AWS resources include:

Networking: aws.ec2.Vpc, aws.ec2.Subnet, aws.ec2.InternetGateway, aws.ec2.NatGateway, aws.ec2.SecurityGroup, aws.ec2.TransitGateway
Compute: aws.ec2.Instance, aws.ec2.LaunchTemplate, aws.autoscaling.Group, aws.ecs.Cluster, aws.ecs.Service, aws.lambda_.Function
Containers: aws.eks.Cluster, aws.eks.NodeGroup, aws.ecr.Repository
Load balancing: aws.lb.LoadBalancer, aws.lb.TargetGroup, aws.alb.LoadBalancer
Data: aws.rds.Instance, aws.rds.Cluster, aws.dynamodb.Table, aws.elasticache.Cluster, aws.s3.Bucket
Messaging: aws.sqs.Queue, aws.sns.Topic
DNS & CDN: aws.route53.Zone, aws.cloudfront.Distribution
Security: aws.iam.Role, aws.kms.Key, aws.wafv2.WebAcl

GCP resources cover Compute Engine, GKE, Cloud Run, Cloud Functions, Cloud SQL, BigQuery, Spanner, Bigtable, Pub/Sub, Cloud Storage, Secret Manager, and more. Azure covers Virtual Networks, AKS, App Service, Functions, SQL, Cosmos DB, and Key Vault.

TypeScript vs Python

InfraSketch detects the language automatically. TypeScript uses camelCase arguments (cidrBlock, vpcId). Python uses snake_case (cidr_block, vpc_id). Both parse correctly — no pre-processing needed.

# Python example — works the same way
import pulumi_aws as aws

vpc = aws.ec2.Vpc("main", cidr_block="10.0.0.0/16")
subnet = aws.ec2.Subnet("public",
vpc_id=vpc.id,
cidr_block="10.0.1.0/24"
)
cluster = aws.eks.Cluster("eks", vpc_config=aws.eks.ClusterVpcConfigArgs(
subnet_ids=[subnet.id]
))

Use cases

Code reviews — paste a PR's Pulumi code and see the topology change visually before approving
Onboarding — share a diagram link instead of asking new engineers to read 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 for a fully editable diagram in your design doc
Multi-stack visibility — paste each stack separately and compare their architectures side by side

GCP resources with Pulumi

InfraSketch maps Pulumi GCP resources using the @pulumi/gcp (TypeScript) and pulumi_gcp (Python) providers. Supported GCP types include:

Networking: gcp.compute.Network, gcp.compute.Subnetwork, gcp.compute.Router, gcp.compute.GlobalAddress
Compute: gcp.compute.Instance, gcp.container.Cluster (GKE), gcp.cloudrun.Service, gcp.cloudfunctions.Function
Data: gcp.sql.DatabaseInstance, gcp.bigquery.Dataset, gcp.spanner.Instance, gcp.bigtable.Instance, gcp.storage.Bucket, gcp.firestore.Database
Messaging: gcp.pubsub.Topic, gcp.pubsub.Subscription
Security: gcp.kms.KeyRing, gcp.secretmanager.Secret, gcp.serviceaccount.Account

// GCP Pulumi example
import * as gcp from "@pulumi/gcp";

const network = new gcp.compute.Network("vpc", { autoCreateSubnetworks: false });
const subnet = new gcp.compute.Subnetwork("subnet", {
network: network.id,
ipCidrRange: "10.0.0.0/24",
});
const cluster = new gcp.container.Cluster("gke", {
network: network.name,
subnetwork: subnet.name,
});

Azure resources with Pulumi

Pulumi supports Azure via two providers: the classic @pulumi/azure (wraps Terraform AzureRM) and the native @pulumi/azure-native (generated directly from the ARM API). InfraSketch supports the classic provider's azurerm_* resource types through Pulumi's wrapping — pass Azure Classic Pulumi code and VNets, AKS clusters, App Services, SQL servers, and Key Vaults all render correctly.

Pulumi ComponentResource and abstractions

ComponentResource is Pulumi's way of grouping resources into reusable abstractions — similar to CDK Constructs. A ComponentResource might wrap a VPC, security groups, and route tables into a single "Network" abstraction. InfraSketch parses the resources at the leaf level (the actual aws.ec2.Vpc, aws.ec2.SecurityGroup calls inside the component), not at the component level, so you see the underlying resources on the diagram even if they're created inside a ComponentResource.

Pulumi vs CDK diagrams

Both Pulumi and CDK let you write infrastructure in TypeScript. The key difference for diagramming:

Pulumi: Paste source code directly — InfraSketch parses the TypeScript or Python text. No compilation step needed. Works best with files under ~500 lines; very large stacks may have resources that fall outside the parsed window.
CDK: Requires a cdk synth step first. The synthesized JSON is more complete and deterministic — every resource CDK creates, including automatically-generated IAM roles and security groups, appears in the output. CDK diagrams tend to show more nodes than Pulumi diagrams for equivalent infrastructure.

If you need the most accurate diagram, CDK wins because synthesis resolves all abstractions. If you want to paste and go without running any commands, Pulumi wins.

Frequently asked questions

Does InfraSketch support Pulumi Go or C#?

Not yet. The parser targets TypeScript (.ts) and Python (.py) syntax specifically. Go and C# support is on the roadmap. TypeScript is the most widely used Pulumi language, and Python is second.

What if my Pulumi code uses variables and loops?

InfraSketch uses regex-based parsing rather than evaluating the code. Resources created inside for loops will be detected but may appear as a single node (only the first loop iteration's resource constructor is matched). Static resource declarations work fully. Conditional resources (if (isProd) new aws.rds.Instance(...) appear in the diagram regardless of the condition value.

Can I paste multiple Pulumi files?

Yes — paste the contents of multiple files concatenated together. InfraSketch scans the entire input for resource constructors. If two files reference the same variable name for different resources, connections may link incorrectly, so it's best to paste one file at a time for large stacks.

Pulumi vs Terraform diagrams

If you're migrating from Terraform to Pulumi (or evaluating it), InfraSketch lets you diagram both. Paste your Terraform HCL in the Terraform tab and your equivalent Pulumi code in the Pulumi tab — the diagrams should look identical if the migration is complete. Differences become immediately visible.

Generate your Pulumi diagram now Paste your index.ts or __main__.py into the Pulumi tab. Free, no login, nothing leaves your browser. Open InfraSketch →

Kubernetes Diagram Generator — Visualize K8s YAML Instantly

Raghvendra Pandey — Thu, 30 Apr 2026 21:12:22 +0000

InfraSketch now supports Kubernetes YAML. Paste one or more manifest files into the Kubernetes tab and get a full architecture diagram in seconds — namespace grouping, Ingress-to-Service connections, selector-based Service-to-Deployment wiring, ConfigMap and Secret references, and HPA targets. No login, no cluster access, everything runs in your browser.

Try it now Paste your Kubernetes YAML manifests and see the diagram instantly. Open InfraSketch →

Why Kubernetes needs a diagram tool

A production Kubernetes application typically spans dozens of YAML files — Deployments, Services, Ingresses, ConfigMaps, Secrets, PVCs, HPAs, NetworkPolicies. When something breaks, or when you're onboarding a new engineer, the mental model of "how does this all connect" is not obvious from reading YAML alone.

Tools like kubectl show you state, not topology. k9s gives you resource lists. Lens visualizes the cluster but requires actual cluster access. There's no fast, offline way to go from a set of YAML manifests to a clear connection diagram — until now.

InfraSketch reads your YAML, infers the topology from label selectors and resource references, and renders it as a navigable diagram. No cluster access needed.

How to use it

Open infrasketch.cloud, click the Kubernetes tab, paste your manifests (multiple documents separated by ---), and click Generate Diagram.

kubectl get all -n my-namespace -o yaml | pbcopy   # macOS
kubectl get all -n my-namespace -o yaml | xclip      # Linux

Tip: Paste manifests from multiple namespaces at once — InfraSketch groups resources by namespace automatically using metadata.namespace.

How connections are inferred

InfraSketch doesn't need a running cluster to understand topology. It infers connections from the YAML itself:

Ingress → Service

Every spec.rules[].http.paths[].backend.service.name becomes a directed arrow from the Ingress to the target Service.

Service → Deployment

Service spec.selector is matched against Deployment/StatefulSet/DaemonSet spec.selector.matchLabels. Matching labels = connection arrow.

Deployment → ConfigMap/Secret

Volume mounts (configMap.name, secret.secretName) and envFrom references become arrows from the workload to the config resource.

HPA → target

spec.scaleTargetRef.name and kind links the HorizontalPodAutoscaler to its Deployment, StatefulSet, or ReplicaSet.

Supported Kubernetes resource kinds

Kind	Category	Notes
Deployment	Workload	Main compute unit; selector matching for Service connections
StatefulSet	Workload	Persistent workloads; selector matching
DaemonSet	Workload	Node-level agents; selector matching
Job	Workload	Batch tasks
CronJob	Workload	Scheduled batch tasks
Pod	Workload	Standalone pods
ReplicaSet	Workload	HPA scale target
Service	Networking	ClusterIP, NodePort, LoadBalancer — selector → Deployment arrows
Ingress	Networking	HTTP routing rules → Service arrows
NetworkPolicy	Networking	Pod-level network rules
ConfigMap	Config	Referenced via volume mounts and envFrom
Secret	Config	Referenced via volume mounts and envFrom
PersistentVolumeClaim	Storage	Volume mount references from workloads
PersistentVolume	Storage	Cluster-wide storage resources
ServiceAccount	Security	Pod identity
HorizontalPodAutoscaler	Autoscaling	Linked to scale target via scaleTargetRef

Namespace grouping

Every resource is placed inside a namespace boundary drawn on the diagram. Resources with the same metadata.namespace value are grouped together in a labelled box. Resources without a namespace go into the default namespace group.

When you paste manifests from multiple namespaces — say production, staging, and monitoring — each namespace gets its own group and resources stay organized. Cross-namespace connections (e.g., an Ingress controller in ingress-nginx routing to a Service in production) are drawn as arrows between the groups.

Example: a typical web application

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: web-ingress
namespace: production
spec:
rules:
- http:
paths:
- path: /
backend:
service:
name: web-service
port:
number: 80
---
apiVersion: v1
kind: Service
metadata:
name: web-service
namespace: production
spec:
selector:
app: web
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: web-deployment
namespace: production
spec:
selector:
matchLabels:
app: web
template:
spec:
containers:
- name: web
envFrom:
- configMapRef:
name: web-config
- secretRef:
name: web-secrets
---
apiVersion: v1
kind: ConfigMap
metadata:
name: web-config
namespace: production

Paste this and InfraSketch draws: Ingress → web-service → web-deployment → web-config with web-secrets also connected to the deployment. All resources inside a production namespace box.

Use cases

Onboarding — new engineers understand the application topology in minutes instead of reading dozens of YAML files
Code reviews — visualize the topology change when a PR adds a new Service or reconfigures selectors
Incident response — quickly see which Services connect to a misbehaving Deployment
Documentation — export as PNG or SVG and embed in runbooks, Confluence, or Notion
Architecture reviews — export as draw.io XML for a fully editable diagram in design docs

Works with Helm and Kustomize output too

InfraSketch reads rendered YAML — it doesn't need the original Helm chart or Kustomize overlay files. Render first, then paste:

helm template my-release ./my-chart | pbcopy          # macOS
kustomize build overlays/production | pbcopy            # macOS

This works especially well for understanding what a third-party Helm chart actually deploys before you install it in your cluster. Paste the rendered output for NGINX Ingress Controller, cert-manager, or Prometheus Operator and see exactly which resources they create before running helm install.

Common Kubernetes application patterns

Microservices with shared ingress

Multiple Deployments each with their own Service, all routed through a single Ingress with path-based rules, produce a fan-out diagram: one Ingress node with arrows to each Service, each Service connected to its backing Deployment. InfraSketch draws each Deployment-Service pair as a group and fans the Ingress connections out clearly.

Worker with queue

A pattern common in data pipelines: a Deployment that reads from an external queue has no Service (no inbound traffic) but does reference a Secret (for queue credentials) and a ConfigMap (for configuration). InfraSketch draws it as an isolated Deployment node with arrows to the Secret and ConfigMap — the asymmetry in the diagram immediately signals "this is a consumer, not a server."

StatefulSet with PVC

Databases deployed as StatefulSets typically have a PersistentVolumeClaim per replica. InfraSketch draws the StatefulSet connected to its PVC(s) in the storage zone, and any Service that selects the StatefulSet connected from the networking zone. This pattern clearly separates the compute layer from the storage layer in the diagram.

Multi-namespace monitoring stack

Paste Prometheus, Alertmanager, and Grafana manifests from a monitoring namespace alongside your application manifests from production. InfraSketch draws both namespace boxes side by side with the monitoring stack's ServiceMonitor references shown as cross-namespace connections.

Getting YAML from a live cluster

Several kubectl commands produce paste-ready YAML for InfraSketch:

# All resources in a namespace
kubectl get all -n production -o yaml

# Specific resource kinds
kubectl get deployments,services,ingresses -n production -o yaml

# A single Helm release's resources
helm get manifest my-release -n production

# All namespaces at once
kubectl get all --all-namespaces -o yaml

For large clusters, target specific namespaces or resource kinds to keep the diagram readable. Pasting ten namespaces of manifests will produce a technically accurate but visually dense diagram.

Frequently asked questions

Does InfraSketch need access to my cluster?

No. Everything runs in your browser. InfraSketch reads the YAML you paste — it never makes network requests to your cluster, cloud provider, or any external API. Your manifests never leave your browser tab.

My Service selector doesn't match any Deployment — why?

Selector matching requires the Service's spec.selector labels to be a subset of the Deployment's spec.selector.matchLabels. If the manifest is a Deployment template without matchLabels defined (e.g., only spec.template.metadata.labels), InfraSketch falls back to name-based matching. Paste both the Service and its target Deployment together for best results.

What about Custom Resource Definitions (CRDs)?

CRDs with unknown kind values are not mapped to diagram nodes — InfraSketch only renders the 16 built-in Kubernetes kinds listed above. Common operator resources (Certificates from cert-manager, VirtualServices from Istio) are skipped. Support for additional kinds will expand in future releases.

Can I diagram a single Pod's YAML?

Yes — paste any valid Kubernetes YAML, including standalone Pod specs. A single Pod with envFrom referencing a ConfigMap and a volume mounting a Secret will show the Pod connected to both config resources. It works best when you paste related manifests together so InfraSketch can draw the full connection graph.

Generate your Kubernetes diagram now Paste your K8s manifests — or run kubectl get all -o yaml and paste. Free, no login, no cluster access needed. Open InfraSketch →

CDK Architecture Diagram Generator — Visualize AWS CDK Apps Instantly

Raghvendra Pandey — Fri, 24 Apr 2026 22:12:26 +0000

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.

Try it now Paste your 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.

How to get your CDK synth output

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.

How it works under the hood

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.

What gets visualized

VPC containment

Resources with VpcId: { Ref: VPC } are drawn inside the VPC box. CDK's ec2.Vpc construct generates this automatically.

Subnet placement

Public and private subnet lanes from CDK's SubnetSelection — SubnetIds in the synthesized JSON places resources in the right lane.

Connection arrows

Every Fn::GetAtt between supported resources becomes a directed arrow — Lambda → IAM Role, ECS Service → ALB Target Group, etc.

Zone grouping

Internet zone (IGW, CloudFront), messaging zone (SQS, SNS), data zone (RDS, ElastiCache, S3) — all inferred automatically from resource type.

Supported CDK constructs (L1 / Cfn*)

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

Works with CDK for Terraform too

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.

Common CDK patterns and how they diagram

VPC with public and private subnets

CDK's ec2.Vpc construct with maxAzs: 2 synthesizes to one VPC, two public subnets, two private subnets, an Internet Gateway, two NAT Gateways, and four route tables — all in a single CloudFormation stack. InfraSketch renders the VPC container with public and private subnet lanes, places the NAT Gateways in the public lane, and draws the IGW in the Internet zone above.

// CDK TypeScript — synthesizes to ~30 CloudFormation resources
const vpc = new ec2.Vpc(this, 'Vpc', {
maxAzs: 2,
natGateways: 1,
subnetConfiguration: [
{ name: 'Public', subnetType: ec2.SubnetType.PUBLIC },
{ name: 'Private', subnetType: ec2.SubnetType.PRIVATE_WITH_EGRESS },
],
});

ECS Fargate service with ALB

The ecs_patterns.ApplicationLoadBalancedFargateService L3 construct synthesizes to an ECS Cluster, Fargate Task Definition, ECS Service, ALB, Target Group, Security Groups, and IAM Roles. InfraSketch places the ALB in the ingress zone, the ECS service in a private subnet, and draws connections from ALB → Target Group → Service.

Lambda with SQS trigger

When lambda.Function uses an SqsEventSource, CDK synthesizes an event source mapping resource alongside the Lambda and SQS Queue. InfraSketch draws the SQS Queue in the messaging zone with an arrow to the Lambda, matching the actual invocation direction.

Reading CDK-generated logical IDs

CDK generates stable but opaque logical IDs like VpcPublicSubnet1Subnet5C2D37C4 and ECSClusterA592C0A4. These IDs are hashes of the construct path, not human-friendly names. On InfraSketch diagrams, resources are labelled with their resource type and a truncated version of the logical ID, so you can cross-reference the diagram with your CDK source using the construct ID you gave the resource (e.g., Vpc, ECSCluster).

To make diagrams easier to read, use descriptive IDs in your CDK code — new eks.Cluster(this, 'ProdEksCluster', ...) produces a more readable diagram label than new eks.Cluster(this, 'Cluster', ...).

Frequently asked questions

Can I paste a CDK app with multiple stacks?

Run cdk synth MyStack to target one stack, or diagram each stack separately. Pasting output from cdk synth with multiple stacks concatenated may produce unexpected results since the output is multiple JSON documents.

Does InfraSketch support CDK Aspects?

Aspects modify the CDK tree before synthesis — by the time you run cdk synth and paste the JSON, Aspects have already been applied. Any resources or properties added by an Aspect appear in the synthesized output and are diagrammed correctly.

What if my synth output is very large?

InfraSketch runs entirely in-browser with no size limits. A typical VPC + EKS + RDS stack synthesizes to 150–300 CloudFormation resources; InfraSketch renders whichever resource types it recognises and omits lower-level resources like route table associations and security group egress rules that would clutter the diagram.

Can I diagram a CDK Stage or Environment?

Yes — cdk synth on a Stage produces one CloudFormation template per stack in the Stage. Diagram each stack's JSON separately to compare environments.

CDK vs CloudFormation diagrams

The CDK and CloudFormation tabs in InfraSketch use the same underlying parser — CDK synthesizes to CloudFormation, so the input format is identical. The practical difference is how you get the input: CDK requires a cdk synth step; CloudFormation templates are static files you already have. If you write CDK, always diagram from synthesized output (not hand-written CloudFormation) to make sure you're seeing exactly what gets deployed.

Generate your CDK diagram now Run cdk synth | pbcopy, paste into the CDK tab, click Generate. Free, no login, nothing leaves your browser. Open InfraSketch →

Forem: Raghvendra Pandey

Generate IaC Architecture Diagrams Inside Claude Code and Cursor with InfraSketch MCP

The context-switching problem: diagrams while you code

What is MCP and why it matters for infrastructure teams

Installing infrasketch-mcp (npx, global, Claude Code one-liner)

Setup: Claude Code (claude mcp add command + settings.json method)

Setup: Cursor and Windsurf

The generate_diagram tool in action (with example prompt + example output)

The detect_iac_format tool

Real workflow: reviewing a Terraform PR with Claude + InfraSketch

How the URL is generated (no upload, privacy-first, works offline)

Combining MCP with CLI and embed for full workflow

Supported formats and limitations

FAQ

Does the MCP server require any API key or account?

Does my Terraform code get sent to InfraSketch servers?

Can I use the MCP server with VS Code or other editors?

What happens if the diagram looks wrong?

Can I use the MCP server in a team setting with a shared configuration?

Diagram your infrastructure without leaving your editor Add the InfraSketch MCP server to Claude Code in one command, or try the browser tool right now — no account needed. Try InfraSketch Free →

Visualize Terraform, Kubernetes, and Pulumi from the Terminal with npx infrasketch

The copy-paste problem with IaC diagrams

What npx infrasketch does (and what it doesn't)

Zero-install usage: your first diagram in 10 seconds

Single file mode

Directory scan mode — multi-file Terraform projects

Kubernetes and Pulumi projects

Remote GitHub raw URL mode

CI/CD pipeline integration (--no-open flag)

How it works under the hood (URL encoding, no upload, privacy)

Combining CLI with GitHub Action for full automation

Comparison table: CLI vs browser vs GitHub Action vs MCP

FAQ

Does npx infrasketch work without internet access?

What happens with .tfvars files that contain secrets?

Can I use the CLI with Terraform workspaces?

How large can the IaC file be before the URL gets too long?

Can I get the diagram URL without opening the browser, even locally?

Diagram your infrastructure in 10 seconds Run npx infrasketch . in your IaC repo right now — or try the browser tool directly with no install required. Try InfraSketch Free →

How to Embed a Live IaC Architecture Diagram on Any Website with <infra-sketch>

Why living diagrams beat static images in docs

Two ways to embed: iframe vs web component

Getting the iframe embed code (from the app)

The infra-sketch web component: one-line setup

Embedding by URL: the src= attribute

Embedding inline code

All supported attributes (src, type, height, width)

Real examples: GitHub Pages docs, Backstage, Confluence, Notion

GitHub Pages / Jekyll / Hugo / MkDocs

Network Architecture

Backstage TechDocs

Confluence

Notion

Loading from GitHub raw URLs — the recommended pattern

Error handling and CORS considerations

Privacy: what the embed does and doesn't send

A complete minimal embed page

FAQ

Does the embed component work with private GitHub repositories?

Will the diagram break if infrasketch.cloud goes down?

Can I control the diagram layout or colors through the embed?

Does the component support lazy loading for pages with many diagrams?

Can I use the embed component with React, Vue, or other frameworks?

Turn your IaC docs into living architecture diagrams Add one script tag to your docs site and your diagrams stay synchronized with your code automatically. Try it in the browser first — no account needed. Try InfraSketch Free →

Visualize Infracost on Your Architecture Diagram

The problem with cost tables

Step-by-step: generate and overlay

Reading the cost colour scale

Common cost patterns to spot in the diagram

The hidden NAT gateway cost

Idle or over-provisioned compute

Cascading storage costs

Multi-AZ vs single-AZ databases

Combining with the security overlay

Using Infracost in CI for cost-aware PR reviews

Supported Terraform patterns

HCL files

Terraform plan JSON (most accurate)

Terragrunt

Troubleshooting

Diagram your infrastructure in 10 seconds Run `npx infrasketch .` in your IaC repo right now — or try the browser tool directly with no install required. Try InfraSketch Free →

Try it now — free Paste your `.tf` files and see the architecture diagram instantly. Open InfraSketch →

Generate your Terraform diagram now Paste any `.tf` file and see your infrastructure topology in seconds. Free, no signup, nothing leaves your browser. Open InfraSketch →