Drawing graphs with Arrows.app
Arrows.app is a new tool from Neo4j Labs. It’s an easy way to draw pictures of graphs for web pages, documentation or presentations.
Written by:
and
In this blog post, we’re going to take a short tour of the features, and show some of the useful things you can do with the tool.
Starting Arrows.app
To use Arrows.app, navigate to arrows.app in a modern web browser. Chrome, Safari or Firefox are recommended.
Your first graph starts with one empty node in the middle of the screen:
Creating nodes
To create more nodes, you can click the “Add Node” button to the right side of the screen:
However, you won’t need to use this button very often, because usually it’s easiest to create new nodes automatically when creating new relationships.
Creating relationships
To create relationships, you need to hover just outside the node (halo) and then drag to create them like this:
This creates a new relationship, and also a new node. If you hover the new node over an existing node, the relationship will connect to the existing node instead of creating a new node. This makes it easy to make connections in your graph, for example to form a triangle:
Lining things up
You drag nodes to move them around. Dashed lines appear to help you line them up nicely.
Node captions and relationship types
Double-click on a node to start adding text. Alternatively, if you have a node selected, you can just press Enter.
To finish editing, press escape, or click away.
Relationships work the same way; you can double click or press enter to start typing text.
Relationship Direction
Relationship arrows appear in the direction that they were drawn. If you need them in the opposite direction, use the “reverse” button.
Labels and properties
In Neo4j we use labels to distinguish different types/roles of nodes. Add labels using the “+ Label” button:
Both nodes and relationships can have properties. Add properties using the “+ Property” button:
Styling
By default, the graphs you draw will look like the examples above: simple and bold, suitable for a quick sketch. The “Choose Theme” button reveals a number of other styles that may look better for the specific graph that you are drawing:
You can override styles in the theme by adjusting the parameters in the inspector on the right hand side of the window. Changes you make in the inspector apply to selected nodes and relationships. For example, use this to change the colour of a node.
If you have nothing selected, then the whole graph is affected. For example, if you don’t care around the direction of relationships in your graph, change “directionality” to “undirected” to hide all the arrow heads.
Exporting Images
The “Download / Export” button gives you files to download or share in various formats.
The PNG images are available in several resolutions, and cropped to exactly the edge of the graph. PNG images are perfect for presentations — paste them into Powerpoint or Google Slides.
There is also SVG export in case you need a vector graphics format. This is very useful if you want to tweak the image after export. For example, if you import into Sketch, each of the individual elements is still editable.
Cypher and Neo4j
Graphs naturally live in a Neo4j database. Arrows.app makes it easy to create a small graph in your Neo4j database by creating a Cypher statement for you. Click the “Download / Export” button choose the Cypher tab. You get the full data, including all the labels and properties if you have set them. Copy and paste the Cypher or, if you have Neo4j Desktop running, use the super-convenient “Run in Neo4j Browser” button.
Wrapping up
So to recap, you can use Arrows to create PNG, SVG or Cypher. They are great for using in presentations, documents, or to create Neo4j graphs.
To see all this in action, watch the short demo video on YouTube:
