Visualizing Quantum Circuits: State Vector Difference Highlighting and the Half-Matrix

TL;DR

This paper introduces two novel visualizations for small quantum circuits—state vector difference highlighting and a triangular half-matrix—implemented in MuqcsCraft, an open-source web tool for interactive circuit design and visualization. By displaying the full state vector layer-by-layer and providing pairwise qubit information, the approach addresses the limitations of traditional per-qubit reduced-state displays and clarifies gate-induced dynamics and entanglement structure. The visual primitives enable a visually universal representation for single-qubit gates (with controls) via core gate sequences, while the half-matrix exposes correlations and concurrences that are not evident from reduced states alone. The work offers practical tools for designing and understanding quantum circuits, with potential extensions to subsets, higher-level blocks, and reconfigurable qubit clustering to scale to larger systems.

Abstract

Existing graphical user interfaces for circuit simulators often show small visual summaries of the reduced state of each qubit, showing the probability, phase, purity, and/or Bloch sphere coordinates associated with each qubit. These necessarily provide an incomplete picture of the quantum state of the qubits, and can sometimes be confusing for students or newcomers to quantum computing. We contribute two novel visual approaches to provide more complete information about small circuits. First, to complement information about each qubit, we show the complete state vector, and illustrate the way that amplitudes change from layer-to-layer under the effect of different gates, by using a small set of colors, arrows, and symbols. We call this ``state vector difference highlighting'', and show how it elucidates the effect of Hadamard, X, Y, Z, S, T, Phase, and SWAP gates, where each gate may have an arbitrary combination of control and anticontrol qubits. Second, we display pairwise information about qubits (such as concurrence and correlation) in a triangular ``half-matrix'' visualization. Our open source software implementation, called MuqcsCraft, is available as a live online demonstration that runs in a web browser without installing any additional software, allowing a user to define a circuit through drag-and-drop actions, and then simulate and visualize it.

Figures (19)

• Figure 1: IBM Quantum Composer (top) ibm2023composer and Quirk (bottom) gidney2020quirk showing the same circuit. In both, the reduced state of the qubits is shown to the right of the circuit diagram, in the area enclosed by the orange rectangle. Inside this orange rectangle, IBM's "phase disks" show the phase (white tick mark), probability (blue area), and purity (the diameter of the white circle is half of the disk, indicating a purity of 0.5), whereas Quirk's widgets show the probability (green area) and Bloch sphere coordinates (a yellow dot in the center of each sphere, because the reduced states are maximally mixed, meaning a purity of 0.5).
• Figure 2: MuqcsCraft's visual interface. A: The circuit diagram. Black and white dots correspond to control and anticontrol qubits. B: A toolbar from which gates can be dragged onto the circuit diagram. C: The reduced state of each qubit at the output of the circuit: linear entropy and von Neumann entropy (shown with grey bars), probability of measuring 1 (blue bar), phase (blue disc). D: The state vector, layer-by-layer, shown below the circuit diagram. For each layer of the circuit, the 16 amplitudes of the state vector are wrapped into 8$\times$2 cells. Difference highlighting indicates how the state vector changes under the effect of each gate, using the purple and green colors, arrows, and symbols. E: A key to the bitstrings for the base states. For example, the lower left cell in each 8$\times$2 state vector is 1110, where the left-most bit corresponds to the bottom wire in the circuit. F: The triangular half-matrix shows one cell for each pair of qubits. For example, the mouse cursor is over the right-most cell, corresponding to the top and bottom wires which are highlighted in orange. G: A tooltip with curved callout arrows gives details about the contents of the cell under the cursor.
• Figure 3: Visual feedback in IBM Quantum Composer (left) and Quirk (right), when gates have an easy-to-understand effect on the phase, rotating the phase by $\pi/4$, $\pi/2$, and $\pi$ radians.
• Figure 4: Examples where gates have a complicated effect on qubit phase, showing the visual feedback of IBM (left) and Quirk (right). A: the RZ gate has an angle of $\pi/2$, but the phase changes by $\pi/4$, because of the control qubit. B: a $\sqrt{X}$ gate normally rotates by $\pi/2$ around the $x$ axis, and in the circuit, we do see a change of $\pi/2$ in q[0]'s phase, but in the negative direction. q[1]'s phase also changes, because of phase kickback. C: a $T$ gate normally rotates the phase by $\pi/4$, but in this case, we see no change in the phase. Each of A, B, and C could be a source of confusion for a student or beginner. D: the Bloch sphere, where $\phi$ is the phase, and axes are oriented the same way as in Quirk's visual feedback. E: enlarged view of Quirk's visual feedback in B.
• Figure 5: The same circuit on 4 qubits is shown with different display options. The state vector for each layer has 16 amplitudes. A: each layer's state vector is shown as a 16$\times$1 column vector. B: each state vector is wrapped into an 8$\times$2 arrangement. C: the single-qubit reduced states are also show for each layer. D: the amplitudes of the state vector are shown as squares, with blue bars behind each disc instead of to the left of each disc. E: enlarged view showing bits highlighted in orange corresponding to the top wire under the mouse cursor in D.