First Steps with Memgraph | Kruno Golubić

Note: This article was originally published on my Hashnode blog and on Dev.to.

In this tutorial, you will learn how to install Memgraph Platform, connect to it using Memgraph Lab, run your first query and style your graph. You will see that using Memgraph is not hard at all!

This tutorial is also available as a video on Memgraph’s YouTube channel: Watch on YouTube

Prerequisites

Memgraph Platform can be installed only with Docker. Instructions on how to install Docker can be found on the official Docker website.

1. Install Memgraph Platform

First, you need to download and install Memgraph Platform. All you need to do is to open a terminal on your computer and run the following command:

docker run -it -p 7687:7687 -p 7444:7444 -p 3000:3000 -v mg_lib:/var/lib/memgraph memgraph/memgraph-platform

Once the installation is done, you will see a message similar to this one:

Status: Downloaded newer image for memgraph/memgraph-platform:latest
Memgraph Lab is running at localhost:3000
mgconsole 1.1
Connected to 'memgraph://127.0.0.1:7687'
Type :help for shell usage
Quit the shell by typing Ctrl-D(eof) or :quit
memgraph>

That means that you have installed Memgraph Platform and that you have Memgraph up and running. Kudos!

2. Connect to Memgraph Lab

Since you installed and started the Memgraph Platform, the Memgraph Lab is already running, so open your web browser and go to localhost:3000. When the Memgraph Lab loads, click Connect now.

Memgraph Lab connect screen

That’s it! You can see the Memgraph Lab Dashboard, so you are ready to head over to the next step.

Memgraph Lab dashboard

3. Import Dataset

Since this is a fresh install, there are no nodes and relationships in your database. Memgraph has prepared more than 20 datasets that you can use for testing and learning. You will now import one of those datasets. In the sidebar click Datasets. Next, go to Capital cities and borders and click Load Dataset.

Memgraph Lab datasets panel

You will see a warning that a new dataset will overwrite current data in the database. That is not a problem since you don’t have any data yet, but in the future be careful when importing data. Go ahead and click Confirm. Once the import is done, click X to close the dialog.

Memgraph Lab dataset import confirmation

4. Run Query

Now that the data is imported it is time to run your first Cypher query. You will write a query that displays all of the cities and all of the connections.

Click Query Execution in the sidebar, then copy and paste the following code into the Cypher Editor:

MATCH (n)-[r]-(m)
RETURN n, r, m;

Click Run query to run the above query and see the result in the Graph results tab.

Memgraph Lab first Cypher query result

Here is another query. Imagine that you are in Madrid and you want to visit other capital cities that are one or two hops away. You can use Cypher to find that out:

MATCH p = (madrid:City { name: "Madrid" })-[e *BFS ..2]-(:City)
RETURN p;

Click Run query to see the result.

Memgraph Lab Cypher editor with BFS query

Memgraph Lab graph results showing cities near Madrid

5. Style Your Graph

When your results are shown on the map, you can move around. Zoom in and change the map style to Detailed.

Memgraph Lab map style selector

You will now use the Graph Style Editor to change how nodes and relationships are shown. Find this block:

@NodeStyle HasLabel(node, "City") {
  color: #DD2222
  color-hover: Lighter(#DD2222)
  color-selected: Lighter(#DD2222)
}

And add image-url: Property(node, "flag") so it looks like this:

@NodeStyle HasLabel(node, "City") {
  image-url: Property(node, "flag")
  color: #DD2222
  color-hover: Lighter(#DD2222)
  color-selected: Lighter(#DD2222)
}

Click Apply.

Memgraph Lab style editor with flag icons on nodes

Now make the nodes and font a bit bigger. Replace the default @NodeStyle block with:

@NodeStyle {
  size: 10
  color: #DD2222
  color-hover: Lighter(#DD2222)
  color-selected: Lighter(#DD2222)
  border-width: 1.8
  border-color: #1d1d1d
  font-size: 12
}

And update the edge styling to make relationships thicker with a red hover color:

@EdgeStyle {
  color: #999999
  color-hover: #ff0000
  color-selected: #1d1d1d
  width: 2
  width-hover: 2.7
  width-selected: 2.7
  font-size: 7
  label: Type(edge)
}

Here is the final result:

Memgraph Lab final styled graph with capital cities and flags

Where to Next?

In this tutorial, you learned how to install Memgraph Platform, use Memgraph Lab to import a dataset, run queries, and style your graph. Not bad for a start!

Some resources to continue learning: