Quantivine: A Visualization Approach for Large-scale
Quantum Circuit Representation and Analysis

The quantum circuit is an important computation model of current quantum computers. The increasing interest in quantum computing [56], coupled with advancements in actual quantum devices[60], has motivated research in the analysis and visualization of quantum circuits.

Quantum-Classic Difference. Although quantum circuits are made up of bits and logical gates similar to classic circuits, they are two different models. Quantum circuits have unique features such as quantum superposition and entanglement[36, 59], which are building blocks of quantum algorithms. These features power quantum algorithms as necessary parts of any quantum advantage that cannot be replicated in classical circuits. As such, the research in classical circuits[37] cannot be directly applied to quantum circuits.

Performance Analysis. Most quantum research leverages mathematical or logical methods during the analysis process of quantum circuits[50, 3, 68, 75]. Besides, the network and graph theory is also applied to quantum circuit analysis[4, 33]. Recently, VACSEN[62] introduces visualization techniques for quantum circuit analysis, which provides an intuitive way for users to aware noises in the computation. These studies mainly focus on the performance of quantum circuits.

Quantum Circuit Visualization. As the growing complexity of quantum circuits and the non-intuitive nature of quantum mechanism, it becomes increasingly challenging to comprehend the circuits. A number of studies have investigated visualization techniques to aid in the comprehension of quantum computing. For example, ShorVis[70] visualizes a quantum algorithm in terms of quantum states, circuit and probability distribution. QuFlow[45] displays the parameter flow of quantum circuits. GraphStateVis[53] offers visual analysis of qubit graph states and their stabilizer. In addition, Fickler et al.[16] present real-time visualization of quantum entanglement state through advanced devices. Existing research focuses on visualizing qubit states, parameters or quality indicators to enhance the comprehension of the circuit. Nevertheless, these studies are limited when scaling to large quantum circuits as the space of quantum states exponential increases.

Our work proposes a novel approach to tackle this challenge by focusing on the efficient representation of quantum circuit structure. We combine semantic analysis and graph visualization techniques to generate visual representations for scalable circuits with high readability. This approach provides a significant contribution towards enhancing the comprehension of quantum circuits and facilitating circuit analysis.

Quantum circuits are commonly constructed using specific programming languages[66, 35, 21], or Python toolkits[67, 11]. Researchers have studied utilizing semantics of quantum circuits for performance optimization and correctness verification[80, 69]. But there is a scarcity of research that employs semantics to interpret the quantum circuit.

Semantic analysis has been extensively used in the field of information visualization to facilitate the exploration and analysis of complex datasets. Two forms of frequently used semantic information are semantic structure and semantic meanings. The semantic structure describes internal relationship of the data, which is often used to navigate exploring data or complex visualizations[7, 1, 76]. The semantic meanings, such as keywords, are often used to characterize data samples for efficient similarity measurements[8, 41, 78, 77] and visual representations[63, 40]. In recent years, there has been growing interest in applying semantic analysis techniques to code representation to facilitate comprehension and analysis of programs. Using semantic structure information, such as abstract syntax tree (AST), to enhance code representation has been proven to be effective[23, 22]. Additionally, certain studies have focused on visualizing the semantic meanings of scripts, aiming to improve comprehension of data provenance[79, 15].

Motivated by previous studies, we attempt to utilize semantics to enhance the representation of quantum circuits. We employ AST to extract the semantic structure of quantum circuits from quantum programs, followed by inferring semantic meanings of code statements that represents various patterns in the circuits. Thus, our approach results in highly readable circuit diagrams that incorporate semantics.

The visual representation of graph data can be classified into two major categories: node-link diagram and matrix representation. Matrix representation [54, 58, 27] uses an adjacency matrix to visualize a graph and utilizes the ordering of rows and columns to highlight typical patterns. An intuitive way for non-experts is using node-link diagram by utilizing nodes and edges to represent topology structures [19, 61, 29]. The key issue of node-link diagram is how to place nodes, as the positions impact the visual patterns. Various layout strategies and methods [25, 26, 39, 83, 73] are proposed to handle different tasks and requirements, such as force-directed layout [24, 34], hierarchical layout [57], orthogonal layout [20, 6] and so on.

