Need help with JavaFXSmartGraph?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

228 Stars 33 Forks MIT License 29 Commits 5 Opened issues


Generic (Java FX) Graph Visualization Library

Services available


Need anything else?

Contributors list

# 374,987
1 commit

(JavaFX) SmartGraph

This project provides a generic (Java FX) graph visualization library that can automatically arrange the vertices' locations through a force-directed algorithm in real-time.

You can, instead, statically place the vertices according to other algorithms.

Vertices and edges can be styled through a css stylesheet or programmatically (even at runtime).

smartgraph realtime


You need a working JDK with JavaFX libraries to compile/use the library. The code was tested with JDK 8 and OpenJDK 11.

Using the library

Check the

folder for compiled library and source code. The jar library is the only requirement, but if you need to attach the javadoc and source code in your IDE, additionally use the zip file.

The visualization library can be used together with any ADT that adheres to the

interfaces. Sample implementations are included.

Accelerated graphics

Since the visualization is computation-intensive during automatic force-directed layout of vertices, you should make sure that the graphics card is used to offload much of the work. This is only guaranteed to work with Oracle's JDK.

In windows the JVM machine should automatically take care of that, while in Linux you must configure it manually with the


Getting Started

What's new?

  • (0.9.4) You can now annotate a method with

    within a model class to provide the displayed label for a vertex/edge; see the example at
    . If no annotation is present, then the
    method is used to obtain the label's text.
  • (0.9.4) You can mannualy alter a vertex position on the panel at anytime, through

    SmartGraphPanel.setVertexPosition(Vertex v)
    ; see the example at
  • (0.9.4) You can override specific default properties by using a String parameter to the

    constructor; see the example at
    . This is useful if you want to display visually different graphs within the same application.
  • (0.9.4) You can now style labels and arrows individually.

Basic usage

//create the graph
Graph g = new GraphEdgeList<>();
//... see example below

SmartPlacementStrategy strategy = new SmartCircularSortedPlacementStrategy(); SmartGraphPanel graphView = new SmartGraphPanel<>(g, strategy); Scene scene = new Scene(graphView, 1024, 768);

Stage stage = new Stage(StageStyle.DECORATED); stage.setTitle("JavaFXGraph Visualization"); stage.setScene(scene);;

//IMPORTANT - Called after scene is displayed so we can have width and height values graphView.init();

This will display the graph using the instantiated placement

. You can create your own static placement strategies by implementing the
interface (see included examples).

Toggle automatic mode

You can toggle (

) the automatic arrangement of vertices in real-time with:

or bind the corresponding property to any observable value:

CheckBox automatic = new CheckBox("Automatic layout");

Responding to click events on vertices and/or edges

You can attach actions with:

