A precise diagram
Zoom, move, and edit the diagram without losing dimensions or connection points.
Online electrical panel editor
PowerSketch;
/* An online editor for drawing electrical panel diagrams and preparing them for installation. */
[ Open live product ]export default { role: 'SaaS / Product / Full-stack', stack: ['Vue', 'Nuxt', 'TypeScript', 'Node.js', 'Canvas API', 'SVG', 'Go', 'PostgreSQL', 'Docker'], production: true,}
editor.png2400×1884
// 01PowerSketch in numbers.json
- devices in the catalog
- 2 000
- manufacturers
- 39
- diagram format
- SVG
// 02Context.md
PowerSketch lets an electrician build a panel much as they would at a workbench: choose real devices from the catalog, place them on the diagram, and connect them with wires. The service then creates the device list and connection table automatically, so nothing has to be copied by hand.
It is made for electricians, smart-home integrators, panel builders, commissioning engineers, and technical specialists.
landing.png2710×1200
// 03Workflow.flow
From a new diagram to ready-to-use documents
Every step is connected. The user draws the diagram once, and PowerSketch reuses that information for reports, sharing, and export.
- 01
Create a project
Every diagram lives in the workspace, where it is easy to find, open, or copy.
- 02
Build the panel
Find the device you need in the catalog and drag it onto the diagram.
- 03
Add the wires
Wires connect specific device pins, keeping the diagram clear and easy to check.
- 04
Download reports
PowerSketch builds device and connection tables directly from the finished diagram.
- 05
Share the result
Send a view-only link to a client or colleague, or download an SVG for the job.
dashboard.png2522×1884
projects.png2522×1884
// 04Problem.issue
An advanced engineering tool that is easy to understand
The main challenge was making a precise engineering tool feel straightforward in everyday work. When someone moves a device or wire, the pins, layers, reports, and export all need to update without losing data.
Large diagrams still need to feel smooth, and an exported file needs to match what users see in the editor. Older projects must keep opening after updates, and the core tools need to work across different screen sizes.
PRECISION / SPEED / COMPATIBILITY / SCALE
// 05System / Architecture.graph
One diagram, all the data you need
The diagram sits at the center of the editor. Every device has dimensions and pins, every wire has two endpoints, and every layer has an order and visibility. Change something once and the update appears in the editor, reports, and exported file.
Diagram editing happens in the browser, so every move feels immediate. The server stores projects and the catalog and handles sign-in, shared links, and subscriptions. The user never has to think about that split—they can simply continue where they left off.
catalog.device=>svg.scene=>project.state=>report.build=>export.svg
editor.png2400×1884
Devices close at hand
Search and clear categories make it easy to find the right model among 2,000 devices.
A tidy workspace
Group items into layers, hide what you do not need, and lock finished parts against accidental edits.
No duplicate work
Add devices and wires once, and they automatically appear in reports and exports.
library.png2400×1884
layers.png2400×1884
// 06Custom devices.schema
If a device is missing, you can add it
Enter its dimensions, upload an image, and place the pins. PNG, JPG, SVG, and WEBP files up to 5 MB are supported. A new model can also be suggested for the shared catalog.
customDevices.png2522×1884
// 07Reports.table
Reports are built from the diagram
One report lists device models, specifications, notes, and quantities. Another lists every wire with its label, cross-section, length, source, and destination. Unneeded columns can be removed before download.
deviceReport.png2400×1884
wireReport.png2400×1884
// 08Hand-off.output
The result is easy to review and hand off
Send a view-only link to a colleague or client—no account or editor access is required. For installation or printing, export the diagram as SVG with the right background, paper size, and orientation.
sharing.png1024×560
export.png2304×1380
subscription.png2522×1884
// 09Product model.plan
You can start for free
The editor and device catalog are included in the free plan. Plus and Professional suit people managing more projects, with higher limits, project copying, and watermark-free export.
// 10Result.log
PowerSketch covers the job from start to finish
Today, PowerSketch lets people create a project, build a diagram from 2,000 ready-made devices, add the wiring, and produce useful documents. A project can be shared by link or exported as SVG. Everything runs in the browser, with nothing extra to install.
// My role
I build PowerSketch end to end: user flows, interface and data design, frontend, backend, production releases, and ongoing product support.
- 'Product',
- 'UI/UX',
- 'Frontend',
- 'Backend',
- 'Architecture',
Stack[]
- 'Vue',
- 'Nuxt',
- 'TypeScript',
- 'Node.js',
- 'Canvas API',
- 'SVG',
- 'Go',
- 'PostgreSQL',
- 'Docker',
root@portfolio:~/contact$ ./start-conversation // Contact me directly
console.log(Have an idea or a project in mind?);
/* Send me a short note about what you want to build and how I can help. That is enough to get started. */