As the scale of graph data continues to grow [42], graph summarization[47] and visual abstraction techniques are employed to enhance the readability of graph visualization [9, 28] and facilitate the analysis of graph data. Graph summarization focuses on extracting important information from the original graph, involving aggregation based, bit compression based, simplification based and influence based methods. Aggregation based methods aggregate nodes or edges into super-nodes based on optimization function[43, 48]. Bit compression based methods minimize the number of bits in describing graphs[55, 38]. Simplification based methods remove inessential nodes or edges to simplify graphs[64, 18]. Influence based methods utilize high-level description of the influence propagation to represent graphs[52, 51]. Some of these techniques may not faithfully represent the original data or introduce complex graph theory concepts that increase the cognitive load on users. For visual abstraction, it focuses on reducing visual complexity of graphs. Graph motifs[12, 44] are utilized to simplify graph visualizations, but the motifs and glyphs involve cognitive burden in comprehension. In addition, customized visual abstraction techniques [71] are employed to achieve different tasks and requirements[81, 82].

However, the aforementioned work on visual representation of graph data is extensive and not tailored specifically to quantum circuits. Given the specialty of quantum circuits, a simple and customized representation that is more suitable for quantum experts is required. Our work builds upon the requirements of domain experts and provides a significant contribution towards the exploration of utilizing graph visualization techniques for large-scale quantum circuits.

The target users of this work are quantum researchers. Two domain experts from university labs were involved in the entire process of this research. In their daily work, quantum circuit diagrams are major visualization tools to interpret quantum circuits. We conducted iterative interviews with them to distill requirements. They propose the requirements for large-scale quantum circuit analysis, which can be translated into visualization requirements below.

R1. Clarify the components of quantum circuits. When designing quantum algorithms, it is common to use some typical sub-circuits as components of entire circuits. Quantum researchers could easily recognize a typical component in an isolate circuit. However, in a complex quantum circuit that consists of numerous quantum gates, it is challenging to identify and distinguish components from the general quantum circuit diagram. Therefore, new diagrams should clarify the structure of quantum circuits with multiple components.

R2. Simplify the patterns of quantum gates. Performing batch operations increases the scale of quantum circuits, and results in repeated patterns in circuit diagrams. In practice, quantum researchers need to identify patterns in diagrams to understand the circuits. Nevertheless, repeatedly examining patterns imposes a substantial cognitive load. Therefore, new diagrams should reveal the patterns of quantum gates and reduce unnecessary repetitions.

R3. Explicate the context of qubits and quantum gates. Quantum researchers have different concerns in quantum circuit analysis, such as qubit provenance[31], idling[10], quantum gate parallelisms[17] and the entanglement of quantum circuits[32, 35]. These considerations are essential for programming and debugging circuits. However, when exploring large circuit diagrams, these contextual details become intricate and challenging to comprehend. Therefore, new diagrams should explicitly present context information, enabling the analysis of idling, parallelism, and entanglement in quantum circuits.

R4. Adopt familiar visual designs and flexible interactions. As our users are specialized in quantum computing, they have no experience in visual analysis. Thus, a concise and familiar design is preferred. Also, they need flexibly-customized visualizations on demand. For example, some users focus on the outline of the circuit, while other users are interested in details of qubits. New diagrams should thus use visual designs that are intuitive and familiar to quantum researchers.

To fulfill these requirements, we design Quantivine, a proof-of-concept system that visualizes scalable quantum circuits. Figure 2 illustrates the architecture of the system. A novel visualization approach (Section 3) is undertaken. It accepts a piece of quantum programming code, and generates flexibly-organized quantum circuit diagrams with comprehensive context information. A user interface and a series of interactions (Section 4) are provided to support interactive exploring and analysis of the quantum circuits. Quantivine is implemented as a Visual Studio Code plugin and available at https://github.com/MeU1024/qc-vis.

To support the visualization of a quantum circuit, our pipeline first processes its underlying code through circuit compilation, semantic analysis, and data alignment (Fig. 3-A). This process allows us to extract meta-data and semantic information from the circuit.

Circuit Compilation. We compile the code and extract the following data from the quantum circuit: (1) the qubits involved in the circuit, (2) the quantum gates applied in the circuit with their correlations to qubits, and (3) the placements of quantum gates in the circuit which indicate the order of execution. The above data can be translated to the nodes, edges, and the layout of a circuit graph, which could construct a definite quantum circuit diagram as shown in Fig. 3-A1.

