Add an example drawing area to coding interviews

Start by locating the Whiteboard Interview Mode implementation and the interview page layout it diverges from — the proposal explicitly says to reuse the whiteboard's image-export/delivery mechanism for the interviewer view. Map where the editor, test runner and tabs/panels are composed in the interview workspace to decide where the Code | Example tab or expandable panel attaches. Done looks like: a canvas with pen, eraser, rectangle, circle, line, arrow, undo/redo and clear, living alongside the existing editor and test flow, with the current drawing delivered to the interviewer on content change. No file, test or entry point is named in the issue, so scope and layout decisions remain with the maintainer.

Motivation

During a normal coding interview, candidates often need to explain an example input, output, or data structure before or while writing code.

For problems involving trees, linked lists, graphs, arrays, pointer movement, or intermediate algorithm states, a visual explanation can be clearer than describing everything verbally or drawing ASCII diagrams inside code comments.

CodeTrial already provides a separate Whiteboard Interview Mode, but that mode replaces the editor and test workflow. This proposal is different: it keeps the existing coding interview experience and adds a drawing area that can be used together with the editor and test runner.

The goal is to provide a dedicated space for visually explaining examples and data structures without interrupting the normal coding workflow.

Proposal

Add an example drawing area to the existing coding interview workspace.

The drawing area would be available during a normal coding interview and would not replace the editor, test results, or current interview flow.

Candidates could use it to illustrate:

• Example inputs and outputs
• Binary trees and other tree structures
• Linked lists
• Graphs
• Arrays
• Pointer movement
• Intermediate states while explaining an algorithm

Drawing tools

The first version could provide the following tools:

• Pen
• Eraser
• Rectangle
• Circle / ellipse
• Line
• Arrow
• Undo / redo
• Clear

The pen would still be useful for handwritten values or short labels. For example, a candidate could draw circles for tree nodes, connect them with lines or arrows, and write node values inside the circles.

Interaction with the existing interview

The drawing area should work as an additional part of the normal coding interview rather than as a separate interview mode.

A candidate could, for example:

1. Read and repeat the problem.
2. Draw a sample input or data structure in the example area.
3. Explain the approach while referring to the drawing.
4. Write the implementation in the existing editor.
5. Run tests as usual.
6. Update the drawing when explaining edge cases, pointer movement, or optimization.

How the interviewer sees the drawing

The drawing should also be visible to the interviewer so that it can become part of the interview conversation.

When a candidate refers to a tree node, graph edge, pointer, array position, or intermediate state, the interviewer should be able to inspect the current drawing and understand what the candidate is referring to.

This could potentially reuse the existing image-delivery mechanism from Whiteboard Interview Mode by exporting the current drawing and sending it to the interviewer when the content changes.

The goal is not only to give the candidate a place to sketch, but also to let the interviewer use the drawing as part of the interview context.

Possible layout

The drawing area could be presented as a tab or an expandable panel in the existing interview page so that it does not permanently reduce the space available to the editor.

For example:

• Code | Example
• or an expandable Example panel below the page

The exact layout can follow the current interview page design.

Scope

The initial version is intended to support visual explanation during coding interviews rather than provide a full diagram editor.

It does not need to support:

• Selecting existing objects
• Moving shapes
• Resizing shapes
• Editing text objects
• Grouping objects
• Layers
• Advanced diagram editing features

The main goal is to make common coding interview examples easier to draw, explain, and discuss with the interviewer.