--- title: "Drawing mode Documentation - CoderPad Interview Docs" description: "Learn how to to sketch out a system or describe technical architecture using Drawing Mode in the Interview platform." canonical: "https://coderpad.io/resources/docs/interview/drawing-mode/" last_modified: "2023-12-14 11:51:57" --- 1. [Docs home](https://coderpad.io/resources/docs/) / 2. [Interview](https://coderpad.io/resources/docs/interview/) / 3. [Drawing mode](https://coderpad.io/resources/docs/interview/drawing-mode/) [Documentation menu](#docs-navigation) # Drawing mode Last updated on December 14, 2023 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 [Excalidraw](https://excalidraw.com/)) . You can conduct the interview entirely in Drawing Mode or toggle between the IDE and Drawing Mode as needed. [![The drawing mode screen is open with a mock diagram showing a flow between different shapes.](https://coderpad.io/wp-content/uploads/2025/02/image-1024x486.png)](https://coderpad.io/wp-content/uploads/2025/02/image.png) 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: - Technical diagramming - Database design - UI/UX Mockups 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. > ![✅](https://coderpad.io/assets/emoji/2705.svg) Tired of creating the same diagram over and over again for every interview? You can use the [Include starter drawing toggle in the question creation wizard](https://coderpad.io/resources/docs/interview/question-bank/creating-and-editing-a-question/) to attach a diagram or drawing to your commonly used interview questions. 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. ## Accessing Drawing Mode You can access Drawing Mode inside any [live-interview pad](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/live-interview-pads/). To open, click the Drawing Mode button located in the top left hand corner. [![The draw button is highlighted in the left tab menu and the draw window is open in the center of the screen.](https://coderpad.io/wp-content/uploads/2025/02/image-1-1024x486.png)](https://coderpad.io/wp-content/uploads/2025/02/image-1.png) As soon as you click on the button, Drawing Mode will open and be ready for use. > ☝️ 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’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. ### Using Excalidraw-based Drawing Mode inside a pad Once you open Drawing Mode, you can move the drawing container around. For most interviews, it’s always good to have your code in the left hand side of the screen, and drawing mode sitting just to the right of it. ### Opening Drawing Mode in a new window 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. [![The "open in new window" button is shown at the top right of the drawing mode window.](https://coderpad.io/wp-content/uploads/2025/02/image-2-1024x770.png)](https://coderpad.io/wp-content/uploads/2025/02/image-2.png) ### Interviewer and candidate access 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. In other words, the drawing window contents 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. ## Drawing Mode tools In Drawing Mode, you have access to different tools. You’ll see options to: 1. Clear the canvas and switch between light/dark mode 2. Access diagram shapes, text, and import images 3. Edit selected diagram shapes 4. Zoom in/out and undo/redo changes 5. 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 6. AI-based features, including the ability to convert Mermaid diagrams to the Excalidraw interface. > ![✅](https://coderpad.io/assets/emoji/2705.svg) Interested in keyboard shortcuts? Type`?`in drawing mode and the Excalidraw shortcuts will display for you. [![The drawing mode screen is shown with numbers next to each of the features listed above.](https://coderpad.io/wp-content/uploads/2025/02/image-4-1024x486.png)](https://coderpad.io/wp-content/uploads/2025/02/image-4.png) > ![✅](https://coderpad.io/assets/emoji/2705.svg) Need to delete an object? Simply click on the object and hit the`Delete`button on your keyboard. ## Playback and after the interview 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 – labeled “Drawing”. If Drawing Mode was not enabled during the pad session, the tab will not appear. Close Docs Index - [Screen](https://coderpad.io/resources/docs/screen/) Toggle children pages - [Quick start guides](https://coderpad.io/resources/docs/screen/recruiters-quickstart/) Toggle children pages - [Onboarding Checklist](https://coderpad.io/resources/docs/screen/recruiters-quickstart/screen-onboarding-checklist/) - [The CoderPad Screen Score Guide](https://coderpad.io/resources/docs/the-coderpad-screen-score-guide/) - [Video Guides](https://coderpad.io/resources/docs/screen/recruiters-quickstart/video-guides/) - [Tests](https://coderpad.io/resources/docs/screen/tests/) Toggle children pages - [Creating a test](https://coderpad.io/resources/docs/screen/tests/creating-a-test/) - [Customizing test content](https://coderpad.io/resources/docs/screen/tests/customizing-test-content/) - [Editing test settings](https://coderpad.io/resources/docs/screen/tests/editing-test-settings/) - [AI Tools for Screen](https://coderpad.io/resources/docs/screen/tests/ai-tools-for-screen/) - [Test management](https://coderpad.io/resources/docs/screen/tests/test-management/) - [Test retake requests](https://coderpad.io/resources/docs/screen/tests/test-retake-requests/) - [Cheating prevention and detection in Screen](https://coderpad.io/resources/docs/screen/tests/cheating-prevention-detection/) Toggle children pages - [Webcam proctoring](https://coderpad.io/resources/docs/screen/tests/cheating-prevention-detection/webcam-proctoring/) - [Test Insights](https://coderpad.io/resources/docs/test-insights/) - [Projects NEW](https://coderpad.io/resources/docs/screen/tests/projects/) - [Candidate management](https://coderpad.io/resources/docs/screen/candidate-management/) Toggle children pages - [Anonymizing candidates](https://coderpad.io/resources/docs/screen/candidate-management/anonymizing-candidates/) - [Import candidates from CSV file](https://coderpad.io/resources/docs/screen/candidate-management/import-candidates-from-csv-file/) - [Candidate reports](https://coderpad.io/resources/docs/screen/candidate-reports/) Toggle children pages - [Candidates dashboard](https://coderpad.io/resources/docs/screen/candidate-reports/candidate-dashboard/) - [Code playback](https://coderpad.io/resources/docs/screen/candidate-reports/code-playback/) - [Fixing an incorrectly marked question](https://coderpad.io/resources/docs/screen/candidate-reports/fixing-an-incorrectly-marked-question/) - [Error messages in candidate reports](https://coderpad.io/resources/docs/screen/candidate-reports/error-messages-in-candidate-reports/) - [Customizing questions](https://coderpad.io/resources/docs/screen/customizing-questions/) Toggle children pages - [Creating custom questions](https://coderpad.io/resources/docs/screen/customizing-questions/creating-custom-questions/) Toggle children pages - [Custom Project questions](https://coderpad.io/resources/docs/screen/customizing-questions/creating-custom-questions/custom-project-questions/) - [Importing questions](https://coderpad.io/resources/docs/screen/customizing-questions/importing-questions/) - [Customized domains and skills](https://coderpad.io/resources/docs/screen/customizing-questions/customized-domains-and-skills/) - [Sharing your custom questions](https://coderpad.io/resources/docs/screen/customizing-questions/sharing-your-custom-questions/) - [Integrations](https://coderpad.io/resources/docs/screen/integrations/) Toggle children pages - [Ashby for Screen](https://coderpad.io/resources/docs/screen/integrations/ashby-for-screen/) - [Greenhouse for Screen](https://coderpad.io/resources/docs/screen/integrations/greenhouse/) - [iCIMS](https://coderpad.io/resources/docs/screen/integrations/icims/) - [Jobvite](https://coderpad.io/resources/docs/screen/integrations/jobvite/) - [Lever](https://coderpad.io/resources/docs/screen/integrations/lever/) - [SmartRecruiters](https://coderpad.io/resources/docs/screen/integrations/smartrecruiters/) - [Taleez](https://coderpad.io/resources/docs/screen/integrations/taleez/) - [Taleo](https://coderpad.io/resources/docs/screen/integrations/taleo/) - [Teamtailor](https://coderpad.io/resources/docs/screen/integrations/teamtailor/) - [Workable](https://coderpad.io/resources/docs/screen/integrations/workable/) - [Workday](https://coderpad.io/resources/docs/screen/integrations/workday/) - [Account management](https://coderpad.io/resources/docs/screen/account-management/) Toggle children pages - [Editing your profile](https://coderpad.io/resources/docs/screen/account-management/editing-your-profile/) - [Managing users & teams](https://coderpad.io/resources/docs/screen/account-management/managing-users/) - [Billing](https://coderpad.io/resources/docs/interview/account-mgmt/billing-history/) - [Configure data protection](https://coderpad.io/resources/docs/screen/account-management/configure-data-protection/) - [Insights](https://coderpad.io/resources/docs/interview/account-mgmt/insights/) - [SSO](https://coderpad.io/resources/docs/screen/account-management/sso/) Toggle children pages - [Okta SSO legacy process](https://coderpad.io/resources/docs/screen/account-management/sso/okta-sso-legacy-process/) - [Cancel your subscription](https://coderpad.io/resources/docs/interview/account-mgmt/unsubscribing/) - [More](https://coderpad.io/resources/docs/screen/more-screen-resources/) Toggle children pages - [FAQ](https://coderpad.io/faqs/#screen-faq) - [Supported languages, frameworks, & technologies](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/) Toggle children pages - [Available domains](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/available-domains/) - [What compiler does my Screen project run on?](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/what-compiler-does-my-screen-project-run-on/) - [What compiler does my Screen test run on?](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/what-compiler-does-my-test-run-on/) - [Supported browser versions](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/browser-versions/) - [API key access](https://coderpad.io/resources/docs/screen/more-screen-resources/api-key-access/) - [Accessibility](https://coderpad.io/resources/docs/accessibility/) - [API documentation](https://coderpad.io/resources/docs/screen/more-screen-resources/api-documentation/) - [Troubleshooting Screen](https://coderpad.io/resources/docs/screen/more-screen-resources/troubleshoot/) - [Static code analysis](https://coderpad.io/resources/docs/screen/more-screen-resources/static-code-analysis/) - [Code editor](https://coderpad.io/resources/docs/screen/more-screen-resources/monaco-code-editor/) - [Report a question leak](https://coderpad.io/resources/docs/screen/more-screen-resources/report-a-question-leak/) - [Interview](https://coderpad.io/resources/docs/interview/) Toggle children pages - [Quick start guides](https://coderpad.io/resources/docs/interview/quick-start-guides/) Toggle children pages - [Onboarding Checklist](https://coderpad.io/resources/docs/interview/quick-start-guides/interview-onboarding-checklist/) - [Interviewers](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/) Toggle children pages - [Live Interview quick start](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/live-interview-pads/) - [Take-home project quick start](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/take-home-projects/) - [Interview best practices](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/interview-best-practices/) - [Recruiters](https://coderpad.io/resources/docs/interview/quick-start-guides/recruiters/) - [Account administrators](https://coderpad.io/resources/docs/interview/quick-start-guides/account-admins/) - [Video Guides](https://coderpad.io/resources/docs/interview/quick-start-guides/coderpad-interview-quickstart-video-guides/) - [Engineer’s guide to multi-file frameworks](https://coderpad.io/resources/docs/interview/quick-start-guides/multi-file-frameworks-for-engineers/) - [Talent acquisition’s guide to multi-file frameworks](https://coderpad.io/resources/docs/interview/quick-start-guides/multi-file-frameworks-for-talent-acquisition-teams/) - [Pads](https://coderpad.io/resources/docs/interview/pads/) Toggle children pages - [Creating a pad](https://coderpad.io/resources/docs/interview/pads/creating-a-pad/) - [Using pad features](https://coderpad.io/resources/docs/interview/pads/using-pad-features/) - [Jupyter Notebooks](https://coderpad.io/resources/docs/interview/pads/jupyter-notebooks/) - [API client](https://coderpad.io/resources/docs/interview/pads/api-client/) - [AI Tools for Interview](https://coderpad.io/resources/docs/interview/pads/interview-ai-assist/) - [Code editor](https://coderpad.io/resources/docs/interview/pads/code-editor/) - [Video & audio chat](https://coderpad.io/resources/docs/interview/pads/video-and-audio-call/) Toggle children pages - [AI Notetaker](https://coderpad.io/resources/docs/interview/pads/live-interview-transcription/) - [Interview Highlights NEW](https://coderpad.io/resources/docs/interview-highlights/) - [Interview Outlines NEW](https://coderpad.io/resources/docs/interview/pads/video-and-audio-call/interview-outlines/) - [Private Interviewer Notes](https://coderpad.io/resources/docs/interview/pads/private-interviewer-notes/) - [Settings](https://coderpad.io/resources/docs/interview/pads/settings/) - [Keyboard shortcuts](https://coderpad.io/resources/docs/interview/pads/keyboard-shortcuts/) - [Playback & Pad Summary](https://coderpad.io/resources/docs/interview/pads/playback-mode/) - [Duplicate pads](https://coderpad.io/resources/docs/interview/pads/duplicate-pads/) - [Pad bulk actions](https://coderpad.io/resources/docs/interview/pads/pad-bulk-actions/) - [Drawing mode](https://coderpad.io/resources/docs/interview/drawing-mode/) - [Interview question bank](https://coderpad.io/resources/docs/interview/question-bank/) Toggle children pages - [Creating and editing questions](https://coderpad.io/resources/docs/interview/question-bank/creating-and-editing-a-question/) - [Example questions](https://coderpad.io/resources/docs/interview/question-bank/example-questions/) - [Test cases](https://coderpad.io/resources/docs/interview/question-bank/test-cases/) - [Focus Time](https://coderpad.io/resources/docs/interview/focus-time/) - [Databases](https://coderpad.io/resources/docs/interview/databases/) - [Custom files](https://coderpad.io/resources/docs/interview/custom-files/) - [Integrations](https://coderpad.io/resources/docs/interview/integrations/) Toggle children pages - [Ashby for Interview](https://coderpad.io/resources/docs/interview/integrations/ashby/) - [GoodTime](https://coderpad.io/resources/docs/interview/integrations/goodtime/) - [Google Chrome Calendar extension](https://coderpad.io/resources/docs/interview/integrations/google-chrome-calendar-extension/) - [Greenhouse for Interview](https://coderpad.io/resources/docs/interview/integrations/greenhouse/) Toggle children pages - [Greenhouse live interview integration](https://coderpad.io/resources/docs/interview/integrations/greenhouse/live-interview-integration/) - [Greenhouse take-home projects integration](https://coderpad.io/resources/docs/interview/integrations/greenhouse/take-home-integration/) - [iCIMS](https://coderpad.io/resources/docs/interview/integrations/icims/) - [Lever](https://coderpad.io/resources/docs/interview/integrations/lever/) - [Gem](https://support.gem.com/hc/en-us/articles/26933157317399-How-do-I-connect-my-CoderPad-account) - [SmartRecruiters](https://coderpad.io/resources/docs/interview/integrations/smartrecruiters/) - [ModernLoop](https://modernloop.notion.site/coderpad) - [Workday](https://coderpad.io/resources/docs/screen/integrations/workday/) - [Account management](https://coderpad.io/resources/docs/interview/account-mgmt/) Toggle children pages - [Team management](https://coderpad.io/resources/docs/interview/account-mgmt/team-management/) - [Managing users](https://coderpad.io/resources/docs/interview/account-mgmt/managing-users/) - [SSO](https://coderpad.io/resources/docs/screen/account-management/sso/) - [Insights](https://coderpad.io/resources/docs/interview/account-mgmt/insights/) - [Billing](https://coderpad.io/resources/docs/interview/account-mgmt/billing-history/) - [Canceling your subscription](https://coderpad.io/resources/docs/interview/account-mgmt/unsubscribing/) - [More](https://coderpad.io/resources/docs/interview/more-interview-resources/) Toggle children pages - [Cheating prevention and detection in Interview](https://coderpad.io/resources/docs/cheating-prevention-in-interview/) - [FAQ](https://coderpad.io/faqs/#live-faq) - [Accessibility](https://coderpad.io/resources/docs/accessibility/) - [Supported technologies & languages](https://coderpad.io/resources/docs/interview/more-interview-resources/supported-technologies-languages/) Toggle children pages - [Languages & frameworks](https://coderpad.io/languages/) - [Unit testing](https://coderpad.io/resources/docs/unit-testing/) Toggle children pages - [Using Jest with React](https://coderpad.io/resources/docs/unit-testing/using-jest-with-react/) - [Supported browser versions](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/browser-versions/) - [API key access](https://coderpad.io/resources/docs/interview/more-interview-resources/api-key/) - [API documentation](https://coderpad.io/resources/docs/interview/more-interview-resources/api-documentation/) - [Troubleshooting](https://coderpad.io/resources/docs/interview/more-interview-resources/troubleshooting/) - [Server statuses](https://status.coderpad.io/?_gl=1*ta4d92*_ga*MTkzMTE2ODYyMC4xNjU4MjQ5Mzcw*_ga_XBQ5N5CE2N*MTY2NzQxOTY5OS4yNjIuMS4xNjY3NDIxNDQ0LjAuMC4w&_ga=2.62808234.704669655.1667307151-1931168620.1658249370) - [Data management and privacy policy](https://coderpad.io/privacy/) - [AI Fluency](https://coderpad.io/resources/docs/ai-fluency/) - [For candidates](https://coderpad.io/resources/docs/for-candidates/) Toggle children pages - [Screen preparation guide](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/) Toggle children pages - [Webcam and microphone access](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/webcam-access/) - [Projects exercises](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/projects-exercises/) - [Interview preparation guide](https://coderpad.io/resources/docs/for-candidates/interview-preparation-guide/) Toggle children pages - [Try the sandbox](https://coderpad.io/resources/docs/for-candidates/interview-preparation-guide/sandbox/) - [FAQ](https://coderpad.io/faqs/#faq-do-candidates-have-to-register-an-account-or-pay-to-use-interview) - [What’s new?](https://coderpad.io/resources/docs/changelog/)