https://github.com/lars-berger/graphy-ng
Library for rendering directed graphs in Angular.
https://github.com/lars-berger/graphy-ng
angular angular2 dagre digraph directed-graph graph svg typescript
Last synced: 12 months ago
JSON representation
Library for rendering directed graphs in Angular.
- Host: GitHub
- URL: https://github.com/lars-berger/graphy-ng
- Owner: lars-berger
- License: mit
- Created: 2021-07-15T16:30:26.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-11T10:12:29.000Z (over 4 years ago)
- Last Synced: 2025-02-28T19:55:44.507Z (about 1 year ago)
- Topics: angular, angular2, dagre, digraph, directed-graph, graph, svg, typescript
- Language: TypeScript
- Homepage: https://lars-berger.github.io/graphy-ng
- Size: 1.24 MB
- Stars: 28
- Watchers: 6
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://github.com/lars-berger/graphy-ng/LICENSE.md)
[](https://www.npmjs.com/package/graphy-ng)
[](https://github.com/lars-berger/graphy-ng/pulls)
======
[](https://lars-berger.github.io/graphy-ng)
`graphy-ng` is a library for rendering directed graphs in Angular. Under the hood, [Dagre](https://github.com/dagrejs/dagre) is used as a layout engine and the graph is drawn using SVGs.
**The library is compiled with Ivy and requires Angular 12+**
[📚 Documentation](https://lars-berger.github.io/graphy-ng)
## Interactive example
A simple interactive demo can be found on StackBlitz. It showcases how nodes and edges can be added dynamically and some features like making use of custom templates, re-rendering on create/update, and navigating the graph through panning or zooming.
[âš¡ StackBlitz link](https://stackblitz.com/github/lars-berger/graphy-ng/tree/main/example)
## Installation
Using npm:
```
$ npm i graphy-ng && npm i -D @types/d3-shape
```
Using yarn:
```
$ yarn add graphy-ng && yarn add -D @types/d3-shape
```
## Basic usage
Import `GraphyModule` into your feature module.
`family-tree.module.ts`
```ts
@NgModule({
imports: [GraphyModule],
...
})
export class FamilyTreeModule {}
```
Consume `graphy-ng` in your component, providing templates for how nodes and edges should be rendered.
`family-tree.component.html`
```html
Here's my pretty graph:
{{ node.data.name }}
```
`family-tree.component.ts`
```ts
@Component({
...
})
export class FamilyTreeComponent {
nodes: InputNode<{ name: string }>[] = [
{ id: '1', data: { name: 'Carl' } },
{ id: '2', data: { name: 'Robin' } },
{ id: '3', data: { name: 'Jeremy' } },
];
edges: InputEdge[] = [
{ sourceId: '1', targetId: '3', },
{ sourceId: '2', targetId: '3', },
];
}
```
## Comparison vs. [ngx-graph](https://github.com/swimlane/ngx-graph)
**Pros:**
- Significantly more lightweight. Production bundle size of a fresh Angular app decreased from `490kb` to `255kb` by switching libraries (**47% overall decrease** in app size).
- Input nodes and edges are not modified by the library.
- Avoids requiring certain CSS classes to be hard-coded when using custom templates.
- Full TypeScript support when using custom templates.
**Cons:**
- Lacks more advanced and niche features — namely clusters, custom/force-directed layouts, and graph minimaps.
## License
`graphy-ng` is licensed under the terms of the [MIT License](https://github.com/lars-berger/graphy-ng/blob/main/LICENSE.md).