Skip to content

Quick and simple web based solution to visualize GraphMl network diagrams

Notifications You must be signed in to change notification settings

Abhi5h3k/graphml-viewer

Repository files navigation

🔥GraphMl Viewer🔥

Abhishek LinkedIn Abhishek StackOverflow

image

Demo

graphml viewer

graphml viwere

3D graph visualization:

3d Graph

Try multiple Layout

graph layouts

Hierarchical Layout

Herarchical layout

Spring layout with node color based on attribute

spring layout

change node shape:

Possible shapes : "ellipse", "triangle", "round-triangle", "rectangle", "round-rectangle", "bottom-round-rectangle", "cut-rectangle", "barrel", "rhomboid", "diamond", "round-diamond", "pentagon", "round-pentagon", "hexagon", "round-hexagon", "concave-hexagon", "heptagon", "round-heptagon", "octagon", "round-octagon", "star", "tag", "round-tag", "vee"

  1. Automatically from 24 node shapes

node shape

  1. Set from node data, need to have 'node_shape' key in node data

node shape from data

Show node background Image:

node background image

  1. Require image key in node data with image url as value
  2. You can download a sample GraphMl from graphml viewer to check how to modify graphml data for image and url

Load GraphMl

  1. Drag and drop multiple graphml files / click browse for files

load graphm

check graph analytics

graph anaytics

check n degree neighbour

  1. click on node
  2. select focus from top right icons
  3. now you will get 2 additional icons to expand and contract the neighbours
  4. click again on focus icon to retun to main graph

check n degree neighbour

Hover on node to see node neighbours

node neighbour

search node using node attribute (like : id, name)

search node

Export / view graph data (node data and edge data)

export graph as table

Capture and Download graph images/ json /graphml

export graph images or json or graphml

Using Lasso tool to select nodes and edges

  1. Double click on empty graph area and start lasso drawing from 3rd click

method one for lasso

  1. select lasso from right menu for style and click on empty graph area to start drawing

method 2 for lasso

Remove graph

remove graph

load and switch between multiple graphml files

switch graphml

setup

  1. clone repo
  2. last tested: Angular CLI: 8.3.29 Node: 14.20.1 OS: win32 x64 Angular: 8.2.14
  3. npm install
  4. ng serve

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Authors

License

This project is opensource, Kindly maintain the proper credits for author and contributers.

This project was generated with Angular CLI version 8.3.4.