# Architecture graph

Copy as Markdown[View as Markdown](/docs/development/guides/architecture-graph.md)

***

**Added in** `eventcatalog@4.5.0`

The architecture graph is a force-directed view of every resource in your catalog and the relationships between them. Unlike the [system context map](/docs/development/guides/systems/system-context-maps.md), which needs systems to exist, the architecture graph works for any catalog.

Use this view when you want to answer questions like:

* How does everything in the catalog connect, at a glance?
* What does a domain, system, or team's footprint look like across the architecture?
* How do messages flow between services and agents?

![Architecture graph with the Domains lens, showing every domain in the catalog and the resources grouped inside it](/assets/images/architecture-graph-domain-view-24283652031d1e286ea0b8d2d80a5a28.png)

## Turn on the graph[​](#turn-on-the-graph "Direct link to Turn on the graph")

The architecture graph is opt-in. Enable it with `visualiser.architectureGraph.enabled` in your `eventcatalog.config.js` file.

eventcatalog.config.js

```
module.exports = {
  visualiser: {
    architectureGraph: {
      enabled: true,
    },
  },
};
```

Once enabled, an **Architecture Graph** link appears in the **Top level diagrams** navigation group, and the graph is available at:

```
/visualiser/graph
```

Opt-in while in beta

Building a graph of the whole catalog is unproven on very large catalogs, so it stays off until you turn it on.

## Change how you look at it[​](#change-how-you-look-at-it "Direct link to Change how you look at it")

The **Lens** picker switches the graph between focused views: domains, systems, services, teams, and message flow, alongside the default view of every resource and relationship.

Each lens promotes a different resource to the centre of the picture. The domain lens above clusters everything by domain, while the service lens puts each service at the middle of the messages it sends and receives.

![Architecture graph with the Services lens, showing each service surrounded by the messages it publishes and subscribes to](/assets/images/architecture-graph-service-view-aed20638e858e868ada1c039c558e3f7.png)

The **Detail** slider next to the lens controls how far out from those hubs the graph reaches. Keep it low for a readable overview, or raise it to `All` to pull in everything the lens can show.

## Focus on one part of the architecture[​](#focus-on-one-part-of-the-architecture "Direct link to Focus on one part of the architecture")

Search for a resource to focus its neighbourhood, or click any node to do the same. Double-click a node to open its documentation.

![Architecture graph focused on the Review API service, showing its commands, events, queries, and data stores](/assets/images/architecture-graph-focus-f1f1e3a308b65185fd0fc99d4919f0db.png)

Focusing hides the rest of the catalog so you can read one resource's immediate connections. The **Depth** slider on the focus chip widens the neighbourhood a step at a time, and the **You are here** breadcrumb shows where the focused resource sits in the hierarchy. Clear the focus with the `×` on the chip.

## Share a view[​](#share-a-view "Direct link to Share a view")

Your lens, focus, and filters are written to the URL as you interact with the graph, so you can copy the link and send teammates directly to the same view.
