# Visualize your catalog

Copy as Markdown[View as Markdown](/docs/tutorial/visualize-your-catalog.md)

***

In this step, you will use EventCatalog visualizations to understand the model you created.

Visualizations help people see how systems connect. They grow as your catalog grows, so the same view can start with one event relationship and later include domains, commands, queries, flows, channels, data stores, agents, and other architecture primitives.

## In this chapter...

Here are the topics we'll cover

* Use NodeGraph inside documentation pages.
* Use the Visualizer to explore the catalog map.
* Export visualizations to Mermaid when you need to share or edit them elsewhere.

### Use NodeGraph on a page[​](#use-nodegraph-on-a-page "Direct link to Use NodeGraph on a page")

The [`NodeGraph`](/docs/development/components/components/nodegraph.md) component can be added to domain, service, message, changelog, and custom documentation pages.

Add it to a resource page like this:

```
<NodeGraph />
```

When used without props, `NodeGraph` renders a visualization for the current page. For example, on the `OrderPlaced` page it can show the event, the service that publishes it, and the service that consumes it.

You can also render a graph for a specific resource:

```
<NodeGraph id="E-Commerce" version="0.0.1" type="domain" />
```

This is useful when you want the visualization to appear directly next to the documentation people are reading.

### Use the Visualizer[​](#use-the-visualizer "Direct link to Use the Visualizer")

The Visualizer is the full map view in EventCatalog. It gives you more room to explore how resources connect across your catalog.

Open the `OrderPlaced` map from the event page. You should see:

* `OrderService` publishes `OrderPlaced`.
* `InventoryService` consumes `OrderPlaced`.
* the relationship between the producer, event, and consumer.

![The OrderPlaced visualizer map showing OrderService as producer and InventoryService as consumer](/img/tutorial/order-placed-producer-consumer-map.png)

The OrderPlaced map shows the producer, event, and consumer relationship.

Now open the `E-Commerce` domain map. The domain only references the services, but the map can still show the event relationship between them.

![The E-Commerce domain visualizer map showing services and their event relationship](/img/tutorial/e-commerce-domain-map.png)

The E-Commerce domain map gives a focused view of the services in that part of the architecture.

### Export to Mermaid[​](#export-to-mermaid "Direct link to Export to Mermaid")

NodeGraph visualizations can be switched to Mermaid view or copied as Mermaid diagram code. This is useful when you want to share the architecture with another tool, paste it into documentation, or give it to an AI assistant for review.

You can learn more in the [NodeGraph docs](/docs/development/components/components/nodegraph.md#export-as-mermaid) and the [Mermaid docs](/docs/development/components/diagram-syntax/mermaid.md#export-nodegraphs-as-mermaid).

### What you have now[​](#what-you-have-now "Direct link to What you have now")

You can use EventCatalog to:

* embed visualizations directly inside documentation pages
* explore the wider catalog with the Visualizer
* see events between systems
* understand how services, domains, ownership, and messages connect
* export visualizations as Mermaid when you need to use them elsewhere

As you add more resources, these visualizations become more useful. Commands, queries, domains, flows, channels, data stores, agents, and extra services can all add more context to the map.

### Next[​](#next "Direct link to Next")

Continue to [Build and deploy your catalog](/docs/tutorial/build-your-catalog.md).