VanGraph: Helper Library to Visualize Dependency Graph Among States and DOM Nodes

VanGraph is a library that helps you visualize dependency graph among states and DOM nodes with the help of Graphviz. Here is the sample usage:

const firstName = van.state("Tao"), lastName = van.state("Xin")
const fullName = van.derive(() => `${firstName.val} ${lastName.val}`)

// Build the DOM tree...

// To visualize the dependency graph among `firstName`, `lastName`, `fullName`, and all the
// derived states and DOM nodes from them.
vanGraph.show({firstName, lastName, fullName})

Checkout a demo in CodeSandbox.

Installation

Via NPM

The library is published as NPM package vanjs-graph. Run the following command to install the package:

npm install vanjs-graph

To use the NPM package, add this line to your script:

import * as vanGraph from "vanjs-graph"

Via a Script Tag

Alternatively, you can import VanGraph from CDN via a <script type="text/javascript"> tag:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/van-graph.nomodule.min.js"></script>

https://cdn.jsdelivr.net/npm/[email protected]/dist/van-graph.nomodule.js can be used for the non-minified version.

Note that: you need to import VanJS and @viz-js/viz before VanGraph for it to be used properly:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.2.nomodule.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@viz-js/[email protected]/lib/viz-standalone.js"></script>

Try on jsfiddle

Documentation

vanGraph.show(states[, options]) => Promise<SVGSVGElement>

The parameter states represents a collection of State objects whose dependency graph we want to visualize. All the State objects and their dependents will be rendered in the dependency graph. states can either be specified as a plain object, e.g.: {firstName, lastName, fullName}, or as an array, e.g.: [firstName, lastName, fullName]. If states is specified as an array, the variable names won't be shown in the rendered graph.

options is a plain object with the following properties:

• rankdir: Type string. Default "LR". Optional. Corresponding to the graph attribute rankdir in Graphviz.

The function returns a Promise<SVGSVGElement> so that you can await the result and then attach SVGSVGElement to the main DOM tree.