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

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

yarn add @mongodb-js/diagramming

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

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 <Diagram nodes={nodes} edges={edges} />; }

The project uses Vitest for unit testing.

To run all tests:

yarn test

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:

yarn install yarn storybook

For contributing, please see CONTRIBUTING.md

For releasing and publishing please see RELEASING.md

• NPM Package
• React Flow Documentation