This austere little set of pages is mostly for my own use as I find myself exporting (from libraries or databases) dependency trees and the likes. Instead of writing something ad-hoc each time, this page allows me to quickly visualise and demonstrate.

As an example, below the query to export all dependencies between materialized views within an AWS Redshift database: ¹

select
  parent || ',' || child as "csv"
from (
  select
    ref_schema || '.' || ref_name as parent,
    "schema" || '.' || "name" as child
  from pg_catalog.stv_mv_deps
  order by 1,2
)

This would output some CSV-looking list that I can directly copy/paste in the visualisation input form of these pages. Below some links to various visualisations ² to plot such networks.

Visualisation options

Force-directed graph

In 3D.

The most fun, if not the most practical to demonstrate. But hey, it makes people smile.

Based on the 3d-force-graph package, and the excellent series of examples around it. Itself making use of the now well-known three.js and its WebGL rendering.

Graphviz

The drawing engine written in C, Graphviz, has now been compiled to WASM by the folks at HPCC Systems, making it usable in browsers.

Beware, expect old-school graphics.

Hierarchical edge bundling

My personal favourite to visualise multilevel dependency networks. According to the author of From Data to Viz: ³

Hierarchical edge bundling allows visualising adjacency relations between entities organized in a hierarchy. The idea is to bundle the adjacency edges together to decrease the clutter usually observed in complex networks.

Well said.

Mermaid

Following the Sugiyama method after the author of the original publication solving the layout optimization problem back in the days. ⁴

Graph built via Mermaid (docs), a somewhat broader implementation of the DAG solution presented above defining its own syntax (generated in these pages from the provided data) and based on yet another rendering engine: dagre-d3 (now officially deprecated but still working well).

Input formats

Most of these litle tools accept data in the following formats: CSV in which each line carries a pair of parent,child or child,parent:

parent,child
parent,child
...

or JSON in which a list of children is provided for each parent, or a list of parents for each child:

{
  parent: [
    child,
    child,
    ...
  ],
  parent : [
    ...
  ],
  ...
}

Look for the buttons to precise which input format is provided to avoid swaping up the colour coding. And let's keep it consistent, no mixing between the formats in the same file.

Most of these representation colour parent link(s) / node(s) in blue, and child link(s) / node(s) in red.

Tooling

Also available in this repo, some small Python utils to extract information from SQL queries or convert tabular CSV content to the JSON input some of the visualisations expect. Run via:

$ make env
> python utils/csv_to_json.py <CSV FILE>  # for instance

Again, this works for me and my current projects! No other claims nor guarantees.