Open source · MIT · Self-hosted on Cloud Run

Google Cloud architecture diagrams you host, explore and script

gcportrait draws a Google Cloud organisation, folder or project from Cloud Asset Inventory, every box a real asset and every arrow a real reference: self-hosted in your own Google Cloud project with one script, explored in a web app, and rendered as SVG, PNG or draw.io through an API, without opening the app.

The demo needs no sign-in: it draws synthetic organisations generated in your browser.

Animation: the pointer hovers a virtual machine and its path to the root lights up; a click keeps it selected, traces its network and disk connections, and shows the Open in Cloud Console action.

Self-hosted · Web app · API

Three ways to use gcportrait

One instance in your project serves the web app and the API, and both produce the same drawing: what the app exports is what the API renders.

  • Self-hosted

    In your own Google Cloud project

    One line deploys gcportrait as a single Cloud Run service: no database, no stored token, and your inventory never passes through anyone else’s server. It asks for your project id and nothing else; you are signed in with gcloud auth login.

    Edit a highlighted value in any command; every command on this page follows.

    1 value to fill
    curl -fsSL https://gcportrait.app/install.sh | bash -s -- --project YOUR_PROJECT
    1 line
    a release, checked against its checksums, deployed to your project
    about 10 min
    to “Sign in with Google”, the OAuth client included
  • Web app

    Explore it in your browser

    Sign in with your Google account and pick an organisation, folder or project, or load an export file: lenses, search, a details drawer, the 35-day timeline and SVG, PNG or draw.io export, with your snapshots kept in your browser.

    No sign-in: four synthetic organisations, generated in your browser.

    A virtual machine selected in the Compute lens with the details drawer open: its facts, its relations by kind with links, and its Cloud Console page.
  • API

    Rendered exports without the UI

    Your instance answers POST /api/render with an SVG, a PNG or a draw.io file of any view, from a live scope, an export file, a saved snapshot or a demo organisation, for scripts, docs and reviews. The request carries your own Google token, as gcloud auth print-access-token prints it.

    1 value to fill
    TOKEN=$(gcloud auth print-access-token)
    curl -s -H "X-Gcportrait-Token: $TOKEN" -OJ \
      --json '{"source":{"kind":"demo","size":"S"}}' \
      https://YOUR_INSTANCE/api/render
    What the request returns: the synthetic demo organisation S in the Overview lens, light theme, with its title block and legend.
    What it returns: demo S’s overview as a 4,794 × 2,812 PNG, the same file as the sample export (download, 743 kB).

Features

What the web app shows, and the API draws

Web app · API

Google Cloud-style diagrams from real data

Nested zones for folders, projects, VPC networks, subnetworks and clusters, Google’s product icons, and orthogonal arrows routed through the gaps between them. 632 of the 641 asset types Cloud Asset Inventory lists are described in the catalog (coverage).

gcportrait drawing the whole synthetic demo organisation S in the Overview lens: folders and projects as nested zones, the Shared VPC host's network and subnetworks as tinted zones, resources as cards with Google Cloud product icons, orthogonal arrows for the references between them, a title block and a legend.

Web app · API

Lenses, focus and filters

11 lenses redraw the same organisation: the overview, everything, and one for each question: networking, load balancing, compute, serverless, Kubernetes, data, security, identity, operations. Focus on a project, a Shared VPC or a perimeter; filter by region, project, folder, type and depth. The API takes the same view. Lenses and filters

Animation: the Lens picker switches the demo organisation S from the Overview to the Networking lens and then to the Load balancing lens; each redraws the same organisation for a different question.

Web app

Click to trace

Hover a resource and its path to the top of the organisation lights up; click it and its connections stay traced, the whole chain behind a load balancer included. The details drawer lists its facts and relations, and “Open in Cloud Console” opens its console page when you choose it.

A global forwarding rule selected in the Load balancing lens: its chain through the target HTTPS proxy, the URL map and the backend services to the instance groups and the serverless network endpoint group is highlighted, with its path to the root of the organisation and its details drawer open.

Web app

Drill in, expand, search

Large organisations open collapsed: a click on a chip expands it in place, a double-click on a project or folder makes it the whole canvas. Search finds any asset by name, IP address, domain or project id and takes you to it.

Animation: a click on a collapsed project expands it in place, then a double-click on another project drills into it so that it fills the canvas, with the breadcrumb leading back out.

Web app · API

A 35-day timeline

Daily ticks over the last 35 days, read from Cloud Asset Inventory when you stop on one and kept in your browser. Exports and manual pulls appear as extra ticks, and the API draws any of those days. The timeline

Animation: the Workloads folder of the demo organisation S on the timeline, which jumps from 4 September to 8, 14 and 25 September; each day is drawn compared with the one before. On 8 September a new Pub/Sub subscription is outlined in green, on 14 September the next one is outlined and the first stands as a faded, dashed ghost, and on 25 September the decommissioned reporting project with its bucket, network, subnetwork and virtual machine stands as a ghost, a second machine in the web group is outlined, two more removed resources are ghosts and amber dots mark the changed ones. The view then zooms in on the ghost of the reporting project, marked removed, and moves to the legend, whose rows read added, removed and changed since 14 September.

Web app · API

Export SVG, PNG and draw.io

Save the current view as SVG, as PNG (2× or 3×) or as a draw.io file that diagrams.net and draw.io open as an editable diagram looking like the picture: the whole diagram or the visible part, in either theme, with a title block, a legend and the date it shows. Every view is also a link, and your instance’s API renders the same files for scripts. Export · API

The Export menu open over the demo organisation S: SVG or PNG at 2× or 3×, the whole diagram or the current viewport, and copying the PNG.

Web app

A demo mode, no account needed

Four synthetic organisations, from about 100 to about 50 000 assets with a 35-day history, generated in your browser. Try every feature before you deploy anything. Open the demo (opens in a new tab)

Animation: pressing slash opens the search box, typing the IP address 10.0.14.5 lists the matching resource, and Enter jumps to it on the diagram and opens its details.

Self-hosted · Web app

Your data stays in your browser

Snapshots are stored in your browser and leave it only as files you export. The backend on your instance is stateless: it streams what Cloud Asset Inventory returns to your browser and keeps nothing; your sign-in token stays in the tab’s memory.

The Snapshots page listing the demo snapshots stored in this browser, with import, export and delete actions; nothing is uploaded anywhere.

Web app · API

Light and dark

Every view in a light and a dark theme, with the same layout, the same tints and Google’s product icons unchanged. The app follows your system or the theme you pick, and an export, from the app or the API, is drawn in the theme you choose, whatever the screen shows. Both pictures are demo S in the Overview lens.

The light theme: demo organisation S in the Overview lens on a white canvas, with light blue project zones, pale green and yellow network tints, dark text and Google Cloud product icons.
Light
The dark theme: the same view of demo organisation S on a near-black canvas, with deep blue project zones, dark green and olive network tints, light text and the same product icons.
Dark

Sample exports

See an export before you deploy

These are SVG, PNG and draw.io exports of the synthetic demo organisations, exactly as the Export menu writes them and the API returns them: the diagram with its title block and its legend, in the light and the dark theme. Open a draw.io file in diagrams.net to move, restyle and annotate what it shows.

All sample exports, with a focused Networking view and the commands that made them.

The SVGs name the Roboto fonts without embedding them (the Export menu’s “Embed fonts” option puts them in), so where Roboto is not installed their labels may reflow; the PNGs are always drawn with Roboto. The draw.io files name Google Fonts’ Roboto stylesheet, which diagrams.net loads when it opens them.

How it works

From Cloud Asset Inventory to a diagram

