Wiring Diagram Online: Draw, Share, and Export Electrical Diagrams in Your Browser

Wiring Diagram Online — circuit diagram showing component connections+-AC MainsStep-Down XfmrD1 BridgeC1 1000μFREGLM7805 5V230V AC UtilityRegulated Power SupplyAC -> Transformer -> Rectifier -> Filter -> Regulator
Wiring Diagram Online: Draw, Share, and Export Electrical Diagrams in Your Browser — interactive diagram. Open it in the editor to customise components and wiring.

This is a free printable wiring diagram online: download the diagram as SVG or open it and print to paper or PDF.

Draw professional wiring diagrams online without installing software — place components, connect wires, annotate circuits, and export to PDF or image in minutes.

A wiring diagram shows the physical connections between electrical components using standardised or simplified symbols, distinct from a schematic which conveys only the logical circuit topology. Wiring diagrams are essential for electricians, automotive technicians, and home automation installers who need to understand where wires physically run, which terminals connect to which, and how equipment mounts in a panel or enclosure.

Drawing wiring diagrams online removes the barrier of specialist desktop software. Browser-based tools let you drag component symbols onto a canvas, click to connect terminals with routed wire paths, add wire colour labels, and annotate with cable references or circuit breaker numbers. Because the diagram lives in the cloud, a technician on site can view it on a phone while a draughtsperson updates it at the office — the version they each see stays in sync.

Effective online wiring diagrams use consistent wire colour conventions appropriate to the installation standard being followed. In IEC-based regions (Europe, most of Asia, South Africa), line conductors are brown (L1), black (L2), grey (L3), blue (neutral), and green-yellow (earth). In NEC-based North American practice, black and red are ungrounded conductors, white is neutral, and green or bare is earth. Automotive wiring uses manufacturer-specific colour codes that vary by make, so always include a colour legend in any automotive wiring diagram.

Layer management is particularly useful when drawing complex panel or cabinet wiring. Assign one layer to power circuits, one to control circuits, and one to earthing conductors. This makes it straightforward to isolate and check each circuit type without visual clutter from the others. When exporting, flatten all layers to a single PDF for distribution to contractors who may not have access to the drawing tool.

Always include a revision block, drawing number, approval signature field, and applicable installation standard reference on every wiring diagram intended for construction or inspection.

The fastest way to create or consult a wiring diagram today is to use a browser-based editor — nothing to install, no licence fee, and diagrams are accessible from any device. circuitdiagrammaker.com offers a free online wiring diagram maker with a full component library, drag-and-drop canvas, and one-click export. More specialised diagrams such as the GE RR9 low-voltage relay system can also be built there using standard relay and switch symbols. Whether you need a quick sketch or a detailed multi-circuit layout, the editor handles it entirely in your browser.

How to wire wiring diagram online

  1. Set up the drawing canvas and page format Choose the page size (A4, A3, or Letter), orientation (landscape for most wiring diagrams), and drawing scale. Add a title block with drawing number, revision, date, draughtsperson name, and applicable wiring standard (e.g., IEC 60364, NEC, AS/NZS 3000).
  2. Place the supply source and main protective devices Start with the incoming supply — mains panel, battery, or transformer secondary — and place the main circuit breaker or fuse. This establishes the current path's origin and the first point of overcurrent protection.
  3. Place loads and intermediate components Add switches, contactors, motors, luminaires, receptacles, sensors, and control devices in the order they appear in the physical installation. Keep components that are physically close together spatially close on the diagram.
  4. Draw wire connections between terminals Connect component terminals using the wiring tool. Assign wire colours consistent with the applicable standard. Label each wire with a unique wire number or reference where the installation requires ferrule marking.
  5. Add annotations, references, and a wire colour legend Annotate circuit breaker ratings, cable sizes (cross-sectional area in mm² or AWG), and conduit or tray references. Include a colour legend keyed to the applicable wiring standard.
  6. Review for completeness and accuracy Check every component has a correct symbol, all connections are closed (no dangling wire ends), all terminals are identified, and the protective earth path is continuous from every load back to the main earthing point.

Specifications

