Skip to content
Cloud Architecture Graphs for Humans
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
docs
images
newton
.dockerignore
.eslintignore
.eslintrc
.gitignore
.travis.yml
Dockerfile
LICENSE.md
README.md
azure-pipelines.yml
docker-compose.yml
jest.config.js
jsdoc.json
package-lock.json
package.json
webpack.build.js
webpack.demo.js

README.md

Newton Graph Prototype

Build Status Test Coverage Maintainability Known Vulnerabilities Build Status

This repository contains learning and prototype code for a high-level dashboard for architects and stakeholders. The goal is to illustrate product and service dependencies in a software architecture.

View API Documentation →

Demo Screenshot

The goal is to visualize architectures in large organizations as organisms that live and breath with deployments, problems, etc. These type of visualization could instead, over time:

  • reveal insights about how Conway's Law applies to the organization.
  • visual domain (as opposed to technical) dependencies across teams.

Network - Data Wrapper

A Network is essentially a data wrapper. Its biggest advantage is that it dynamically calculating links between nodes, based on a unique identifier uid, instead of array indexes.

The basic data format is as so:

const nodes = [
	{
		id: "1",
		status: "up",
		label: "Frontend"
	},
	{
		id: "2",
		status: "up",
		label: "API Gateway"
	}
]

const linksMap = [
	{ 
		source: 1, 
		target: 2 
	}
]

const network = new Network(nodes, linksMap)

Graph - Visualization

While Network handles the data, Graph handles the visualizations, including layout, animations, etc.

const graph = new Graph({
	width: window.innerWidth,
	height: window.innerHeight - 60,
	flow: 'horizontal',
	draggable: true
})
const network = new Network(data.nodes, data.linksMap, { uid: 'id' })

graph.init().bind(network)

Event Driven

Note that Graph is event-driven means that it listens for events, e.g. update and updates the visualization automatically depending on the bound network data.

Example

network.on('update', (data) => {
	this.nodes.render(data)
	this.labels.render(data)
	this.links.render(data)
	this.emit('update', data)
})

Development

Install dependencies

First install the dependencies required:

npm install

Preview

To view the prototype in the browser, run

npm run dev:demo

which starts the webpack dev server and automatically opens http://localhost:9000 in a browser window.

You can’t perform that action at this time.