# graphdrawing-ts

> TikZ/PGF graphdrawing ported to TypeScript

Latest version **1.0.1** (published 2022-12-08) · 0 weekly downloads

## Install

```sh
npm install graphdrawing-ts
pnpm add graphdrawing-ts
yarn add graphdrawing-ts
bun add graphdrawing-ts
```

## Health

**Score 25/100 (F)** — status: abandoned.

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-12-08 |
| First published | 2022-12-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mxsdev |
| Maintainers | mxsdev |
| Keywords | graph, tree, visualization, tikz, pgf, layout |

## Links

- npm: https://www.npmjs.com/package/graphdrawing-ts
- Repository: https://github.com/mxsdev/graphdrawing-ts
- Homepage: https://github.com/mxsdev/graphdrawing-ts#readme
- Issues: https://github.com/mxsdev/graphdrawing-ts/issues
- npm.io page: https://npm.io/package/graphdrawing-ts

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-12-08
- 1.0.0 — 2022-12-08

## README

# graphdrawing-ts

<p align="center">
  <img src="https://user-images.githubusercontent.com/16108792/206361712-499a0b0e-798f-4a5f-a9ac-eb3ab6b43a49.png" />
</p>

This project is a 1:1 zero-dependency rewrite of PGF's [graphdrawing][gd-doc] module from lua in TypeScript.

It can be used to create graph layouts at run-time and is useful for applications such as data-structure visualization.

**Please note** that this package will require a Node.js `assert` polyfill to run on browsers.

## Usage

As an example, here is how to create a directed 3-cycle:

```typescript
import { useState } from 'react'
import { GraphBuilder, ForceDeclarations, Path } from 'graphdrawing-ts'

const nodeSize = 25
const siblingSep = 20

const builder = new GraphBuilder(ForceDeclarations)

builder
  .pushOption('spring Hu 2006 layout')
  .pushOption('node distance', nodeSize * 3.5)
  .pushOption('sibling sep', siblingSep)

builder.beginGraphDrawingScope().pushLayout()

builder.createVertex("1", undefined, Path.squarePath(nodeSize))
builder.createVertex("2", undefined, Path.squarePath(nodeSize))
builder.createVertex("3", undefined, Path.squarePath(nodeSize))

builder.createEdge("1", "2")
builder.createEdge("1", "3")
builder.createEdge("2", "3")

builder.runGraphDrawingAlgorithm()

const renderedGraph = builder.renderGraph()
```

The resulting `renderedGraph` object has the structure:

```typescript
{
    // ...
    vertices: [
        { name: "1", pos: { x: 0, y: 0 } },
        { name: "2", pos: { x: 0, y: -135.6 } },
        { name: "3", pos: { x: -118.9, y: -67.8 } },
    ]
}
```

Visually:

<p align="center">
  <img src="https://user-images.githubusercontent.com/16108792/206361712-499a0b0e-798f-4a5f-a9ac-eb3ab6b43a49.png" />
</p>

As you can see, the vertices have been positioned in a nice way given the graph structure (that is, triangularly).

For more on using the graphdrawing library, see the [docs][gd-doc].

For more on implementing a front-end (renderer), check out the [react example](examples/react).

## `GraphBuilder`

This package adds a `GraphBuilder` class which acts as a wrapper around `InterfaceToDisplay`, automatically taking care of managing scope height.

## Supported Algorithms

 - [x] Force
 - [x] Trees
 - [x] Layered
 - [ ] Planar
 - [ ] Pedigree
 - [ ] Phylogenetics
 - [ ] Routing

[gd-doc]: https://tikz.dev/gd-usage-tikz

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