Research2018SciVis

QuFlow

Links a circuit editor to amplitude-flow diagrams, tracing how each gate combines, exchanges, or changes the phases of basis-state amplitudes.

1 publication

Visualization labels

03 / Visualization
01Publication · 2018

QuFlow: Visualizing Parameter Flow in Quantum Circuits for Understanding Quantum Computation

Siyuan Lin, Jiang Hao, Lingyun Sun

With the rapid progress of quantum computation recently, it attracts a substantial amount of people to learn quantum computation. Quantum computation differs a lot from classical computation. To help novices learn quantum computation, we conducted a interview with people who are learning quantum computation and found that novices feel confused about 1) how quantum gates contribute to the final results in a complicated quantum circuit and 2) how the final results generate steps along the quantum circuits. Thus, we present QuFlow, an interactive visualization tool for teaching the fundamentals of quantum computation. Users can use it to build a quantum circuit, then QuFlow will simulate the quantum circuit in a classical computer. After simulation, QuFlow will not only present the final output results of quantum circuits but also shows how the parameters change along the quantum circuits. A qualitative user study was carried out among target users, and the results suggested that QuFlow could be effective for learning quantum computation.

From the survey collection

QuFlow: Visualizing Parameter Flow in Quantum Circuits for Understanding Quantum Computation

Background and motivation

QuFlow is an educational visualization system that connects a quantum circuit to the evolution of its computational-basis amplitudes after individual gates. The paper addresses an existing learning problem: novices may recognize individual gates yet struggle to explain how a sequence or combination of gates produces its final result. Manual matrix multiplication becomes cumbersome as circuits contain more qubits and operations, while a final output distribution does not explain the intervening computation. The contribution is a visual explanation of this process, rather than a new quantum algorithm or quantum simulation method.

The authors situate their work among quantum-computing textbooks, the Bloch sphere, interactive circuit simulators, matrix visualization, and dataflow visualization such as VisTrails. They argue that static instructional material lacks interaction and that a Bloch sphere is useful for individual-qubit transformations but insufficient for understanding combinations of gates in multi-qubit circuits. Their comparison with IBM Q Experience Composer and Origin Q concerns the tools available in 2018: the paper characterizes them as emphasizing final simulation outputs rather than explaining intermediate parameter changes. This is the historical motivation for QuFlow, not a claim about the current capabilities of those platforms.

Requirements derived from novice learning

The design began with six undergraduates aged 18–21 who had not previously studied quantum computation. Over two weeks, participants read the IBM Q Experience Full User Guide and used its Composer, with access to an online tutor and progress checks every two days. The authors then interviewed them about difficult concepts, confusing parts of the guide, and possible improvements to learning support. A grounded-theory analysis of the interviews and tutor feedback produced two requirements: make the results of every circuit step clear, and expose both the combined effects of gates and the contribution of an individual gate within a combination.

These requirements distinguish the intended teaching task from simply predicting a circuit's final measurements. Learners wanted to understand why amplitudes change and which gates they might alter to obtain a different result. QuFlow therefore records intermediate simulator states and displays how earlier amplitudes contribute to later ones. The displayed values are available from classical simulation; they should not be interpreted as nondestructive measurements of a running physical quantum computer.

Circuit construction and simulation

Figure 2 presents an architecture with a circuit-building interface, a simulator, and a result visualization. The circuit is passed to the simulator as a gate array, while parameter and cache arrays retain the values used to construct the display. Users select the number of qubits with plus and minus controls; three is the default, not a stated upper limit. Each qubit has a horizontal wire with ten available gate positions. Clicking a position or an existing gate opens the menu shown in Figure 3, allowing the user to insert or replace a gate, or remove it with CLEAR. The nine supported gates are XX, YY, ZZ, HH, SS, S†S^{\dagger}, TT, T†T^{\dagger}, and CNOT. A second menu selects the other qubit for a CNOT in the same circuit column.

Clicking RUN simulates the circuit and records amplitudes after every gate. The simulator processes columns from left to right and serializes gates in the same column from top to bottom for the explanation, even though separate operations in a column represent concurrent circuit operations. For a single-qubit gate, it groups computational-basis states into 2n−12^{n-1} pairs that differ only in the acted-on qubit, then updates each pair's amplitudes. For example, an XX gate exchanges the two amplitudes, while a Hadamard transforms a pair (a,b)(a,b) into

(a′,b′)=(a+b2,a−b2).(a',b')=\left(\frac{a+b}{\sqrt{2}},\frac{a-b}{\sqrt{2}}\right).

Phase gates multiply one member of each pair by the corresponding complex factor. The system's pedagogical purpose is to make these exchanges, sums, differences, and phase changes visible within the complete sequence.

Visual encoding and explanation

