A library for drawing quantum circuits with customizable styles. Ideal for visualizing quantum algorithms and for educational purposes.
- Comprehensive Gate Support: Includes common quantum gates like Hadamard, Pauli-X, Pauli-Y, Pauli-Z, Rotation gates (Rx, Ry, Rz), and CNOT gates.
- Customizable Styles: Adjust colors, sizes, fonts, and more to personalize your circuit diagrams.
- TypeScript Support: Provides type definitions for type safety and IntelliSense support.
- Browser and Node.js Compatibility: Use the library in both browser environments and Node.js applications.
- Easy Integration: Simple API design for easy integration into your projects.
Install the package via npm:
npm install quantum-circuit-drawerInclude Dependencies:
<!-- Include svg.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.4/svg.min.js"></script>
<!-- Include the quantum-circuit-drawer library -->
<script src="node_modules/quantum-circuit-drawer/dist/quantum-circuit-drawer.js"></script>Set Up the HTML Container:
<div id="circuit-container"></div>Use the Library:
<script>
const { Circuit, Renderer, HadamardGate, CNOTGate } = QuantumCircuitDrawer;
const circuit = new Circuit(2);
circuit.addGate(new HadamardGate(0));
circuit.addGate(new CNOTGate(0, 1));
const renderer = new Renderer(circuit, "circuit-container");
renderer.draw();
</script>
Install svg.js:
npm install @svgdotjs/svg.jsImport the Library:
import { SVG } from "@svgdotjs/svg.js";
import {
Circuit,
Renderer,
HadamardGate,
CNOTGate,
} from "quantum-circuit-drawer";
const circuit = new Circuit(2);
circuit.addGate(new HadamardGate(0));
circuit.addGate(new CNOTGate(0, 1));
const renderer = new Renderer(circuit, "circuit-container");
renderer.draw();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Quantum Circuit Drawer Demo</title>
<style>
#circuit-container {
width: 800px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="circuit-container"></div>
<!-- Include svg.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.4/svg.min.js"></script>
<!-- Include the quantum-circuit-drawer library -->
<script src="node_modules/quantum-circuit-drawer/dist/quantum-circuit-drawer.js"></script>
<script>
const { Circuit, Renderer, HadamardGate, CNOTGate } =
QuantumCircuitDrawer;
const circuit = new Circuit(2);
circuit.addGate(new HadamardGate(0));
circuit.addGate(new CNOTGate(0, 1));
const renderer = new Renderer(circuit, "circuit-container");
renderer.draw();
</script>
</body>
</html>const customStyles = {
gateFill: "#e0f7fa",
gateStroke: "#006064",
fontSize: 16,
fontFamily: "Courier New, monospace",
fontColor: "#006064",
lineColor: "#004d40",
qubitSpacing: 70,
gateSpacing: 90,
};
const renderer = new Renderer(circuit, "circuit-container", customStyles);
renderer.draw();Represents a quantum circuit composed of qubits and quantum gates.
constructor(numQubits: number)numQubits: The number of qubits in the circuit.
addGate(gate: IGate): Adds a gate to the circuit.
circuit.addGate(new HadamardGate(0));Handles the rendering of the quantum circuit.
constructor(
circuit: Circuit,
containerId: string,
styles?: Partial<StyleConfig>
)circuit: The Circuit instance to render.containerId: The ID of the HTML element where the circuit will be drawn.styles: (Optional) Custom styles for the circuit diagram.
draw(): Renders the circuit diagram in the specified container.
const renderer = new Renderer(circuit, "circuit-container", customStyles);
renderer.draw();- HadamardGate
- CNOTGate
- PauliXGate
- PauliYGate
- PauliZGate
- RotationGate
Each gate class implements the IGate interface and represents a specific quantum gate.
circuit.addGate(new PauliXGate(1));
circuit.addGate(new RotationGate("Y", 2, Math.PI / 4));Represents a generic quantum gate.
interface IGate {
name: string;
qubits: number[];
}Defines the styling options for the circuit diagram.
Properties:
qubitSpacing: Number (default: 50)gateSpacing: Number (default: 70)gateWidth: Number (default: 40)gateHeight: Number (default: 40)lineColor: String (default: '#000')lineWidth: Number (default: 2)gateFill: String (default: '#fff')gateStroke: String (default: '#000')gateStrokeWidth: Number (default: 2)fontSize: Number (default: 14)fontFamily: String (default: 'Arial, sans-serif')fontColor: String (default: '#000')
Example:
const customStyles: Partial<StyleConfig> = {
gateFill: "#ffe0b2",
gateStroke: "#ef6c00",
fontSize: 14,
fontFamily: "Georgia, serif",
fontColor: "#ef6c00",
lineColor: "#bf360c",
qubitSpacing: 60,
gateSpacing: 80,
};This project is licensed under the MIT License.