Skip to main content

Component List

<Schema />

This component will render your schema to the document. To make this work you will need to add a schema file into your event directory.

For more information check out the schema guide for events.

<SchemaViewer />

This component will render your schema as documentation viewer to the document. To make this work you will need to add a schema file into your event directory.

For more information check out the schema guide for events.

Props

NameTypeDefaultDescription
titlestring''Title to render above your schema viewer
maxHeightnumber''The max height of the schema viewer
defaultExpandedDepthnumber1Define the expand level for displaying nested objects/properties
renderRootTreeLinesbooleanfalseDefine show/hide a visual line for the root level

Usage

Render the default schema viewer for your event
<SchemaViewer />
Render the schema viewer, with a custom title, expanded the depth of the properties to level 5 and showing the root tree lines
<SchemaViewer title="Event properties" defaultExpandedDepth='5' renderRootTreeLines maxHeight="500" />

<Mermaid />

This component will render mermaid diagrams into your documents.

If you use <Mermaid /> without any props EventCatalog will render the relationships between your consumers and producers.

If you would like to render custom mermaid diagrams you can use the charts prop on the diagram.

Read Mermaid documentation if you want to learn what other graphs you can render.

Props

NameTypeDefaultDescription
titlestring''Title to render above your chart
chartsstring[][]An array of mermaid charts to render to the your document

Usage

Render the default graphs for your events and services
<Mermaid />
Render any Mermaid Graph
<Mermaid title="Event Rules & Targets" charts={[`flowchart LR 
Start --> Stop`]} />
tip

Remember the relationship between events and services is stored within the event itself through the producer and consumer frontmatter properties.

For more information check out the mermaid guide for events and mermaid guide for services.

<NodeGraph />

This component will render ReactFlow diagrams into your documents. Clicking a node will navigate to the event or service page.

EventCatalog will render the relationships between your consumers and producers.

Props

NameTypeDefaultDescription
titlestring''Title to render above your node graph
maxHeightnumber''Set the max height of the node graph
maxZoomnumber'10'Set the max zoom level of the node graph
fitViewbooleantrueFit all elements on the view size
isAnimatedbooleantrueToggle if the node connections should be animating
isDraggablebooleanfalseToggle if the nodes are draggable

Usage

Render the default node graphsfor your events and services
<NodeGraph />
Render the customized node graphs in the
<NodeGraph maxHeight={400} isDraggable={true} isAnimated={true} fitView={false} />

<Admonition />

Rendered Examples

Rendered Example

Admonition Example

Usage

Info
<Admonition type="info">Example of information</Admonition>
Warning
<Admonition type="warning">Example of warning</Admonition>
Alert
<Admonition type="alert">Example of alert</Admonition>

<EventExamples />

This component will allow you share code examples for any event. Reasons why you might do this:

  • Help the onboarding of the event with code
  • Show developers how to trigger the event
  • Show developers how to consume the events

Any language is supported!

Rendered Example

UserSignedUp with Code Example

Usage

EventExamples
<EventExamples title="How to trigger event" />

EventCatalog will look inside your examples directory and every example will be rendered in it's own tab.

If you want to learn more you can read the code examples guide.

<OpenAPI />

This component will render any openapi.yaml or openapi.json file inside your service folder.

EventCatalog uses Swagger UI to render your OpenAPI document within EventCatalog.

To understand how it works and use OpenAPI with your Services checkout the schema guide for openapi.

Props

NameTypeDefaultDescription
showTitlebooleantrueShow or hide the title rendered by Swagger UI

Rendered Example

OpenAPI Example

Usage

Render your OpenAPI File
<OpenAPI />
tip

Make sure you have your openapi.yaml or openapi.json file inside your service.

e.g /services/Payment Service/openapi.yaml

The <OpenAPI /> will only work with a valid openapi file inside your service directory.