Answering Diagram Questions with the draw.io tool

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.

1. In your Test, select the 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.

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.

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

1. 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.
2. To add a shape, double-click on the shape, or drag and drop it into the editor.
3. In this manner, add all the required shapes to create your diagram.
4. In the editor, double-click on a shape to edit and define the name and other properties.

5. Similarly, to represent Entity Relationship diagrams with Tables, Rows, and Columns, use the shapes under the Entity-Relation category.
6. 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 right and provides options to format the text, styles, and arrangement of shapes in the diagram.

To view the Format Panel in the editor, click the  option and select Format Panel from the list. In the diagram, double-click on any shape to view the relevant formatting options in the Format Panel. Format the shapes in the diagram using these options as shown below.

Describing the Diagram

In the Explanation area, you can also add a description of your 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 before the Test ends.