Semantic Analysis. Two types of semantic information are derived from the source code. (1) The semantic structure of the code implies the hierarchical structure of sub-circuits. As there are sub-circuit reuses, researchers usually define some frequently-used circuit construction processes as functions, where each function corresponds to a specific functionality. Thus, the source code is organized as a tree structure where each tree node represents a function (Fig. 3-A2). We extract this structure through an AST. (2) The semantic meanings of code provide insights into patterns in the quantum circuit. We identify three categories of repetitive patterns from loop statements using a rule-based method, which are detailed in Section 3.3.1.

Node Alignment. We apply node alignment to establish a connection between the quantum gates and the nodes of semantic structure tree. Applying semantic or syntactic analysis alone is insufficient to establish a precise correspondence between gates and tree nodes. We thus insert interrupts in the circuit compilation procedure to track the insertion sequence of quantum gates, and link the newly-built gates to their semantic representations along with the circuit constructing process. Figure 3-A3 indicates the time stamp of each gate and its corresponding tree node. As a result, all quantum gates are aligned to the semantic tree nodes.

To incorporate R1, we present a three-step approach for breaking down a typical quantum circuit diagram into hierarchical representations (Fig. 3-B). Our approach draws inspiration from techniques such as node grouping and edge bundling that are effective for graph summarization[47]. Afterwards, a semantic-preserving layout strategy is introduced to arrange the new diagram.

Quantum Gate Grouping. The semantic tree (Fig. 3-A2) is first employed to guide the segmentation of circuit components. We label attributes on quantum gates based on a user-customized semantic tree. Before grouping, users can interactively fold or unfold the tree nodes to control the level of detail (Section 4.2). Then, all quantum gates will be labeled with two attributes. (1) Tree node label: Each gate will be labeled in accord with the nearest unfolded node to which it belongs. For example, if the tree node $S1$ is folded while $S3$ is unfolded, then ${Gate}_{1}$ and ${Gate}_{2}$ would be labeled with $S3$. (2) Loop time label: As a tree node may be repeated in compilation due to loops, two groups of gates may correspond to the same tree node. We thus label each gate with a time stamp to differentiate separated gate groups that are built from the same function. Subsequently, the gates will be aggregated by attributes to compose super-gates (Fig. 3-B1), analogous to a supernode in a summarized graph. As a result, the quantum circuit is broken down to a series of primitive \scalerel* \scalerel* and component \scalerel* gates.

Qubit Bundling. For a circuit with hundreds of qubits, a typical diagram will display a line for each qubit, which causes massive overlaps when displaying multi-qubit gates. An effective solution to alleviate the problem is adopting the edge bundling technique[30] for combining neighboring edges. However, the classic method needs to be modified for the quantum circuit. Due to the fact that each wire represents a distinct qubit throughout the whole circuit, solely sharing end nodes within a local scope is not a sufficient reason to bundle two qubits together. They may play a different role in other portions of the circuit. Therefore, the bundled qubits must be contiguous and of the same provenance throughout the circuit. The same provenance means these qubits go through the same sequence of primitive or component gates. For example, all the qubits in Fig. 3-B2 go through $S1\rightarrow S2\rightarrow S1$, so they can be bundled as one super-bit.

Layout Strategy. Since the grouping and bundling process breaks up the placements of quantum gates, we present a bottom-up layout strategy to reorganize the placements with minimum circuit length and maximum semantic-preserving. First, we order the sequence of gates by their insertion time stamps (Fig. 3-A3). The time stamp of the primitive gates \scalerel* \scalerel* has been calculated in the node alignment process (Section 3.1). On this basis, the time stamp of the component gate \scalerel* is retrieved from its sub-components. Secondly, we arrange the layout referring to the semantic structure from the bottom to the top. The gates in the same tree node are arranged in a local circuit space following the order of their time stamp. They are laid out on the left most idle place of its correlated qubit wires \scalerel* to compress the length of circuit. If two gates are intersected at the same column, the later gate would be moved backward. Subsequently, the local layouts of sibling tree nodes will be concatenated while calculating layout for their parent node. In this way, we could construct a layout from the bottom to the top that shortens circuit length and preserves the semantic structure.

Quantivine abstracts patterns of quantum gates to simplify the representation of the quantum circuit (R2). The pattern of quantum gates refers to the composition and repetition paradigm in a sub-circuit. However, the composition of the circuit has been explicitly outlined through the component segmentation approach (Section 3.2). Therefore, we focus on visual abstractions of repeated patterns in this phase.

