Answering Diagram Questions with the draw.io tool

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.

Answering Diagram Questions

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.

Diagram questions in the Test 

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

• 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.

Various shape categories that are 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.

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.

• 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.

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.

Describing the Diagram

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

After you have 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.