diagram

KO | EN

gitlite — search

#nodejs #pytorch #react #csharp #kubernetes #sql #python #pdf #claude #electron

(★ 9)

Infinite-canvas diagram editor.

File Explorer

ZIP Download

- config.json
- - bug_report.yml
  - config.yml
  - feature_request.yml
  - task.yml
- - bench.yml
  - ci.yml
  - pages.yml
- FUNDING.yml
- GOVERNANCE.md
- PULL_REQUEST_TEMPLATE.md
- - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - .gitignore
  - CHANGELOG.md
  - docusaurus.config.ts
  - package.json
  - README.md
  - sidebars.ts
  - tsconfig.json
- - .gitignore
  - package.json
  - playwright.config.ts
  - README.md
  - tsconfig.json
- - .env.example
  - index.html
  - package.json
  - README.md
  - tsconfig.json
  - vite.config.ts
  - vitest.config.ts
- github-hero-dark.png
- github-hero-light.png
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - .gitignore
  - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vite.config.ts
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vite.config.ts
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vite.config.ts
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - .prettierignore
  - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.build.json
  - tsconfig.json
  - vitest.config.ts
- bench-compare.mjs
- build-wasm.sh
- new-package.mjs
- render-svg.ts
- start-diagram-collab.sh
- - .gitignore
  - next.config.mjs
  - package.json
  - README.md
  - tsconfig.json
- - .gitignore
  - index.html
  - package.json
  - README.md
  - tsconfig.json
  - vite.config.ts
- README.md
- - Cargo.toml
- - Cargo.toml
- .gitignore
- README.md
.dependency-cruiser.cjs
.gitignore
.npmrc
.nvmrc
.prettierignore
.prettierrc
CHANGELOG.md
CITATION.cff
CODE_OF_CONDUCT.md
CONTRIBUTING.md
eslint.config.js
knip.json
lefthook.yml
LICENSE
nx.json
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
SECURITY.md
SUPPORT.md
tsconfig.base.json
tsconfig.depcruise.json
tsconfig.json
vite.config.ts
vitest.config.ts
vitest.workspace.ts

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> [!WARNING]
> Pre-1.0 and under active development — APIs may change.

[![npm version](https://img.shields.io/npm/v/@oh-just-another/editor.svg)](https://www.npmjs.com/package/@oh-just-another/editor)
[![CI](https://github.com/oh-just-another/diagram/actions/workflows/ci.yml/badge.svg)](https://github.com/oh-just-another/diagram/actions/workflows/ci.yml)
[![npm downloads](https://img.shields.io/npm/dm/@oh-just-another/editor.svg)](https://www.npmjs.com/package/@oh-just-another/editor)
[![license](https://img.shields.io/npm/l/@oh-just-another/editor.svg)](https://raw.githubusercontent.com/oh-just-another/diagram/master/LICENSE)
[![AI-native](https://img.shields.io/badge/AI--native-%E2%9C%93-7c3aed.svg)](https://github.com/oh-just-another/diagram#readme)

A drop-in **infinite-canvas diagram editor for React** — and renderable headless on the server with CLI-tool.

**[Documentation](https://ohjustanother.site)** ·
**[Live demo](https://ohjustanother.site)** ·
**[Contributing](./CONTRIBUTING.md)**

## Highlights

- **MIT, free for everyone — pledged.** No license keys, no watermarks, no
  production gate, commercial use included. See the
  [license pledge](./.github/GOVERNANCE.md).
- **Fast canvas** — auto-detected WebGL2 / OffscreenCanvas / Canvas2D renderer
  with MSDF text and WASM text shaping.
- **Headless server rendering** — render scenes to SVG / PNG / PDF in Node
  without a browser (`@oh-just-another/headless`, CLI included).
- **Real-time collaboration** — CRDT sync (Yjs) with presence cursors and
  optional end-to-end encryption; self-hostable relay.
- **Version history** — snapshots, branches, scene diff, and three-way merge.
- **Comments** — pinned annotation threads with mentions.
- **Framework-friendly** — React drop-in, a dependency-free
  `<oja-diagram>` custom element, and Vue / Svelte wrappers.
- **Extensible** — registry-based custom shapes, renderers, templates,
  importers (Mermaid / Graphviz / draw.io), and layouts.

## Use in your app

```bash
pnpm add @oh-just-another/editor react react-dom
```

```tsx
import { Editor } from "@oh-just-another/editor";
import "@oh-just-another/react-ui/styles.css";

export default function Diagram() {
  return <Editor style={{ position: "fixed", inset: 0 }} />;
}
```

Full guides and a live, in-browser editor: **<https://ohjustanother.site>**.

## Architecture

The library ships as independent npm packages under the `@oh-just-another/*` scope with one-way dependencies (L0 → L6) —
use the drop-in `editor`, or compose the lower layers directly.

## Contributing

Contributions are welcome — see [CONTRIBUTING.md](./CONTRIBUTING.md) and the
[Code of Conduct](./CODE_OF_CONDUCT.md). For vulnerabilities, follow the
[Security Policy](./SECURITY.md).

## License

[MIT](./LICENSE) — free for any use, including commercial.

diagram

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README