To provide a contextual perspective of the quantum circuit (R3), we extract contextual information from meta-data and utilize a set of visual representations to reveal three factors of interest to domain experts.

Qubit Provenance. We design a timeline representation for revealing the provenance of each qubit (Fig. 6-A). All operations applied on the qubit are projected onto the timeline with relative intervals preserved. This design enables domain experts to focus on the genealogy of one qubit and trace the evolution across various stages of the circuit.

Placement. We propose three designs to enhance the visual representation of the quantum circuit and provide contextual information about the placement of quantum gates (Fig. 6-B). The enhancement involves two aspects: Parallelism and Idle Qubit. We first augment the circuit by incorporating color-encoded parallelism levels on the qubit wires (Fig. 6-B1). Specifically, we assign the color red to indicate heavy-load circuits, while blue denotes light-load circuits. In addition, the idle spaces around each gate are highlighted to assist in the adjustment of gate placement (Fig. 6-B2). The color of the highlighted area represents the idle level. Notably, when highlighting the idle space for one gate, the idle space of its parallel gates is also highlighted. Due to the limitation of screen space, the extent of the idle wire is visualized next to the end of the wires (Fig. 6-B3). The new diagram reveals the patterns of idling and parallelism in the quantum circuit, which are important factors in understanding and optimizing the performance of the quantum circuit[3].

Connectivity. We employ a matrix-based design to depict the qubit connectivity (Fig. 6-C), where a highlighted $cell(i,j)$ indicates a direct connection between the $i$-th and $j$-th qubits via one or multiple multi-qubit quantum gates \scalerel*. Additionally, we propose a glyph-based design to represent entanglement states. The currently entangled qubits are assigned the same color, while the previous entangled states are visually differentiated and reflected below. This view provides valuable insights into the overall structure and behavior of the circuit, enabling domain experts to make informed decisions about its optimization.

An overview of the Quantivine interface is shown in Fig. 7, which consists of views (A-D) that present the results of our visualization approach. Quantivine visualizes the quantum circuit from four aspects:

• •

  Structure: The Structure View (Fig. 7-A) presents the semantic structure of the quantum circuit as a tree diagram. This view serves to provide an overview of the circuit (R1) and allows for flexible customization of the circuit visualizations (R4). The tree structure corresponds to the semantic tree extracted from the source code (Section 3.1). The branches of the tree outline the hierarchical components and repetitive patterns of the circuit. Three interactions based on this view are also designed and further elaborated in Section 4.2.

• •

  Components: The Component View (Fig. 7-B) presents a quantum circuit diagram in a generalized form where subsets of quantum gates are aggregated into components. This view aims to provide a high-level abstraction of the circuit structure, emphasizing the modularity and reusability of the components (R1). The components are grouped and arranged based on their execution time and semantics, as extracted from the source code (Section 3.2). The users can use interactions in the Structure View, as detailed in Section 4.2, to customize the level of detail in this view (R4).

• •

  Abstractions: The Abstraction View (Fig. 7-C) presents the patterns of quantum gates. It aims to provide a global perspective of the circuit, highlighting the repetitive patterns and simplifying the visual representation (R2). Even though the Component View enables scaling down the circuit diagram to a certain extent, it might still take up a large space due to the numerous repeated patterns. Hence, we identify and visually abstract such patterns using our approach outlined in Section 3.3. The level of detail in this view is consistent with the Component View.

• •

  Context: The Context Views (Fig. 7-D1,D2, and D3) consist of three views. The first view, D1, provides a summary of the provenance of a qubit within a limited space. The second view, D2, depicts the actual placement of quantum gates while visualizing contextual idling and parallelism information. The third view, D3, displays the matrix showing the connectivity and entanglement between qubits. These views are designed to uncover implicit contextual information within the quantum circuit (R3). Additionally, they are interactive and coordinated with other views for specific analysis needs (R4).

We implement two interactions in the Structure View to enable users to customize the circuit diagrams (R4): folding and highlighting. Folding allows users to fold/unfold items in the Structure View. Initially, all items in the structure tree are collapsed, providing a high-level summary of the circuit. Users can expand the items of interest in the tree to explore specific components in more detail. This allows users to obtain a more detailed view of the circuit by expanding more low-level items. With the highlighting operation, when users select a particular tree item in the Structure View, the corresponding gate will be highlighted in the circuit diagrams in both the Component and Abstraction Views (Fig. 7-B1,C1). This reduces the manual effort required to match items between code structure and the quantum circuit, and the hierarchical highlights provide a clear division of complex circuit diagrams.

