DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Databases
  4. Creating a Neo4j Example Graph With the Arrows Tool

Creating a Neo4j Example Graph With the Arrows Tool

Arrows is a JavaScript-based tool to render example graphs. Handy for presentations, Arrows meshes a minimal interface with support for features like the Cypher language.

Michael Hunger user avatar by
Michael Hunger
·
Mar. 23, 17 · Tutorial
Like (5)
Save
Tweet
Share
17.02K Views

Join the DZone community and get the full member experience.

Join For Free

Some years ago my colleague Alistair Jones created a neat little tool in JavaScript to edit and render example graphs in a consistent way.

It is aptly named Arrows and you can find it here: http://www.apcjones.com/arrows

We mostly use it for presentations, but also to show data models for Neo4j GraphGists and Neo4j Browser Guides. Because it also stores the positions of nodes, it’s always true to the same layout and doesn’t wiggle around.

arrows.jpg

The user interface is minimal:

  • Create new nodes with (+ Node)
  • Drag relationships out of the halo of a node
  • Either to an empty space for a new node or centered over an existing one to connect them
  • Double click nodes and relationships to edit them, set names and properties (in a `key: “value” syntax)
  • There are two styles: the chunky largish one and a more polished Bootstrap style
  • You can show the Markdown and also replace it with a previously saved
  • You can export to SVG or take a screenshot
  • You can also export to Cypher and open the graph in a Neo4j Console (console.neo4j.org)

arrows cypher.jpg
arrows sandbox.jpg

Arrows has its internal graph model and API that you can also control programmatically.
The tool is open source and you find the renderer and editor and a self-hosted variant in this GitHub project.

It uses HTML-Markdown with a bunch of attributes as data storage for your graph data.

<ul class="graph-diagram-markup" data-internal-scale="1.01" data-external-scale="1">


  <li class="node" data-node-id="0" data-x="-37" data-y="-18">
    <span class="caption">User</span><dl class="properties"><dt>name</dt><dd>"Mark"</dd></dl></li>
  <li class="node" data-node-id="1" data-x="67.58551025390625" data-y="-129.11111450195312">
    <span class="caption">Tweet</span><dl class="properties"><dt>id</dt><dd>42342</dd><dt>text</dt><dd>"Hello World"</dd></dl></li>
  <li class="node" data-node-id="2" data-x="96.57560926380722" data-y="75.154541015625">
    <span class="caption">User</span><dl class="properties"><dt>name</dt><dd>"Andreas"</dd></dl></li>
  <li class="node" data-node-id="3" data-x="189.08416748046875" data-y="-39">
    <span class="caption">Tweet</span><dl class="properties"><dt>id</dt><dd>2342</dd><dt>text</dt><dd>"Welcome"</dd></dl></li>
  <li class="node" data-node-id="4" data-x="264.2060852050781" data-y="75.154541015625">
    <span class="caption">Tag</span><dl class="properties"><dt>name</dt><dd>"fun"</dd></dl></li>


  <li class="relationship" data-from="0" data-to="1">
    <span class="type">POSTED</span>
  </li>
  <li class="relationship" data-from="0" data-to="2">
    <span class="type">FOLLOWED</span>
  </li>
  <li class="relationship" data-from="2" data-to="3">
    <span class="type">POSTED</span>
  </li>
  <li class="relationship" data-from="3" data-to="1">
    <span class="type">REPLIED</span>
  </li>
  <li class="relationship" data-from="3" data-to="4"></li>
</ul>


I recorded a quick video of Arrows in action. Enjoy!


Graph (Unix) Neo4j

Published at DZone with permission of , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How To Generate Code Coverage Report Using JaCoCo-Maven Plugin
  • What Should You Know About Graph Database’s Scalability?
  • Why Every Fintech Company Needs DevOps
  • Java Development Trends 2023

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: