<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

1. Include the <NodeGraph/> component inside the markdown
   • e.g /events/MyEvent/index.mdx

Example

---
#event frontmatter
---
<NodeGraph/>

Output example in EventCatalog

Props

Name	Type	Default	Description
maxHeight	string	30	Max height to set the nodegraph in your document

Multiple NodeGraphs

Added in eventcatalog@2.37.3

You 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.