To facilitate exploration of context information, we design a series of interactions for the Context Views in accordance with R3. Users can select a specific qubit in the structure view to display its provenance (Fig. 7-D1). Clicking on the gates associated with this qubit enables navigation to its placement within the context. In the placement view, users can adjust the threshold of parallelism level via a scroll bar. Clicking on a specific column of gates shows potential adjustment places for current parallel operations. In terms of connectivity, Quantivine allows users to specify a component and highlight its connections and entanglement behaviors for a more comprehensive view of the circuit.

Quantum Generative Adversarial Network (QuGAN) is an emerging topic of quantum machine learning[65]. However, as shown in Fig. 8-A, the meaning of gates in a typical 99-qubit circuit diagram of QuGAN is difficult to understand due to a lack of semantic information.

The expert E1 intends to implement QuGAN on a real quantum computer. Thus, he is interested in exploring the functionality of each part of the QuGAN circuit. E1 first examines the high-level structure of QuGAN in the Structure View (Fig. 8-B): the Discriminator, Generator, and SWAP Test. After collapsing the components, the circuit diagram becomes clearer and easier to comprehend (Fig. 8-C1). E1 then visualizes the detailed structure of the circuit. By expanding the Discriminator and Generator components, E1 discovers that they both consist of a Unitary component and an Entanglement component (Fig. 8-C2). Upon further expansion, E1 finds that these components include quantum gates that show repeated patterns. To confirm the role of these components, E1 employs the connectivity matrix to analyze the connections between different qubits. As such, E1 leverages the Abstraction View to get a concise view of these patterns. In Fig. 8-C3, the Unitary component includes a sequence of Ryy gates, connecting qubits in a linear manner. In Fig. 8-C4, instead of Ryy gates, the Entanglement component involves linearly-connected CRy gates. E1 says, “With my knowledge of quantum machine learning, now I understand why the Discriminator and Generator have the same structure. Analogous to classical neural networks, QuGAN trains the parameters of gates to fit the data. In the GAN framework, both the discriminator and generator are neural networks. Thus, their two quantum versions use the same model for simplicity.” To verify this observation, he then highlights the Discriminator, Generator, and SWAP Test components in the matrix view (Figure 8-C6), which shows that the qubits of the Generator component are fully connected. “This is designed to utilize the unique entanglement property of quantum physics to improve the model complexity, which further improves the prediction accuracy,” said E1. He also notices that the SWAP Test component entangles all the qubits at the end, as shown in Fig. 8-C5, which sends the predictions from the Generator to the Discriminator.

After grasping the detailed structure of the circuit, E1 decides to collapse the details, keeping an overview of it as shown in Fig. 8-C1. He then proceeds to analyze the circuit in terms of the arrangement of qubits and quantum gates. He first selects q0, and the qubit provenance view shows that it passes through an H-gate, a CSWAPs component, and another H-gate (Fig. 8-C7). This provenance demonstrates that q0 is acting as a control qubit in the SWAP test. However, via Fig. 8-C8, E1 identifies a suboptimal placement of the first H-gate and the CSWAPs component, as there is significant idle time between these operations, which might introduce noise when executed on a quantum computer. Therefore, he clicks on these two gates to check if it is possible to adjust their placement. In the placement view, the visual cues show that there is a space for the H-gate to move backwards (Fig. 8-C8). The color of the qubit wire indicates a possible location on the left of the next gate with a low parallelism level, which is suitable for replacing the H-gate.

The complexity of quantum circuits makes it difficult to detect bugs at the circuit level. The quantum multiplier, which is designed to calculate the product of two numbers stored in qubits, is a prime example of this complexity. Even a small-scale quantum multiplier has an intricate structure that is arduous to grasp (Fig. 9-A).

The expert E2 is tasked with detecting bugs in a 15-qubit quantum multiplier circuit, where the bugs are hidden within a cluttered area of the circuit diagram (Fig. 9-A1). To accomplish this, he employs Quantivine to visualize and explore the construction of the circuit. E2 starts by collapsing all sub-components to obtain an overview of the circuit. After confirming the high-level structure of the circuit is correct in the Component View, he guesses that the bugs are hidden within more detailed structures. Thus, he drills down by expanding all components. Despite the circuit becoming lengthy when fully expanded, our layout strategy ensures an organized and semantically meaningful layout (Fig. 9-B1). In this view, he notices that the composition of the UnCarry and Sum components in the Adder is incorrect, which should be composed as shown in Fig. 9-B2. Guided by the structured view and visual cues of the circuit diagram, E2 quickly locates the bugs in the underlying code of the circuit and effectively fixes them.