IEC wire colour — line conductorsBrown (L1), Black (L2), Grey (L3)
IEC wire colour — neutralBlue
IEC wire colour — protective earthGreen-Yellow
NEC wire colour — ungrounded conductorsBlack, Red (120/240 V systems)
NEC wire colour — neutralWhite or Grey
NEC wire colour — equipment groundingGreen, Green with Yellow stripe, or bare

Safety warnings

Tools needed

Common mistakes

Troubleshooting

Exported PDF has missing symbols or blank areas
Cause: Font or symbol library not fully loaded before export was triggered, or browser tab was in the background during render. Fix: Reload the diagram, wait for all symbols to render visibly on screen, then re-export. Use the print-preview function to verify all elements are present before saving.
Wire connections appear correct on screen but the physical installation does not work
Cause: Terminal numbers on the diagram do not match the actual component terminal labelling, or wire colour labels were not followed during installation. Fix: Perform a point-to-point continuity check between the diagram's terminal references and the physical wiring. Update the diagram if component terminals were found to differ from those shown.
Collaborators cannot see the latest diagram version
Cause: Diagram was not saved to cloud after the last edit, or collaborators are viewing a cached older version. Fix: Force-save the diagram and share the direct diagram link rather than a screenshot. Ask collaborators to hard-refresh (Ctrl+Shift+R) their browser to clear the cached version.

Frequently asked questions

What is the difference between a wiring diagram and a schematic diagram?

A schematic uses abstract symbols to show electrical connections and circuit logic, regardless of physical layout. A wiring diagram represents the physical positions of components and shows actual wire runs, terminal numbers, and connector identities. Electricians typically use wiring diagrams on the job; engineers use schematics for circuit design.

Do I need to install software to draw wiring diagrams?

No. Browser-based wiring diagram tools run entirely within a modern web browser. You can place symbols, route wires, add annotations, and export finished diagrams without downloading or installing any application. An internet connection is required during editing.

Which wire colour standard should I use in my wiring diagram?

Use the colour standard that applies to your installation jurisdiction. IEC 60446 (and harmonised national standards) applies in Europe, South Africa, and most of Asia. NEC applies in North America. AS/NZS 3000 applies in Australia and New Zealand. Always state the applicable standard on the drawing title block.

Can I import an existing wiring diagram into an online tool?

Many online tools accept SVG, DXF, or proprietary format imports. Check the tool's documentation for supported import formats. PDF import, where available, typically imports as a locked background image rather than editable vector geometry, so you would need to re-draw the circuit elements over it.

What file formats can I export a wiring diagram to?

Common export formats include PDF (for printing and distribution), SVG (for scalable vector editing in other tools), PNG or JPEG (for embedding in documents), and the tool's native format (for future editing). For formal engineering drawings, PDF is the preferred distribution format.

Where can I make a wiring diagram online for free?

circuitdiagrammaker.com is a free browser-based wiring diagram maker that requires no download or sign-up. You can drag standard electrical symbols onto the canvas, connect them with wires, add labels, and export the finished diagram as an image or PDF. Other free tools include draw.io (general diagramming) and Lucidchart (free tier with limited shapes).

Are there any free online wiring diagram tools?

Yes. circuitdiagrammaker.com provides a completely free online editor for wiring and schematic diagrams. SmartDraw and Lucidchart have free tiers with electrical templates, and draw.io (diagrams.net) is fully free with a wide shape library. For automotive-specific diagrams, manufacturer workshop portals sometimes offer free diagram access for a limited time per session.

Where can I find a GE RR9 relay wiring diagram online?

The GE RR9 is a mechanically held, low-voltage lighting control relay rated at 20 A, controlled by momentary 24 V AC pulses to its separate 'close' and 'open' coil terminals. The standard wiring shows the switched hot conductor passing through terminals 1 and 2 of the relay, with the 24 V coil connections labelled per the GE/Interlogix instruction sheet. GE (now ABB/GE Industrial Solutions) publishes the instruction leaflet online; the relay circuit itself can be recreated in the free editor at circuitdiagrammaker.com using relay and coil symbols.

Related diagrams

Free electrical calculators

Edit this diagram free in the online editor