Every screen, connectedto what actually runs it.

A screenshot tells you nothing about the service, endpoint, or table behind it. System maps put the screen and the system in the same place, so you can point at a region of the UI and see what it calls, what tests cover it, and who owns it.

Get Started FreeRead the docs
A UIGraph map showing a Landing screen with focal points overlaid, and a details panel linking one focal point to a backend flow diagram, an API contract, and a test case suite

A screenshot tells you nothing about which service, endpoint, or table sits behind it, so every question about a screen ends up being asked of whoever happens to remember the answer.

Asked again every sprint

  • Which service owns this button?
  • Is this flow covered by tests?
  • What breaks if we change this endpoint?
  • Who do I ask about this screen?

How a map gets built

Five pieces, declared in .uigraph.yaml or added in the app. Either way the map reflects what the repo says rather than what someone remembered to update.

01

A map groups the screens of a feature into one picture

A map is a bounded area of your product, like a feature, a flow, or a domain. Group the frames that belong together and the whole thing reads as one story instead of a folder of screenshots.

The Checkout map's frame canvas in UIGraph, with the account and payment screens grouped together as frames, each with its focal points

02

Frames hold screens, diagrams, and anything else visual

Declare frames and their focal points in .uigraph.yaml so the map is built from the repo rather than maintained by hand.

.uigraph.yaml
maps:
  - name: Checkout
    frames:
      - name: Cart
        image: designs/cart.png
        focalPoints:
          - name: Apply promo code
            service: cart-service
            api: POST /v1/cart/promo
      - name: Payment
        image: designs/payment.png

03

Points connect a region of the UI to what runs it

Drop a focal point on any part of a frame and link it to an API, a service, a test, an owner, or another map. The answer to “what happens when I click this?” lives on the screen itself.

A focal point's linked API contract open in UIGraph, showing the POST /v1/addresses/geocode endpoint with its method, URL, summary, and request schema

04

Every state of a screen stays in one place

Group frames together so empty, loaded, error, or a different breakpoint stay part of the same thing instead of scattered captures.

uigraph-cli syncdone

$ uigraph-cli sync

Checkout 3 frames · 1 group · 12 focal points

Cart empty · loaded · error · mobile

Signup 2 frames · 8 focal points

✓ maps, frames, and focal points up to date

05

Design frames come straight in, no re-export

Pull frames from a Figma file into a map without exporting and re-uploading images. The screens teams already review become the surface the rest of the system hangs off.

The Add Frame menu in UIGraph with Import from Figma highlighted, for pulling design frames straight into a map

Part of one graph

A map is one view into the same system your services, tests, and diagrams already describe.

Built for

Product EngineersQA EngineersDesignersNew Joiners
Service CatalogEvery service: its API, architecture, schema, tests, and history.DiagramsDiagrams that don't lie to you.CLIOne config file. Thirteen kinds of artifact. Every push.

Frequently asked questions

Read the docs

Stop guessing what runs a screen.

Map a flow once, and everyone who opens it can see the system underneath.

Get Started FreeRead the docs