Getting Started with Merlin

Welcome to Merlin! Merlin is a language for visualizing data structures and algorithms interactively. This guide will help you get started quickly.

What is Merlin?

Merlin is a declarative language specifically for algorithm animations. It comes with code editor and a GUI to help you create you visualizations more quickly.

The design of Merlin is informed by an analysis of 400 examples from an online coding platform, examining their structure, common elements, and creation processes. So, it's perfect for teaching, learning, and exploring algorithms!

How It Works

• Create pages using page to show steps or slides or use the page controls.
• Create objects and display them using show <obj> your objects once and they'll show on all future pages (use hide <obj> to hide it again) or use the components menu.
• Style your objects with methods (e.g., <obj>.setColor, <obj>.addNode) or by clicking on a unit to edit it and double-clicking on a component to edit multiple units at the same time.

For a full language reference, see Language Reference.

Try it Online

You can use the Merlin Editor to write and run Merlin code instantly. Just copy any example below and click the Merlin Editor button above a code block!

Your First Merlin Program

As your first Merlin diagram, we create a visualization of the Fibonnacci sequence.

Click the Add Page button at the top. This action will add a blank page. Next, click the new button at the top left. In the dropdown menu, select Array and then enter 1 when prompted for values. Alternatively, you can copy the code shown on the left.

Source Code

1array array1 = {
2value: ["1"]
3color: [null]
4arrow: [null]
5}
6
7
8page
9show array1

Rendered Diagram

The gives us the first page of our visualization. Now, we want to show the next step. Create another page by clicking the Add Page button again. On this page we want to add the next element. We can do this by clicking on the array element in the diagram and in the pop-up menu, clicking on the Add Unit. When prompted for a value, enter another 1. That completes our second page. The code and GUI should now show the following.

Source Code

1array array1 = {
2value: ["1"]
3color: [null]
4arrow: [null]
5}
6
7
8page
9show array1
10
11page
12array1.insertValue(1, "1")

Rendered Diagram

Now, we have reached the step of the Fibonnacci sequence where the next number is the addition of the two previous numbers. We create another page and add another elements. Scroll up if you don't remember how to do that. The output will be the following.

Source Code

1array array1 = {
2value: ["1"]
3color: [null]
4arrow: [null]
5}
6
7
8page
9show array1
10
11page
12array1.insertValue(1, "1")
13
14page
15array1.insertValue(2, "2")

Rendered Diagram

We want to add some additional information to our visualization to make it more clear. Click on the last element of the array and click on the Add Arrow button. Then, enter the text 1 + 1 = 2. The output will now be as follows.

Source Code

1array array1 = {
2value: ["1"]
3color: [null]
4arrow: [null]
5}
6
7
8page
9show array1
10
11page
12array1.insertValue(1, "1")
13
14page
15array1.insertValue(2, "2")
16array1.setArrow(2, "1 + 1 = 2")

Rendered Diagram

Congratulations! You have created a complete visualization.

Try out the Merlin editor yourself at Merlin Editor.
To learn more about the GUI, see GUI Reference.
For a full language reference, see Language Reference.