Skip to Content
DocsUser GuideGetting Started

Build Your First Diagram

This walkthrough takes you from an empty canvas to a small, connected cloud architecture. Start the app with npm run dev and open http://localhost:3000/.

The layout

The screen has three regions:

  • Palette & controls (left) — under the Palette heading, every cloud service (AWS, GCP, Azure) grouped by category (networking, compute, storage, database, …) with a search box and a cloud-provider filter (All / AWS / GCP / Azure); each item carries a small provider badge so mixed-cloud designs stay legible. Below it are the Modes (Move / Connect), Density, and Layers & Views sections (the last described in Views, Layers & Overlays). Starting points (templates, examples, imports) live in the Start hub — open it with + New — and the full shortcut list is in the first-run Intro (and Keyboard & Commands).
  • Canvas (center) — where your diagram lives. Pan, zoom, nest, and arrange resources here. See Navigating the Canvas.
  • Inspector (right) — under the Inspector heading, the configuration form for the selected node or edge, then the Validation and Rule Suggestions panels (each with its own Run / Generate button), and the footer controls (Fit to View, Center, Tidy).

A top bar runs across the top. From left to right:

🔶 Strata  <diagram name>  Docs ↗  Intro  <status>  [ + New | ↶ ↷ | 💾 Open ▾ | Data ▾ Analyze ▾ | Cost | ▶ ]
  • Diagram name — an editable title next to the logo; what the diagram is saved as.
  • Docs ↗ — opens these docs in a new tab.
  • Intro — replays the quick guided tour.
  • + New — opens the Start hub.
  • ↶ / ↷ — Undo / Redo (icon buttons).
  • 💾 — Save (icon button, no text label).
  • Open ▾ — your saved diagrams.
  • Data ▾ — Connect to cloud…, Import JSON…, Import IaC (Terraform / OpenTofu / CloudFormation / ARM)…, Export JSON, Export PNG image, Export SVG image, Copy share link, Export to IaC…, Compare for drift…, Version history…, Clear canvas.
  • Analyze ▾ — Validate architecture, Suggest rules.
  • Cost — toggle the estimated monthly cost overlay (the button shows the running total).
  • ▶ — enter presentation mode.

There is no “File” menu — the import/export and clear actions live under Data ▾.

1. Choose a starting point

Click + New (or Start here on an empty canvas) to open the Start hub, which offers a few ways to begin:

  • Start blank — an empty canvas.
  • Start from a template — pick one of the coded starters: Basic AWS VPC, ECS behind an ALB, Serverless API, or Static Website.
  • Load an example — larger sample diagrams to explore (each shows its resource count).
  • Import IaC — bring in a Terraform / OpenTofu, CloudFormation, or ARM file (see Importing & Exporting IaC).
  • Import Strata JSON — reopen a diagram you previously exported.
  • Connect to a cloud — discover a live AWS, GCP or Azure account (see Connecting to a Cloud).

Once you have a diagram on the canvas, the hub also shows an Export to IaC card — generate Terraform / OpenTofu / CloudFormation from it. If you have saved diagrams, the hub lists them at the bottom under Open a saved diagram.

Pick Start blank to follow along.

2. Add a service

You have three ways to place a service:

  • Drag & drop — drag a service from the palette and drop it on the canvas. A node appears where you dropped it, coloured and iconed by its category.
  • Click a palette item to drop it near the center of the view.
  • Command palette — press ⌘K (macOS) or Ctrl K, type a service name, and choose Add ….

Type in the palette’s search box (e.g. vpc, lambda, s3) to filter the list — it matches names and keywords, so searching object finds S3.

3. Configure it (the inspector)

Click a node to select it. The inspector on the right shows a form built automatically from that service’s fields — a VPC has a CIDR block, an EC2 instance has an instance type, and so on. Edits are stored on the resource immediately. Every service gets the right form with no special-casing, because the form is generated from the service definition.

Every node form starts with three common rows:

  • Service — the service’s full name (read-only).
  • Name — a text field; commits when you press Enter or click away.
  • Region — a dropdown of AWS regions, or (none).

Then come the service-specific fields. A few field types are worth knowing:

  • Multiselect and tag fields are entered as a comma-separated list (the placeholder shows a, b, c) — type web, db, cache and Strata splits it into separate values.
  • Boolean fields are a No / Yes dropdown; select fields are a dropdown of allowed options (with (none) when the field is optional).

4. Connect resources (typed relationships)

Connections in Strata are typed — never anonymous lines. An edge means something specific (routes_to, invokes, reads_from, allows, …) and is drawn in the colour and dash pattern of its relationship class (network, data, dependency, permission, observability).

There are two ways to draw an edge:

  • Connect mode — click Connect under Modes in the left panel, or press C. Click the source node, then the target node, to create an edge. Press C again (or click Move) to go back to moving nodes.
  • Port drag — without changing mode, click a small dot (port) on the edge of a node to start a wire, then click the target node.

Either way, the relationship type is inferred from the two services involved. Select an edge to change its relationship kind in the inspector’s Relationship dropdown.

5. Group into containers

Drag a node onto a VPC, subnet, or other container to nest it inside — containment is real nesting, not just a line. Containers auto-pack their children, and you can double-click a container to focus it (zoom in and dim everything else). Select nodes and press G to wrap them in a new VPC.

6. Undo / redo

Every change is tracked. Use the ↶ / ↷ (Undo / Redo) icon buttons in the top bar, or ⌘Z / ⇧⌘Z (Ctrl Z / Ctrl Y).

Next steps

Last updated on
OverviewNavigating the Canvas