<NodeGraph />
A component to visually render your information.
The <NodeGraph/> component is supported in domains, services, and all messages, changelogs, and custom documentation pages.
Usage
Single NodeGraph
- Include the
<NodeGraph/>component inside the markdown- e.g
/events/MyEvent/index.mdx
- e.g
Example
---
#event frontmatter
---
<NodeGraph/>
Output example in EventCatalog

Props
| Name | Type | Default | Description |
|---|---|---|---|
maxHeight (optional) | string | 30 | Max height to set the nodegraph in your document |
search (optional) | boolean | true | Show or hide the search bar in the nodegraph (Added in v2.50.3) |
legend (optional) | boolean | true | Show or hide the legend in the nodegraph (Added in v2.50.3) |
mode (optional) | string ("simple" or "full") | "simple" | simple will render the nodegraph in a simplfied view not rendering descriptions. Full will render the nodegraph in a full view, rendering descriptions and other information (Added in v2.50.3) |
Multiple NodeGraphs
Added in
eventcatalog@2.37.3You can add multiple NodeGraphs to your document by using the NodeGraph component multiple times.
Here is an example of how to add multiple NodeGraphs to your document:
---
#document frontmatter
---
<!-- Without any properties, this will render the current pages NodeGraph like you see in the above example -->
<NodeGraph/>
<!-- -->
<div class="grid grid-cols-2 gap-4 not-prose">
<!-- We tell EventCatalog to render the Orders Domain version 0.0.3 NodeGraph -->
<NodeGraph id="Orders" version="0.0.3" type="domain" />
<!-- We tell EventCatalog to render the Subscription Domain version 0.0.1 NodeGraph -->
<NodeGraph id="Subscription" version="0.0.1" type="domain" />
</div>
Output example in EventCatalog

You can see a demo of this here
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | The id of the NodeGraph to render. If not provided, the current page's NodeGraph will be rendered. |
version | string | undefined | The version of the NodeGraph to render. If not provided, the current page's NodeGraph will be rendered. |
type | string | undefined | The type of the NodeGraph to render. If not provided, the current page's NodeGraph will be rendered. |