DEV Community

Alberto Barrago
Alberto Barrago

Posted on • Edited on

I Built My Own Diagramming Tool

Hey! I’ve been working on Markasso, a lightweight drawing and diagramming tool. Built entirely from scratch with vanilla JS and Canvas 2D API. No frameworks, no libraries, nothing.

Why I built it: In this AI era where you can generate anything in seconds, I wanted to actually build something myself from the ground up. Understand (or try to do it) every line, every pixel, every math formula behind it.

My grandmother was a math teacher so I guess the stubbornness runs in the family, but I’ll be honest, Claude helped me a lot when the geometry got tricky and Lorenzo Cataldi with the UI.

Everything is hand-rolled: pure Canvas API (no SVG), a Redux-like state management with immutable state and action-based updates, hit detection, bounding boxes, transform handles, undo/redo via action stack. Single user, runs entirely in the browser.

It’s also packed with little things I cared about: full keyboard shortcuts, multi-language support, a magnetic grid for snapping, and custom format export. I wanted it to feel like a real tool, not just a tech demo.

The hardest part was making resize handles feel natural when you’re doing all the geometry yourself.
Once you try building this stuff from scratch you really start to appreciate what the Excalidraw team has done.

Make a trip ^^


Source Code

Would love to hear your feedback, especially on UX and what features you’d want to see next!

Top comments (1)