To evaluate the effectiveness of our pipeline, we conducted a qualitative expert evaluation using Quantivine as a technology probe. The evaluation had two goals: firstly, to assess whether our approach is effective in assisting users in comprehending quantum circuits, and secondly, to evaluate the usefulness of our visual designs in the analysis and optimization of large-scale quantum circuits.

Participants. We recruited 10 quantum researchers (P1-P10; age: 22-30) from university quantum computing laboratories. They included undergraduates, graduates, and professors from computer science and physics departments. All participants majored in quantum computing with experience in developing quantum circuits (P1-P4: < 1 year, P5-P8: 1-4 years, P9-P10: > 8 years). Their most frequently used visualization tool for quantum circuit is Qiskit. Four of them (P3-4, P6-7) focused on small-scale circuits with up to 20 qubits, while the others had worked on larger circuits with more than 50 qubits. We conducted online experiments that lasted 40 to 60 minutes. Each participant received approximately $15 at the start of the session.

Task. The participants were asked to complete three tasks using Quantivine: a training task (T0), a depiction task (T1), and an analysis task (T2). For the depiction task, we prepared a quantum circuit with multi-level structure, and required participants to illustrate the backbone of the circuit using the resulting visualizations from the structure, component, and abstraction views. The analysis task required participants to use context visualizations to analyze and find potential optimization in a quantum circuit. The training task was prepared to cover all the features in T1 and T2. In total, we prepared six quantum circuits that represents different quantum algorithms, respectively. Each circuit contains 30 to 99 qubits and over 10 hierarchical components. We also provided the participants with a document that included the textual description and source code for the algorithms.

Procedure. The study began with the introduction (10 min) of the study purpose, the motivation of improving quantum circuit representation, and the concepts in our proposed approach. Next, we proceeded to the training task (T0, 15 min). We demonstrated the features of Quantivine with a quantum circuit and asked the experts to reproduce the process themselves. After the training, we provided the experts with two quantum circuits for the two practical tasks (T1 and T2, 10 min for each). We ensured that the participants were not familiar with the circuit provided in T1 and encouraged them to learn and ask questions about the quantum algorithms before starting the trial. For each task, we asked the experts to depict at least two levels of structure and one visual abstraction. Finally, the session ended with a semi-structured interview (15 min) and a post-study questionnaire (5-Point Likert Scale). Each session was run in-lab following a think-aloud protocol.

In summary, the evaluation results demonstrate a high level of user satisfaction and effectiveness of Quantivine in supporting quantum circuit exploration and analysis. Figure 10 illustrates the results of our evaluation, and we provide a detailed analysis of the findings below.

Effectiveness. Participants appreciated the effectiveness of Quantivine in exploring and analyzing quantum circuits ($\mu$ = 4.7, $\sigma$ = 0.5). The Structure and Component Views were particularly praised for their ability to hierarchically outline the circuit, as well as the ability to customize the level of detail in the views. Participants also noted the usefulness of Abstraction View in identifying repetitive patterns, with P8 commenting that “it’s easier to read a scalable circuit with abstractions”. Most participants believed the Context View provided effective contextual information for circuit analysis, whilst some participants expressed the desire for more detailed indicators of the circuit, such as noises and parameters (P1,P3). Overall, Quantivine was perceived as an effective tool for reducing the complexity of circuit representation, and was noted that “it eases the burden of interpreting circuits” (P6).

Visual Design. Participants rated Quantivine highly for its aesthetics, clarity, and usefulness of visual encoding ($\mu$ = 4.6, $\sigma$ = 0.6). They responded that our design was visually appealing and easy to use. Participants particularly appreciated the color-coding and highlighting of the placement view for its “clear and intuitive perception of global placement information” (P3). The Connectivity View received mixed responses. While some participants were “not convinced” (P2) due to their unfamiliarity with the matrix representation, other participants found “it’s interesting to investigate the circuit using an adjacency matrix” (P9) and obtained valuable insights from it. One participant, P4, specifically noted the usefulness of the connectivity view in his current research about the entanglement analysis of quantum circuit.