Figure 1 shows an example interface output: a three-qubit circuit above and its parameter-flow visualization below. The lower view has eight rows for the basis states ∣000⟩|000\rangle through ∣111⟩|111\rangle, with gate operations arranged in left-to-right order. More generally, an nn-qubit circuit has 2n2^n rows, and a circuit containing mm gates has mm transition columns. Rounded rectangles at the boundaries between columns contain the complex amplitudes before and after each operation. The initial column is the state with amplitude one for the all-zero basis state and zero elsewhere. Thus, the rows represent joint basis states, not individual qubits.

Darkness is intended to indicate the likelihood of observing a basis state, while the numerical labels preserve its complex amplitude. The paper describes this likelihood as the amplitude's modulus, but the measurement probability for amplitude αx\alpha_x is ∣αx∣2|\alpha_x|^2. Consequently, its verbal account does not unambiguously specify whether the implemented shading uses magnitude or squared magnitude. The labels and multiplication factors are essential for seeing phase changes, which cannot be conveyed by a probability shade alone.

Connecting lines expose the dependencies between old and new amplitudes. Figure 4 provides local examples of the encoding: crossed connections show the exchange caused by XX; YY adds factors of −i-i and ii to such exchanges; four connections for a Hadamard show how both input amplitudes contribute to both outputs, with factors of 1/21/\sqrt{2} or −1/2-1/\sqrt{2}; and straight connections for SS retain the basis-state row while annotating multiplication by ii where needed. CNOT is represented through conditional exchanges between paired basis states. The colored connections in Figure 1 allow a reader to trace contributions through the example circuit, including redistribution, cancellation, and the final phase transformation. Figure 4 illustrates the visual grammar of individual gate operations, whereas Figure 1 demonstrates their composition in a complete circuit.

The authors reduce unnecessary connections using the current amplitude values. For exchange gates, connections can be omitted when both amplitudes in a pair are zero; phase-gate connections can be omitted for zero amplitudes; and Hadamard connections from a zero input can be removed because that input contributes nothing to either output. This is a data-dependent simplification of the flow display. The described interaction consists of editing circuits and running the simulation to inspect the resulting history; the paper does not establish an animated playback or step-control interface.

Evaluation and findings

The evaluation comprises two qualitative studies with a total of fourteen participants. The first group contained the same six novices who informed the design. After a ten-minute QuFlow tutorial, they built circuits in both QuFlow and IBM Q Experience Composer and discussed their experiences and suggestions. The second group contained eight students aged 20–25 who had taken a university quantum-computing course but had not used quantum simulation or visualization tools. They received a ten-minute tutorial and two visualization examples, then freely built and visualized circuits before being interviewed.

The authors report that participants regarded QuFlow as useful for education and generally found its interface easy to learn and its output readable. The reported comments specifically value avoiding cumbersome manual matrix calculations, seeing the functions of gates, and using the connecting lines to understand relationships that a display of intermediate numbers alone would omit. These results support perceived usefulness and initial usability within the study setting. They do not establish measured learning gains, superiority on a controlled learning task, retention over time, or performance on larger circuits. The paper reports interview feedback rather than test scores, task-time comparisons, or a quantitative usability instrument.

Contributions and limitations

The paper contributes novice-derived requirements and an implemented circuit editor coupled to a gate-by-gate amplitude-flow display. Its distinctive idea is to connect explicit numerical intermediate states with graphical representations of the arithmetic performed by gates, allowing learners to follow how a result is constructed. This extends an output-only view by exposing dependencies and interference within the circuit.

The paper does not provide a dedicated limitations discussion or a concrete future-work program. The representation itself grows exponentially in rows with qubit count and horizontally with the number of gates, so its ability to remain readable for large circuits is an unresolved scalability question rather than an evaluated result. The supported gate set is limited to the nine described operations, and the evaluation does not test a broader algorithm curriculum or long-term learning. Reusing the formative-study participants in the first evaluation group also limits the independence of that feedback.

There are reporting ambiguities in the source beyond the magnitude-versus-probability wording: Sections 2.3 and 2.4.2 describe CNOT using inconsistent control/target terminology and control conditions. The architectural and visual explanation is clear enough to summarize the intended conditional amplitude exchange, but the text alone cannot verify the correctness of its implementation. The three-qubit examples should likewise not be turned into a claimed three-qubit software limit, since the interface explicitly permits changing the qubit count.

Download .bib
@inproceedings{lin_quflow_2018,
  author = {Lin, Siyuan and Hao, Jiang and Sun, Lingyun},
  language = {en},
  publisher = {IEEE},
  booktitle = {2018 {IEEE} {Scientific} {Visualization} {Conference} ({SciVis})},
  doi = {10.1109/SciVis.2018.8823602},
  isbn = {978-1-5386-6882-5},
  month = oct,
  pages = {37--41},
  shorttitle = {{QuFlow}},
  title = {{QuFlow}: {Visualizing} {Parameter} {Flow} in {Quantum} {Circuits} for {Understanding} {Quantum} {Computation}},
  urldate = {2025-10-17},
  year = {2018},
}