QNotation

QNotation: A Visual Browser-Based Notation Translator for Learning Quantum Computing

Background and Motivation

QNotation addresses the difficulty of connecting circuit diagrams, Dirac notation, and matrix notation when learning quantum computing. Circuit diagrams emphasize gates and their placement on qubit wires, Dirac expressions describe states through kets and linear combinations, and matrix notation exposes operations and states as matrices and vectors. These representations emphasize different aspects of the same computation, so familiarity with one does not automatically provide fluency in the others. The paper draws on earlier research about introductory course content and students switching between representations to motivate teaching their relationships explicitly. It also argues that assumptions about prior linear algebra, quantum mechanics, or classical circuits can exclude learners whose educational backgrounds did not cover those subjects.

This is an existing educational problem, and the paper situates QNotation among several existing approaches. IBM Circuit Composer provides an interactive circuit-building workflow and state visualizations, while IBM Quantum Learning, Quantum Enigmas, and the Xanadu Quantum Codebook present introductory material involving quantum notation. Quantum Quest and ZX-calculus teaching materials connect selected mathematical and graphical representations, and tools such as Misty States, QWalkVis, and Quantum Moves use other visual or interactive approaches to quantum concepts. QNotation's specific emphasis is an exploratory workspace in which one user-defined circuit produces all three notation views together. Its contribution is this coordinated teaching interface, rather than the invention of the underlying notations or a claim that earlier educational resources never displayed them.

The paper also extends the authors' earlier QNotation Jupyter Notebook prototype. That version was limited to circuits of at most three qubits because the notebook output area made larger displays difficult to read. The browser-based redesign seeks to reduce installation barriers and provide a more flexible workspace for comparing mathematical expressions with circuit structure. The authors deliberately focus on circuit, Dirac, and matrix notation; they do not add a Bloch-sphere view, explaining that its usual single-qubit presentation does not match this emphasis on multi-qubit notation.

Circuit Input and Translation Workflow

The reported implementation accepts a Qiskit QuantumCircuit object entered in a code editor on the right side of the interface. Users assign the object to the variable circuit and press Submit Circuit to populate the notation panels. The initial editor contains a modifiable code stub, and a plus control loads prepared examples that learners can inspect and change. These examples are a Quantum Fourier Transform applied to $|101\rangle$, a three-qubit teleportation example for $|0\rangle$, and Grover's search over 16 possible values with target $3$, represented as $|0011\rangle$. The implementation described in the paper supports Qiskit's standard gates, circuits with at most six qubits, and at most 20 quantum gates.

Before submission, users can choose whether the matrix display retains separate tensor-product factors or shows their combined matrices. This choice makes the relationship between operations on individual qubits and operations on the full register visible. For example, Figure 3 compares $X\otimes H$ and $X\otimes X\otimes H$ with their expanded matrices, while Figure 7 shows the corresponding circuit diagrams. The separate-factor matrix display is restricted to at most three qubits because the representation grows rapidly with register size. This restriction is distinct from the six-qubit limit on submitted circuits.

The frontend uses React, Node.js, and Material UI components, while Python and Qiskit process the circuits and Flask handles communication between frontend and backend. The authors describe the implementation as open source. The paper presents the system's architecture and user workflow, but does not introduce a new quantum simulation algorithm or prove a new mathematical translation method. The computational and representational machinery is organized into an interface intended for educational exploration.

Visual Encodings and Interaction

Figure 2 shows the main coordination mechanism. The circuit panel contains horizontal qubit wires, labeled gate blocks, and vertical connections for operations involving multiple qubits. The Dirac panel displays a symbolic composition of operations applied to an initial ket, while the matrix panel displays the corresponding matrix expression and state vector. A state expression occupies the right-hand side of each mathematical panel, separated from the operation expression. Selecting a gate in the circuit panel reveals the quantum state at that point in both mathematical notations. In the screenshot, an orange controlled-phase gate is linked by orange highlighting to its Dirac expression, matrix, and displayed state. The image is an implemented interface example, not a result from a usability or learning experiment.

QNotation uses a big-endian convention to match the educational resources targeted by the authors. Circuit operations are arranged from left to right, while the Dirac and matrix equations are read from right to left; wrapped equations continue from the lower right toward the upper left. The treatment of nonadjacent qubits also matters when interpreting the symbolic display. An operation such as the swap between qubits 0 and 2 is represented in the Dirac panel as a three-qubit operator spanning qubits 0, 1, and 2, even though the swap exchanges only the outer qubits. This convention keeps the operator consistent with the register space it acts on.

