Getting Started with Merlin

Welcome to Merlin! Merlin is a language for visualizing data structures and algorithms interactively. The Merlin Editor is a project developed by the ETH PEACH Lab, designed to provide users more convenient experience for making algorithms visualizations, by extending and integrating the Mermaid diagramming tool into a graphical user interface (GUI). This integration facilitates the creation and visualization of data structures directly within the application using customized domain specific languages (DSL).

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!

Features

• Customized Domain Specific Language: Merlin and Merlin-Lite are developed as DSL to serve for our project. They are easy-to-learn for any users with some programming background. They are also very extensible for customized usage, for instance, add a new pattern of data structure.
• Mermaid-extension Plugin Integration: Easily generate visualizations of data structure like array, graph etc., using the Mermaid-likewise extention and workflow.
• GUI Focus: The project is designed around improving the user experience with graphical interfaces for visulization rendering.
• Open-Source: The code is open-source and can be modified and extended to suit different needs.

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.

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 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!

To learn more about the GUI, see GUI Reference.
For a full language reference, see Language Reference.