@mongodb-js/diagramming

@mongodb-js/diagramming is a React component library built on top of React Flow for creating interactive, customizable diagrams,
designed specifically for use cases in the MongoDB or relational world.

---

Features

- React Flow Integration: Built on the robust foundation of React Flow.
- Custom nodes and edges: Easily define and render node or edge components.
- Interactive UX: Dragging, connecting, zooming, and panning built in.

---

Installation

``bash
yarn add @mongodb-js/diagramming
`

Usage

Here is a basic example of how to use the Diagram component:

`typescript jsx
import React from 'react';
import { Diagram } from '@mongodb-js/diagramming';

const nodes = [
{
id: '1',
type: 'collection',
data: { label: 'Node 1' },
position: { x: 250, y: 0 },
},
{
id: '2',
type: 'collection',
data: { label: 'Node 2' },
position: { x: 250, y: 250 },
}
];

const edges = [
{
id: 'e1-2',
source: '1',
target: '2',
type: 'default',
}
];

export const Component = () => {
return ;
}
`

Running Tests

The project uses Vitest for unit testing.

To run all tests:

`bash
yarn test
``

Running Storybook

To explore components and their behavior in isolation: https://mongodb-js.github.io/diagramming

Changes to the Storybook will be uploaded to the link above on push to main

To run locally at http://localhost:6006 on your own branch:

`bash
yarn install
yarn storybook
``

Contributing

For contributing, please see CONTRIBUTING.md

Releasing

For releasing and publishing please see RELEASING.md

$3

- NPM Package
- React Flow Documentation