The same pipeline draws every diagram: in your browser for the web app, on your instance for the API.

  1. Cloud Asset Inventory

    Your instance lists the scope’s assets with your own Google account or its service account, or you load a Cloud Asset Inventory export file.

  2. Snapshot

    The assets become a snapshot: kept in your browser for the web app, with the timeline’s days as you visit them; built for each request and kept nowhere for the API.

  3. Graph

    The asset catalog, data for 632 asset types, turns references into relations: networks, Shared VPC, load balancer chains.

  4. Diagram

    A layout engine packs the nested zones and routes the arrows: you explore, trace and export it in the web app, or the API returns it as SVG, PNG or draw.io.

Self-host

Self-host in 10 minutes

gcportrait runs as one Cloud Run service in a Google Cloud project of yours, serving the web app and the API. The installer downloads the newest release’s deploy scripts, checks them against the release’s checksums and runs them: they enable the Google Cloud APIs the instance needs, create its service account without roles and deploy the release’s image from GitHub Container Registry (ghcr.io/florianchrometz/gcportrait). They end with the next steps: open the address, where the demo works at once; create the OAuth client for “Sign in with Google” with the link and the origins they print; redeploy with its id.

1 value to fill
gcloud auth login
curl -fsSL https://gcportrait.app/install.sh | bash -s -- --project YOUR_PROJECT

--dry-run at the end prints every change first; the last lines name the command that removes everything the script created.

Other ways to start:

Guided: a tutorial in Cloud Shell, in your browser, takes you through the same steps.

Built from source: Google’s Cloud Run Button builds the image in Cloud Shell and deploys it, with fewer choices than the installer.

For teams

Grant the service account

In service-account mode, someone who may grant roles grants the instance’s service account read access to a folder or project once; everyone who can see that scope then reads it through the instance, without Cloud Asset Inventory roles of their own. A gate first checks each person’s own access to the scope.

Permissions and the service-account grant

2 values to fill
gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="serviceAccount:YOUR_SA_EMAIL" \
  --role="roles/cloudasset.viewer"

roles/cloudasset.viewer and nothing else; prefer folders or projects to the whole organisation.

Variables

Edit a highlighted value in any command, or fill it in here: every command on this page follows, and Copy copies a command with your values. They stay in this browser.

  • YOUR_PROJECT

    The id of the project gcportrait runs in: deploy.sh’s --project. Example: demo-gcportrait

  • YOUR_INSTANCE

    The host your instance answers on: its Cloud Run address or your domain. Example: gcportrait-10000000001.europe-west3.run.app

  • YOUR_PROJECT_ID

    The id of a project to read; not necessarily the one gcportrait runs in. Example: demo-web-1

  • YOUR_SA_EMAIL

    The e-mail of gcportrait’s backend service account; the Permissions page shows it. Example: gcportrait-backend@demo-gcportrait.iam.gserviceaccount.com

Questions

Frequently asked

Running your own instance, where your data goes, what a read costs: short answers, each with its guide. For scripts, start with the API guide.

All questions

The author

About the author

Florian Chrometz is a Google Cloud solution architect and developer. By day he designs and runs platforms on Google Cloud and Firebase, with serverless services at the core; by night he builds and publishes apps in Swift and JavaScript. He holds the Google Cloud Professional Cloud Architect certification. gcportrait grew out of that daily work: the wish to see an organisation's real resources and their relations as a clear architecture diagram, without drawing it by hand. More about Florian is on his personal website and on GitHub.

Florian Chrometz builds and maintains gcportrait, which draws a Google Cloud environment as it actually is: every box a real asset from Cloud Asset Inventory, every arrow a real reference. Feedback, bug reports and pull requests are welcome on GitHub; more about Florian is on his personal website.

gcportrait renders Google Cloud-style architecture diagrams. It is an independent open-source project and is not affiliated with, endorsed by, or sponsored by Google. Google Cloud and the Google Cloud product icons are trademarks of Google and are used under Google's icon usage terms.

See your own environment

Try the web app in the demo now, deploy gcportrait to your own Google Cloud project when you are ready, and script its diagrams through the API.