{"id":871,"date":"2021-03-14T19:22:14","date_gmt":"2021-03-15T02:22:14","guid":{"rendered":"https:\/\/coderpad-staging.io\/?post_type=doc&#038;p=835"},"modified":"2023-12-14T11:51:57","modified_gmt":"2023-12-14T19:51:57","slug":"drawing-mode","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/interview\/drawing-mode\/","title":{"rendered":"Drawing mode"},"content":{"rendered":"\n<p>During technical interviews you may need to sketch out a system or describe technical architecture, which you can do within the pad with Drawing Mode (powered by <a href=\"https:\/\/excalidraw.com\/\" target=\"_blank\" rel=\"noopener\">Excalidraw<\/a>) . You can conduct the interview entirely in Drawing Mode or toggle between the IDE and Drawing Mode as needed.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1024x486.png\" alt=\"The drawing mode screen is open with a mock diagram showing a flow between different shapes.\" class=\"wp-image-42101\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1024x486.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-300x143.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-768x365.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1536x730.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Our Excalidraw-based Drawing Mode allows you to join a virtual whiteboard alongside a candidate. Drawing Mode can be used for a variety of use-cases, but mostly it will be used for asking questions based around:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Technical diagramming<\/li>\n\n\n\n<li>Database design<\/li>\n\n\n\n<li>UI\/UX Mockups<\/li>\n<\/ul>\n\n\n\n<p>The goal of Drawing Mode is to allow you to collaborate with the candidate to see how they think about certain questions that you ask them during an interview.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705Tired of creating the same diagram over and over again for every interview? You can use the <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/\"><strong><strong>Include starter drawing<\/strong><\/strong> toggle in the question creation wizard<\/a> to attach a diagram or drawing to your commonly used interview questions.<\/p>\n<\/blockquote>\n\n\n\n<p>We advise giving the candidate a heads up if there will be a Drawing Mode session during your interview. That way it gives the candidate a chance to come to Interview ahead of time, play around with Drawing Mode and become familiar\/more comfortable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing Drawing Mode<\/h2>\n\n\n\n<p>You can access Drawing Mode inside any <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/quick-start-guides\/interviewers\/live-interview-pads\/\">live-interview pad<\/a>. To open, click the <strong>Drawing Mode<\/strong> button located in the top left hand corner. <\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1-1024x486.png\" alt=\"The draw button is highlighted in the left tab menu and the draw window is open in the center of the screen.\" class=\"wp-image-42102\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1-1024x486.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1-300x143.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1-768x365.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1-1536x730.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-1.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>As soon as you click on the button, Drawing Mode will open and be ready for use.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u261d\ufe0f Want to use a tablet or phone to draw diagrams? Simply send yourself a link to the pad and open it up on your device and draw away. You&#8217;ll probably also want to have the pad open on your desktop or laptop so you can easily access the other features while you draw.<\/p>\n<\/blockquote>\n\n\n\n<p><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"using-drawing-mode-inside-a-pad\">Using Excalidraw-based Drawing Mode inside a pad<\/h3>\n\n\n\n<p>Once you open Drawing Mode, you can move the drawing container around. For most interviews, it\u2019s always good to have your code in the left hand side of the screen, and drawing mode sitting just to the right of it.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"912\" style=\"aspect-ratio: 1920 \/ 912;\" width=\"1920\" controls loop muted src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/2025-02-14_07-05-05.mp4\"><\/video><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"opening-drawing-mode-in-a-new-window\">Opening Drawing Mode in a new window<\/h3>\n\n\n\n<p>You also have the option to open Drawing Mode in an entirely new window. To do this, click on the icon located in the top right hand corner of Drawing Mode. This is beneficial if you have a larger screen.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"770\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-2-1024x770.png\" alt=\"The &quot;open in new window&quot; button is shown at the top right of the drawing mode window.\" class=\"wp-image-42106\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-2-1024x770.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-2-300x226.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-2-768x577.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-2-16x12.png 16w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-2.png 1213w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"interviewer-and-candidate-access\">Interviewer and candidate access<\/h3>\n\n\n\n<p>Both the interviewer and the candidate have access to open\/close Excalidraw-based Drawing Mode at any time during the interview. Each participant has control of their own environment, meaning when an interviewer opens up Drawing Mode, it will not open for the candidate. If you decide to close Drawing Mode, the contents of all participants will still be accessible upon re-opening.<\/p>\n\n\n\n<p>In other words, the drawing window <em>contents <\/em>are always synced between ALL pad users, but each pad user controls whether or not their drawing window itself is open or closed at any moment.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"drawing-mode-tools\">Drawing Mode tools<\/h2>\n\n\n\n<p>In Drawing Mode, you have access to different tools. You\u2019ll see options to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Clear the canvas and switch between light\/dark mode<\/li>\n\n\n\n<li>Access diagram shapes, text, and import images<\/li>\n\n\n\n<li>Edit selected diagram shapes<\/li>\n\n\n\n<li>Zoom in\/out and undo\/redo changes<\/li>\n\n\n\n<li>Extensive shapes Library. We provide some default shapes but you can click through to live, Excalidraw-hosted libraries and get a wide assortment of shapes that way<\/li>\n\n\n\n<li>AI-based features, including the ability to convert Mermaid diagrams to the Excalidraw interface.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Interested in keyboard shortcuts? Type <code>?<\/code> in drawing mode and the Excalidraw shortcuts will display for you.<\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-4-1024x486.png\" alt=\"The drawing mode screen is shown with numbers next to each of the features listed above.\" class=\"wp-image-42144\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-4-1024x486.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-4-300x143.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-4-768x365.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-4-1536x730.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-4-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2025\/02\/image-4.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705Need to delete an object? Simply click on the object and hit the <code>Delete<\/code> button on your keyboard.<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"playback-and-after-the-interview\">Playback and after the interview<\/h2>\n\n\n\n<p>You will be able to see the final state of the drawing as part of the pad playback for review. If Drawing Mode was enabled during the pad session, there will be a tab on the right side of the editor to review the drawing &#8211; labeled \u201cDrawing\u201d. If Drawing Mode was not enabled during the pad session, the tab will not appear.<\/p>\n","protected":false},"parent":16734,"menu_order":3,"template":"","class_list":["post-871","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":28,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/871\/revisions"}],"predecessor-version":[{"id":42100,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/871\/revisions\/42100"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/16734"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}