circuit diagram creator

Welcome to the Circuit Diagram Creator, a specialized tool designed for physics educators. Create, manipulate, and export diagrams for basic circuits you can use for assessments or classwork.

Note: This is a continual work in progress. What you see below is not the final product, I will continue to add additional functionality as time goes on. I simply believe that it's better to put it out now in hopes people might find some use out of this unpolished version rather than wait until I feel like it's perfect.

Interactive Graph Tool Placeholder

How to Use the Circuit Maker

The Workspace

Left panel: components organized into Components, Meters, and Annotations
Center: your canvas
Right panel: appears when you select a component or wire, showing its properties

Adding Components

Click any item in the left panel to drop it onto the canvas
Drag an item from the left panel to place it exactly where you want
Components available: Battery, Resistor, Capacitor, Inductor, Switch, Bulb, Ground
Meters available: Ammeter, Voltmeter
Annotations available: Junction, Current Arrow

Editing a Component

Select a component to see its properties in the right panel:

Label: type text for the component (supports Greek letters, click the α, β, θ, etc. buttons to insert them). Check "Show label" to display it
Value: enter the component's value (for example, resistance in ohms). You can drag the value's position directly on the canvas
Label Font Size and Label Font: control how the label text looks
Color: choose a preset color or enter a hex code
Rotation: 0°, 90°, 180°, or 270°
Current Direction: Off, Conventional, or Electron Flow

A row of small icons above the properties panel lets you copy/paste a component's style, lock it, or delete it.

Drawing Wires

Click "Wire" in the toolbar to enter wire mode
Click on a component's terminal to start the wire, then click on another terminal to connect it. The wire finishes automatically once it snaps to a terminal
Wires automatically re-route if you move either connected component
Select a wire to change its color in the right panel
A wire's endpoints can be dragged individually to re-route it manually
Switch back to "Select" mode to select, move, and edit components instead of drawing wires

Toolbar Controls

Undo / Redo
Snap (snap components to the grid)
Grid: toggle the visible grid, choose its color, and set its spacing
Terminals: toggle whether terminal connection points are visible
Zoom level
Lock: lock the selected component in place
Save: save your current circuit
My Circuits: view, save, export, or import saved circuits
Templates: load a pre-built circuit (Simple Loop, Series Circuit, Parallel Circuit, RC Circuit)
Clear: removes everything from the canvas (asks for confirmation first, since this cannot be undone)
Reset view (home icon): resets zoom/pan back to default
Shortcuts: opens a list of keyboard shortcuts
Copy: copies selected elements as a PNG to your clipboard

Exporting

Click Export for these options:

Copy as Image (PNG)
Export as PNG
Export as SVG
Export as PDF

circuit diagram creator

Interactive Graph Tool Placeholder

How to Use the Circuit Maker

The Workspace

Left panel: components organized into Components, Meters, and Annotations

Center: your canvas

Right panel: appears when you select a component or wire, showing its properties

Adding Components

Click any item in the left panel to drop it onto the canvas

Drag an item from the left panel to place it exactly where you want

Components available: Battery, Resistor, Capacitor, Inductor, Switch, Bulb, Ground

Meters available: Ammeter, Voltmeter

Annotations available: Junction, Current Arrow

Editing a Component

Select a component to see its properties in the right panel:

Label: type text for the component (supports Greek letters, click the α, β, θ, etc. buttons to insert them). Check "Show label" to display it

Value: enter the component's value (for example, resistance in ohms). You can drag the value's position directly on the canvas

Label Font Size and Label Font: control how the label text looks

Color: choose a preset color or enter a hex code

Rotation: 0°, 90°, 180°, or 270°

Current Direction: Off, Conventional, or Electron Flow

A row of small icons above the properties panel lets you copy/paste a component's style, lock it, or delete it.

Drawing Wires

Click "Wire" in the toolbar to enter wire mode

Click on a component's terminal to start the wire, then click on another terminal to connect it. The wire finishes automatically once it snaps to a terminal

Wires automatically re-route if you move either connected component

Select a wire to change its color in the right panel

A wire's endpoints can be dragged individually to re-route it manually

Switch back to "Select" mode to select, move, and edit components instead of drawing wires

Toolbar Controls

Undo / Redo

Snap (snap components to the grid)

Grid: toggle the visible grid, choose its color, and set its spacing

Terminals: toggle whether terminal connection points are visible

Zoom level

Lock: lock the selected component in place

Save: save your current circuit

My Circuits: view, save, export, or import saved circuits

Templates: load a pre-built circuit (Simple Loop, Series Circuit, Parallel Circuit, RC Circuit)

Clear: removes everything from the canvas (asks for confirmation first, since this cannot be undone)

Reset view (home icon): resets zoom/pan back to default

Shortcuts: opens a list of keyboard shortcuts

Copy: copies selected elements as a PNG to your clipboard

Exporting

Click Export for these options:

Copy as Image (PNG)

Export as PNG

Export as SVG

Export as PDF