Each notation panel has an information control that opens an explanatory dialog. Figure 4 shows the matrix-notation dialog using a tensor product, an initial state vector, the expanded operation, and the resulting vector to explain the parts of a calculation. The panels can be reordered by dragging, and users can drag a panel into a storage bar to minimize it. Figure 5 demonstrates the matrix panel minimized so that the circuit and Dirac panels occupy the available area. Together, these controls let learners adjust how much attention and screen space each representation receives. Figure 1 documents the empty starting interface, before a circuit has been submitted.

Proposed Classroom Activities

The first group of classroom questions uses translation to explain notation and register dimensions. Learners compare small circuits, infer the size of the matrix representing an $n$-qubit operation, and use the tool to check the relationship $2^n\times 2^n$. Figure 6 contrasts a CNOT on a two-qubit register with a CNOT acting on two wires of a three-qubit register. The extra wire motivates including an identity factor, so that the full-register operation can be written as $\mathrm{CNOT}\otimes I$ in the illustrated ordering. The intended lesson is that an apparently untouched qubit still belongs to the state space on which the operation must be defined.

The exercises also ask learners to compare the strengths and weaknesses of the notations. The paper characterizes circuit diagrams as a familiar way to expose the placement of operations, while noting that gate parameters can be difficult to display clearly. Dirac notation offers a compact symbolic form but presupposes familiarity with its gate and state symbols. Matrix notation exposes numerical details and permits operations to be combined, but it consumes space and can make a combined operator's purpose less apparent. These tradeoffs explain why showing several representations together may be useful, rather than assuming that one representation should replace all the others.

A second group of questions addresses equal superposition, entanglement, teleportation, and Grover's algorithm. Figures 8 and 9 show one-qubit and four-qubit equal-superposition examples produced by applying a Hadamard gate to each initially zero qubit. For the four-qubit case, the displayed amplitudes are $1/4$, giving probability $1/16$ for each basis outcome; amplitudes and probabilities should be kept distinct when interpreting these displays. The entanglement exercise concerns whether a pure-state vector can be factored into subsystem states, while the teleportation question asks learners to relate what happens to the original qubit to the no-cloning principle. The Grover questions ask learners to identify initialization, the phase oracle, and the diffuser, inspect the sign and amplitude changes, and determine which part must change to select a different target value. These are proposed questions with suggested answers, rather than observations of students completing a lesson.

Contributions and Evaluation Evidence

The main contribution is a browser-based development of QNotation that combines executable circuit input, three linked notation panels, intermediate-state inspection through gate selection, and a rearrangeable workspace. The supplied algorithm examples and classroom questions extend the intended use beyond recognizing notation to exploring introductory quantum-computing concepts. The paper demonstrates these features through interface screenshots and worked teaching scenarios.

It reports no user study, classroom deployment, controlled comparison, learning assessment, or quantitative usability results. Consequently, the screenshots establish what the interface presents and the exercises establish possible uses, but neither shows that learners become more fluent in notation or understand quantum concepts better. The educational benefits are the authors' rationale and intended outcomes, with effectiveness still requiring empirical evaluation.

Limitations and Future Work

The supported circuit size and matrix-display modes limit the examples that can be explored in the reported version. A larger browser workspace does not remove the exponential growth of full state vectors and gate matrices. The implementation accepts Qiskit QuantumCircuit input and standard Qiskit gates, while custom gates and support for classical bits are described as unavailable. These are the capabilities reported in the 2024 paper, rather than claims about a currently deployed version.

The authors propose accepting additional inputs, including lists of Qiskit state vectors, OpenQASM circuits, Cirq circuits, and PennyLane circuit functions. They also plan custom-gate and classical-bit support, circuit-file uploads, and additional functionality in the storage bar. A proposed transpilation selector would let users choose whether to adapt a circuit for a particular quantum computer, inspired by Qiskit Trebugger's presentation of circuit changes during transpilation. Finally, the authors intend to develop more classroom questions, especially activities combining QNotation with other educational tools. These extensions are future work and are not demonstrated capabilities of the version presented in the paper.