Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .github/workflows/validate-readme.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
name: Validate README

on:
workflow_dispatch:
pull_request:
paths:
- README.md

permissions:
contents: read
pull-requests: write

jobs:
validate-package:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: gravity-ui/readme-validator@v1
with:
type: package
32 changes: 31 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const MyGraph = () => {
npm install @gravity-ui/graph
```

## Examples
## Usage

### React Example

Expand Down Expand Up @@ -262,3 +262,33 @@ graph.zoomTo("center", { padding: 100 });
4. Blocks and Connections
- [Block Groups](docs/blocks/groups.md)
- [Canvas Connection System](docs/connections/canvas-connection-system.md)

## License

Distributed under the MIT License. See [LICENSE](LICENSE) for details.

## For AI agents

A hybrid Canvas/React graph editor for node-based diagrams — reach for it to build flowcharts, node editors, or large interactive diagrams where Canvas gives performance at low zoom and React components give rich interactivity when zoomed in.

### When to use

- Node-based editors (flowcharts, pipelines, visual builders) with hundreds/thousands of nodes and connections.
- Mixed rendering: Canvas for the full-graph overview, React components for the blocks visible in the viewport at high zoom.
- Vanilla JS or React consumers — the core `Graph` class is framework-agnostic; `@gravity-ui/graph/react` provides the React bindings.

### When not to use

- To plot numeric data series (line/bar/scatter charts), use [`@gravity-ui/charts`](https://gravity-ui.com/charts) or [`@gravity-ui/yagr`](https://github.com/gravity-ui/yagr) — graph is a node/edge diagram editor, not a data chart.
- For a static, non-editable diagram with few nodes, an SVG or a simpler diagram lib may suffice without the Canvas/React viewport machinery.

### Common pitfalls

- **Hallucinated import `GraphEditor`** — the React components are `GraphCanvas`, `GraphBlock`, and the `useGraph` hook, imported from `@gravity-ui/graph/react`; the core class is `Graph` from `@gravity-ui/graph`.
- **Calling graph methods before `ATTACHED` state** — call `start()`/`zoomTo(...)` inside the `onStateChanged` callback when `state === GraphState.ATTACHED`, not on mount.
- **Forgetting `setEntities`** — `useGraph` returns `graph`, `setEntities`, `start`; data only appears after `setEntities({blocks, connections})`.
- **Mixing anchor types** — connections must reference existing anchor ids with matching `EAnchorType` (`IN`/`OUT`) on the source and target blocks.

## Documentation for AI agents

Agent-readable documentation for the installed version is located in `node_modules/@gravity-ui/graph/build/docs/INDEX.md`.
Loading
Loading