Skip to main content

<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

Example output

Props

NameTypeDefaultDescription
maxHeight (optional)string30Max height to set the nodegraph in your document
search (optional)booleantrueShow or hide the search bar in the nodegraph (Added in v2.50.3)
legend (optional)booleantrueShow 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

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

Example output

You can see a demo of this here

Props

NameTypeDefaultDescription
idstringundefinedThe id of the NodeGraph to render. If not provided, the current page's NodeGraph will be rendered.
versionstringundefinedThe version of the NodeGraph to render. If not provided, the current page's NodeGraph will be rendered.
typestringundefinedThe type of the NodeGraph to render. If not provided, the current page's NodeGraph will be rendered.