Interaction & System Usability. Participants responded positively about the usability of Quantivine ($\mu$ = 4.7, $\sigma$ = 0.5), finding it easy to learn and use with fluent and efficient interactions ($\mu$ = 4.4, $\sigma$ = 0.8). They expressed interest in using Quantivine to comprehend and explain other quantum algorithms in the future, as well as for circuit analysis and optimization. Furthermore, two professors appreciated for the comprehensive views of quantum circuits provided by Quantivine, and expressed interest in sharing the tool in their educational work, indicating its potential to contribute to the advancement of quantum computing education and research.

Suggestions. Some participants suggested improvements to certain features, such as the ability to annotate and save their work within the tool. P10 noted that the current system was targeted for the expert users, adding direct manipulation on the diagram, and synchronization with the source code may make it friendly to novice users. P3 commented that he would be happy if Quantivine could additionally visualize the state of qubits in the intermediate or final stages of the execution.

This study reveals implications for future quantum circuit visualization.

Benefits of semantics in quantum circuit interpretation. Our evaluation results indicate that semantics has a promising potential for enhancing the interpretation of quantum circuits. The user feedback showed a highly positive response towards the semantic representation of the circuit, which offered a new perspective of circuit visualization. To our knowledge, this area has not yet been explored in-depth by other researchers. This approach effectively reduces the cognitive load of comprehending complex and scalable circuits and further facilitates navigation and analysis tasks. Moreover, the use of semantics could lead to the development of more advanced tools and techniques for quantum circuit visualization and analysis in the future.

Visual representations beyond typical diagrams. Our work also explores the potential of visual representations beyond the typical quantum circuit diagrams. We involve a series of new diagrams to present various perspectives of circuits. For example, the abstracted circuit diagram allows users to analyze the circuit at various levels of abstraction, making it easier to identify patterns and relationships between different parts of the circuit. The augmented circuit diagram that uses color-coding and highlighting enhances the perception of gate placement context, which is critical for optimizing the circuit performance. These new diagrams could be extended to other visualizations and graphical interfaces for quantum computing, providing users with a more intuitive and interactive way to analyze and optimize quantum circuits.

Although our work has shown promising results, there are several limitations and opportunities for future research.

Scalability. Our semantic-based segmentation and abstraction approaches for quantum circuits are scalable, enabling the visualization of larger and more complex circuits without any limitations. Our usage scenarios and user evaluation confirm that Quantivine can efficiently visualize quantum circuits with up to 100 qubits. The feedback from domain experts suggests that the system’s capability covers the majority of their research on current quantum devices. Nevertheless, as circuits scale up to hundreds of qubits, our system encounters challenges with interactions. The fully expanded circuits and matrix diagrams impose overhead in terms of rendering and visual perception, thereby hindering the interactivity of the system. Although our design of folding circuit mitigates this issue to some extent, optimizing rendering techniques and developing new interactions tailored to the demands of large graphs and matrices can address it more adequately in future work.

Generalizability. Although our study focuses on semantic analysis of Python + Qiskit code, the methodologies employed in this research have the potential to be extended to other high-level quantum programming languages. The fundamental idea involves utilizing static analysis to deduce the structures and meanings of code snippets and then mapping them to dynamic compiled circuits. These semantic meanings are derived from predefined rules, which can be expanded to encompass more complicated patterns and leverage advanced deep learning techniques for intelligent inference [72] in forthcoming research.

Potentiality. With increasing capability of the quantum circuit, its visualization and analysis are becoming an emerging field of research. While our work illustrates a potential pipeline of using semantic analysis and visualization techniques for quantum circuit representation and analysis, further work is needed to explore how it can be integrated with other quantum programming and simulation tools. We believe our work has the potential to lay the foundation for future research in large-scale quantum circuits by making their exploration and analysis more accessible to a wider range of researchers and practitioners.

Limitations. Our system currently supports the visualization of static quantum circuits. Future work could focus on developing a real-time visualization system that captures the dynamics of quantum circuits during execution. The current system is tailored to expert users and lacks certain features that could make it more accessible to novice users. Future work could focus on improving the user interface and developing features such as direct manipulation on diagrams. Furthermore, it would be beneficial to offer users the ability to define their own grouping of quantum gates, in addition to automated methods, resulting in a more customizable and user-centric experience.