Answering Diagram Questions with the draw.io tool – HackerRank Support Center

Hide

In this article

Overview

In HackerRank Tests, Candidates are provided with the popular and feature-rich draw.io diagramming tool to answer the Diagram type of Questions. draw.io is integrated with HackerRank Tests. This tool is easy to use and includes a variety of readymade diagram shapes to create UML diagrams, Entity-Relationship diagrams, flowcharts, etc.

The following sections provide you with a brief explanation of the draw.io tool's capabilities in HackerRank Tests and how you can use them to design your diagrams and flowcharts.

Refer to the draw.io training material site for detailed information about using the tool.

Steps to Answer a Diagram Question

Here is a quick video to get you started with the Answering Diagram Questions workflow.

Or, if you prefer to follow directions, here are the steps for your ready reference.

Steps

In your Test, select the Diagram Type Question or click on Solve.

Answering a Diagram type Question

The draw.io shapes and options available in HackerRank Tests

The draw.io diagramming tool editor is displayed. The editor's left pane includes shapes of different categories which can be used to create the diagrams.

The draw.io editor with options to add and format diagram shapes

Various shape categories available in the left pane:

The left pane lists a variety of shapes under different categories to represent Classes, Entities, Associations, Arrows, Objects, Tables, Rows, etc, in different types of diagrams. Expand a category to view the available shapes.

Shapes to represent UML diagrams

Example:

To create UML diagrams, expand the UML category in the left pane and use the shapes to represent Classes, Objects, Attributes, Associations, Dependencies, etc.
For creating Entity relationship diagrams, use the shapes under the Entity-Relation category to represent Tables, Columns, Rows, entities, etc.

Creating diagrams using the draw.io shapes

In the left pane, select the relevant category and double-click on the required shape to add the shape to the editor. For example, to represent a class with methods, add the shape that defines a class and its methods.
To add a shape, double-click on the shape, or drag and drop it into the editor.
In this manner, add all the required shapes to create your diagram.
In the editor, double-click on a shape to edit and define the name and other properties.

Creating a UML diagram

Similarly, to represent Entity Relationship diagrams with Tables, Rows, and Columns, use the shapes under the Entity-Relation category.
Double-click on each shape to edit and define the names for Tables, Rows and Columns, data types, and entity names.

Editing the shapes to define their names and properties

According to the requirements, follow the same steps to add shapes from other categories in the left pane.

Note: The left pane displays only the shape categories which are permitted by the test setter to answer the Diagram Question. For example, if the question requires creating a UML diagram, you might only see the UML category of shapes and options in the diagram editor.

Diagram Formatting Options

The diagram editor includes a Format Panel which displays on the top and provides options to format the text, styles, and arrangement of shapes in the diagram.

Formatting the shapes

Describing the Diagram

In the Explanation area, you can also add a description of your diagram.

Adding a description of the diagram

After you've answered the Question, you must click Submit Answer and Continue to save the diagram. You can revisit the diagram, change the solution and re-submit the answer any number of times by clicking on Modify before the Test ends. Once you are done answering the question click on Submit Test, then A popup message will appear where you can select whether you want to close the test or not.