# @mongodb-js/diagramming

> Diagram canvas for data modelling capabilities in MongoDB

Latest version **2.4.1** (published 2026-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mongodb-js/diagramming
pnpm add @mongodb-js/diagramming
yarn add @mongodb-js/diagramming
bun add @mongodb-js/diagramming
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.4.1 |
| Published | 2026-06-05 |
| First published | 2025-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 4.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | MongoDB Inc |
| Maintainers | mongodb-js-user, alexander_schroll, mbroadst, hswolff, satyasinha, jeff-allen-mongo, jonathan.balsano, mongodb-build, jack.weir, kristina.stefano, jarjee, shaketbaby, devtoolsbot, gribnoysup, mutukrish, mongo-j, dariakp, addaleax, nbbeeken, dbx-node, nirinchev, pearsb1, mcasimir_mdb |

## Links

- npm: https://www.npmjs.com/package/@mongodb-js/diagramming
- Repository: https://github.com/mongodb-js/diagramming
- Issues: https://jira.mongodb.org/projects/MIG/issues
- npm.io page: https://npm.io/package/@mongodb-js/diagramming

## Dependencies (15)

- [elkjs](https://npm.io/package/elkjs.md) ^0.11.0
- [react](https://npm.io/package/react.md) 17.0.2
- [d3-path](https://npm.io/package/d3-path.md) ^3.1.0
- [react-dom](https://npm.io/package/react-dom.md) 17.0.2
- [@xyflow/react](https://npm.io/package/@xyflow/react.md) 12.5.1
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.14.0
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.3.0
- [@leafygreen-ui/select](https://npm.io/package/@leafygreen-ui/select.md) ^16.2.0
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^3.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.0
- [@leafygreen-ui/tooltip](https://npm.io/package/@leafygreen-ui/tooltip.md) ^14.2.1
- [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.1.0
- [@leafygreen-ui/inline-definition](https://npm.io/package/@leafygreen-ui/inline-definition.md) ^9.0.5
- [@leafygreen-ui/leafygreen-provider](https://npm.io/package/@leafygreen-ui/leafygreen-provider.md) ^5.0.2

## Recent versions

- 2.4.1 (latest) — 2026-06-05
- 2.4.0 — 2026-06-01
- 2.3.3 — 2026-01-27
- 2.3.2 — 2026-01-14
- 2.3.1 — 2025-12-16
- 2.3.0 — 2025-12-11
- 2.2.2 — 2025-11-13
- 2.2.1 — 2025-11-03
- 2.2.0 — 2025-10-15
- 2.1.0 — 2025-10-15
- 2.0.0 — 2025-10-14
- 1.8.0 — 2025-09-26
- 1.7.0 — 2025-09-25
- 1.6.0 — 2025-09-12
- 1.5.1 — 2025-08-22
- … 25 more at https://npm.io/package/@mongodb-js/diagramming/versions

## README

# @mongodb-js/diagramming

**@mongodb-js/diagramming** is a React component library built on top of [React Flow](https://reactflow.dev/) 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 <Diagram nodes={nodes} edges={edges} />;
}
```

## Running Tests
The project uses [Vitest](https://vitest.dev/) 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](https://github.com/mongodb-js/diagramming/blob/main/CONTRIBUTING.md)

## Releasing
For releasing and publishing please see [RELEASING.md](https://github.com/mongodb-js/diagramming/blob/main/RELEASING.md)
 
### Resources
- [NPM Package](https://www.npmjs.com/package/@mongodb-js/diagramming)
- [React Flow Documentation](https://reactflow.dev/learn)

---
_Source: https://npm.io/package/@mongodb-js/diagramming · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._