Building a Schematic Editor, one bug at a time

This project started with a simple idea: make it easy to design and connect component into a systems. It must be done visually in the browser. Just drag components onto a canvas, wire them together, and get a clear, structured schematic without fighting the tool.

Simple in concept. I found out, not so simple in practice. I started playing with a little JS and HTML creating a dynamic website, on the back-end I went to my days as scientific developer. The challenge is to have a top-notch physical system and an easy-to-use interface.

Under the hood, this editor is built on a diagramming engine that handles shapes, connections, and interactions. On top of that sits a custom layer for domain-specific components. I decided to start with pipes, valves, tanks, electrical elements, each with typed ports and rules about how they can connect.

And that’s where things get interesting.

A lot of the work went into just making the small interactions feel natural .Things like dragging, dropping resizing and so much more

The journey started with a lot of fun, hopefully you will be able to walk with me in this adventure and learn a things or two.

More to come.