graphView.setVertexDoubleClickAction(graphVertex -> {
    System.out.println("Vertex contains element: " + graphVertex.getUnderlyingVertex().element());

graphView.setEdgeDoubleClickAction(graphEdge -> { System.out.println("Edge contains element: " + graphEdge.getUnderlyingEdge().element()); //dynamically change the style, can also be done for a vertex graphEdge.setStyle("-fx-stroke: black; -fx-stroke-width: 2;"); });

These actions will be performed whenever you double click a vertex and/or an edge.

Updating the view

When you make changes to the graph, you can update the visualization by calling


this will add/remove the corresponding vertices and edges from the visualization. If a new vertex is connected to an existing one, it will be initially placed in the vicinity of the later. Otherwise, if it is an isolated vertex it will be placed in the center of the plot.

SmartGraph Properties

Note: Either using the library or including the source code, the
file must exist in you project folder.

You can set the graph visualization properties in the
# Vertex related configurations
vertex.allow-user-move = true
vertex.radius = 15 
vertex.tooltip = true
vertex.label = false

Edge related configurations

edge.tooltip = true edge.label = false

only makes sense if displaying an oriented graph

edge.arrow = false

(automatic) Force-directed layout related configurations

-- You should experiment with different values for your

-- particular problem, knowing that not all will achieve

-- a stable state

layout.repulsive-force = 5000 layout.attraction-force = 30 layout.attraction-scale = 10

SmartGraph CSS styling

Note: Either using the library or including the source code, the

file must exist in you project folder. For example, if all your vertices turn out black, this is because this file cannot be found.

You can set the default CSS styles in the

file; see below.

The style classes

contain the default styling for the nodes and must exist in the file. You can, however, provide different classes to apply to specific elements, e.g., vertices, edges and labels.

The following example contains an additional definition for the CSS class

. You can apply the style individually to an existing element, e.g., vertex, as follows:
.graph {
    -fx-background-color: #F4FFFB;

.vertex { -fx-stroke-width: 3; -fx-stroke: #61B5F1; -fx-stroke-type: inside; /* you should keep this for vertex.radius to hold */ -fx-fill: #B1DFF7; }

.vertex-label { -fx-font: bold 8pt "sans-serif"; }

.edge { -fx-stroke-width: 2; -fx-stroke: #FF6D66;
-fx-stroke-dash-array: 2 5 2 5; /* remove for clean edges */
-fx-fill: transparent; /*important for curved edges. do not remove */ -fx-stroke-line-cap: round; -fx-opacity: 0.8; }

.edge-label { -fx-font: normal 5pt "sans-serif"; }

.arrow { -fx-stroke-width: 2; -fx-stroke: #FF6D66;
-fx-opacity: 0.8; }

/* Custom vertex. You should revert any unwanted styling in the default element, style, since custom styles will be appended to the default style / .myVertex { -fx-stroke-width: 5; -fx-stroke: green; -fx-stroke-type: inside; / you should keep this if using arrows */ -fx-fill: yellowgreen; }


Below are provided some graphs and the corresponding visualization, either using a static placement strategy or by the automatic force-directed layout algorithm.

Sample Graph

The following code creates a sample graph:

Graph g = new GraphEdgeList<>();

g.insertVertex("A"); g.insertVertex("B"); g.insertVertex("C"); g.insertVertex("D"); g.insertVertex("E"); g.insertVertex("F"); g.insertVertex("G");

g.insertEdge("A", "B", "1"); g.insertEdge("A", "C", "2"); g.insertEdge("A", "D", "3"); g.insertEdge("A", "E", "4"); g.insertEdge("A", "F", "5"); g.insertEdge("A", "G", "6");

g.insertVertex("H"); g.insertVertex("I"); g.insertVertex("J"); g.insertVertex("K"); g.insertVertex("L"); g.insertVertex("M"); g.insertVertex("N");

g.insertEdge("H", "I", "7"); g.insertEdge("H", "J", "8"); g.insertEdge("H", "K", "9"); g.insertEdge("H", "L", "10"); g.insertEdge("H", "M", "11"); g.insertEdge("H", "N", "12");

g.insertEdge("A", "H", "0");

Sample Graph circular sorted placement (static)

graph circular placement

Sample Graph automatic layout

graph automatic layout

Sample Digraph (directed graph)

The following code creates a sample digraph:

Digraph g = new DigraphEdgeList<>();

g.insertVertex("A"); g.insertVertex("B"); g.insertVertex("C"); g.insertVertex("D"); g.insertVertex("E"); g.insertVertex("F");

g.insertEdge("A", "B", "AB"); g.insertEdge("B", "A", "AB2"); g.insertEdge("A", "C", "AC"); g.insertEdge("A", "D", "AD"); g.insertEdge("B", "C", "BC"); g.insertEdge("C", "D", "CD"); g.insertEdge("B", "E", "BE"); g.insertEdge("F", "D", "DF"); g.insertEdge("F", "D", "DF2");

//yep, its a loop! g.insertEdge("A", "A", "Loop");

Please note that we use the property values

edge.arrow = true
vertex.label = true

Given its a small graph, we increased the

layout.repulsive-force = 25000
. You should use higher values for smaller graphs; inversely, use smaller values for larger graphs.

Sample Digraph circular sorted placement (static)

digraph circular placement

Sample Digraph automatic layout

digraph automatic layout


You can fork this project or submit a pull request. Pull requests should adhere to the existing naming and Javadoc conventions.



This project is licensed under the MIT License - see the LICENSE file for details. All derivative work should include this license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.