How to Use the Drawing Tool (System Design Format)

Account

How to Use the Drawing Tool

In system design format problems, you can use a drawing tool to create architecture diagrams, flow charts, and more. This page explains the basic usage of the drawing tool.

What is the Drawing Tool?

The drawing tool is a diagram creation tool used in system design format problems. You can draw architecture diagrams by placing system components such as servers, databases, users, and networks as shapes, and connecting them with lines and arrows.

Basic Shape Operations

Add a Shape

  1. Select the desired shape (e.g., server, DB) from the panel on the left side of the screen.
  2. Drag and drop it to the desired location on the canvas.
  3. The shape will be added to the canvas.

Move a Shape

  1. Click to select the shape you want to move (selected shapes will be highlighted).
  2. Drag the shape to your preferred position.
  3. Release the mouse button to fix the shape's position.

Delete a Shape

  1. Click to select the shape you want to delete.
  2. Press the Delete key or Backspace key.

Add Text to a Shape

  1. Double-click the shape to which you want to add text.
  2. You will enter text input mode.
  3. Enter descriptions, component names, etc.
  4. Click outside the shape to confirm the input.

Connector Line (Arrow) Operations

Connect Shapes

  1. Move the mouse cursor close to the source shape (a connection point will appear at the edge of the shape).
  2. Click and drag from the connection point.
  3. Draw a line to the destination shape and release the mouse button over its connection point.
  4. The two shapes will be connected by an arrow.

Add a Label to a Connector Line

  1. Double-click the connector line to which you want to add a label.
  2. A text input field will appear.
  3. Enter API endpoint names, protocols, data flows, etc.
  4. Click outside the line to confirm the input.

Delete a Connector Line

  1. Click to select the connector line you want to delete.
  2. Press the Delete key or Backspace key.

Canvas Operations

Move the Viewport (Pan)

  • You can move the viewport by dragging an empty area of the canvas.

Zoom In/Out

  • Rotate your mouse wheel up or down to zoom in or out of the canvas.
  • You can also pinch in or out.

Reset to Full View

  • Click the "Fit" button at the top of the canvas or in the menu to adjust the display so that the entire diagram you created fits on the screen.

Undo/Redo Operations

Operation Shortcut Key
Undo Ctrl+Z (Windows/Linux) / Cmd+Z (Mac)
Redo Ctrl+Y / Cmd+Shift+Z

Notes

  • Do not close the browser tab while answering. If you accidentally close it, you can resume from the URL in the email sent at the time of entry.
  • For the overall process of system design format problems, please also refer to the "How to Proceed with the System Design Format" page.