{"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":"mode-dessin","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/fr\/resources\/docs\/interview\/drawing-mode\/","title":{"rendered":"Mode dessin"},"content":{"rendered":"<p>Lors d'entretiens techniques, vous devrez peut-\u00eatre esquisser un syst\u00e8me ou d\u00e9crire une architecture technique, ce que vous pouvez faire dans pad avec le mode dessin (aliment\u00e9 par <a href=\"https:\/\/excalidraw.com\/\" target=\"_blank\" rel=\"noopener\">Excalidraw<\/a>) . Vous pouvez mener l'entretien enti\u00e8rement en mode dessin ou alterner entre l'IDE et le mode dessin selon vos besoins.<\/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=\"L&#039;\u00e9cran du mode dessin est ouvert avec un diagramme fictif montrant un flux entre diff\u00e9rentes formes.\" 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>Notre mode dessin bas\u00e9 sur Excalidraw vous permet de rejoindre un tableau blanc virtuel aux c\u00f4t\u00e9s d'un candidat. Le mode dessin peut \u00eatre utilis\u00e9 pour une vari\u00e9t\u00e9 de cas d'utilisation, mais il sera surtout utilis\u00e9 pour poser des questions bas\u00e9es sur :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Les diagramme techniques<\/li>\n\n\n\n<li>La conception de base de donn\u00e9es<\/li>\n\n\n\n<li>Les maquettes UI\/UX<\/li>\n<\/ul>\n\n\n\n<p>Le but du mode dessin est de vous permettre de collaborer avec le candidat pour voir comment il raisonne sur certaines questions que vous lui posez pendant un entretien.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705Fatigu\u00e9 de cr\u00e9er le m\u00eame diagramme encore et encore pour chaque entretien ? Vous pouvez utiliser le <a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/banque-de-questions\/creer-une-question\/\"><strong><strong>Inclure un dessin de d\u00e9part<\/strong><\/strong> dans l'assistant de cr\u00e9ation de questions<\/a> de joindre un diagramme ou un dessin \u00e0 vos questions d'entretien les plus courantes.<\/p>\n<\/blockquote>\n\n\n\n<p>Nous conseillons de pr\u00e9venir le candidat s'il y a une session en mode dessin pendant l'entretien. Ainsi, le candidat aura la possibilit\u00e9 de se connecter \u00e0 l'avance au pad, d'exp\u00e9rimenter le mode dessin et de se familiariser avec cet outil afin de se sentir plus \u00e0 l'aise.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Acc\u00e8s au mode dessin<\/h2>\n\n\n\n<p>Vous pouvez acc\u00e9der au mode dessin \u00e0 partir de n'importe quel <a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/coderpad-guides-de-demarrage-rapide\/enqueteurs\/tapis-dentretien-en-direct\/\">bloc d'entretien en direct<\/a>. Pour ouvrir, cliquez sur le <strong>Mode dessin<\/strong> situ\u00e9 dans le coin sup\u00e9rieur gauche. <\/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=\"Le bouton de dessin est en surbrillance dans le menu de l&#039;onglet de gauche et la fen\u00eatre de dessin est ouverte au centre de l&#039;\u00e9cran.\" 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>D\u00e8s que vous cliquez sur le bouton, le mode dessin s'ouvre et est pr\u00eat \u00e0 \u00eatre utilis\u00e9.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u261d\ufe0f Vous voulez utiliser une tablette ou un t\u00e9l\u00e9phone pour dessiner des diagrammes ? Il vous suffit de vous envoyer un lien vers le pad, de l'ouvrir sur votre appareil et de dessiner. Vous voudrez probablement ouvrir le pad sur votre ordinateur fixe ou portable afin de pouvoir acc\u00e9der facilement aux autres fonctionnalit\u00e9s de l'interface pendant que vous dessinez.<\/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\">Utilisation du mode de dessin bas\u00e9 sur Excalidraw \u00e0 l'int\u00e9rieur d'un pad<\/h3>\n\n\n\n<p>Une fois que vous avez ouvert le mode dessin, vous pouvez d\u00e9placer la fen\u00eatre correspondante sur votre \u00e9cran. Pour la plupart des entretiens, il est toujours utile d'avoir votre code dans la partie gauche de l'\u00e9cran, et le mode dessin juste \u00e0 droite de celui-ci.<\/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\">Ouvrir le mode dessin dans une nouvelle fen\u00eatre<\/h3>\n\n\n\n<p>Vous avez \u00e9galement la possibilit\u00e9 d'ouvrir le Mode Dessin dans une toute nouvelle fen\u00eatre. Pour ce faire, cliquez sur l'ic\u00f4ne situ\u00e9e dans le coin sup\u00e9rieur droit du mode dessin. Cette option est utile si vous disposez d'un \u00e9cran plus grand.<\/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=\"Le bouton &quot;ouvrir dans une nouvelle fen\u00eatre&quot; se trouve en haut \u00e0 droite de la fen\u00eatre du mode dessin.\" 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\">Acc\u00e8s au mode dessin pour les recruteurs et les candidats<\/h3>\n\n\n\n<p>L'intervieweur et le candidat peuvent ouvrir\/fermer le mode dessin bas\u00e9 sur Excalidraw \u00e0 tout moment de l'entretien. Chaque participant contr\u00f4le son propre environnement, ce qui signifie que lorsqu'un intervieweur ouvre le mode dessin, celui-ci ne s'ouvrira pas pour le candidat. Si vous d\u00e9cidez de fermer le mode dessin, le contenu de tous les participants sera toujours accessible \u00e0 la r\u00e9ouverture.<\/p>\n\n\n\n<p>En d'autres termes, la fen\u00eatre de dessin <em>contenu <\/em>sont toujours synchronis\u00e9es entre TOUS les utilisateurs de pad, mais chaque utilisateur de pad contr\u00f4le si sa fen\u00eatre de dessin est ouverte ou ferm\u00e9e \u00e0 tout moment.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"drawing-mode-tools\">Outils du mode dessin<\/h2>\n\n\n\n<p>En mode dessin, vous avez acc\u00e8s \u00e0 diff\u00e9rents outils. Vous avez la possibilit\u00e9 de :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Effacer la toile et passer du mode clair au mode sombre<\/li>\n\n\n\n<li>Acc\u00e8s aux formes des diagrammes, au texte et \u00e0 l'importation d'images<\/li>\n\n\n\n<li>Modifier les formes de diagramme s\u00e9lectionn\u00e9es<\/li>\n\n\n\n<li>Zoom avant\/arri\u00e8re et annulation\/r\u00e9tablissement des modifications<\/li>\n\n\n\n<li>Biblioth\u00e8que de formes \u00e9tendue. Nous fournissons quelques formes par d\u00e9faut, mais vous pouvez cliquer sur les biblioth\u00e8ques h\u00e9berg\u00e9es par Excalidraw et obtenir ainsi un large assortiment de formes.<\/li>\n\n\n\n<li>Fonctionnalit\u00e9s bas\u00e9es sur l'IA, y compris la possibilit\u00e9 de convertir les diagrammes Mermaid en interface Excalidraw.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Les raccourcis clavier vous int\u00e9ressent ? Tapez <code>?<\/code> en mode dessin et les raccourcis Excalidraw s'afficheront pour vous.<\/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=\"L&#039;\u00e9cran du mode dessin est illustr\u00e9 par des num\u00e9ros \u00e0 c\u00f4t\u00e9 de chacune des fonctions \u00e9num\u00e9r\u00e9es ci-dessus.\" 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>\u2705Vous souhaitez supprimer un objet ? Cliquez simplement sur l'objet et appuyez sur la touche <code>Supprimer<\/code> de votre clavier.<\/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\">Code Playback et post-entretien<\/h2>\n\n\n\n<p>Vous pouvez visionner l'\u00e9tat final du dessin dans le Code Playback du pad pour le revoir. Si le mode dessin a \u00e9t\u00e9 activ\u00e9 pendant la session, il y aura un onglet sur le c\u00f4t\u00e9 droit de l'\u00e9diteur pour revoir le dessin - \u00e9tiquet\u00e9 \"Dessin\". Si le mode dessin n'a pas \u00e9t\u00e9 activ\u00e9 pendant la session, l'onglet n'appara\u00eetra pas.<\/p>","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\/fr\/wp-json\/wp\/v2\/doc\/871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":28,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/871\/revisions"}],"predecessor-version":[{"id":42100,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/871\/revisions\/42100"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/16734"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/media?parent=871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}