DraftingJS: CAD diagrams in the browser


Let’s put up a little 2D blueprint on my website, I thought, like the one to the right. How hard can that be?

Boy was I wrong. I tried about half-dozen open-source CAD tools. If you think open-source desktop tools are generally not very good, let me introduce you to the dumpster fire that is open-source CAD tools. My apologies to the dedicated people who write them, but much of it is simply not usable IMHO.

Some toolchains — even if ugly and buggy — work well; like OpenSCAD for the purposes of 3D printing. But something as simple as a 2D technical drawing that shows parts, and distances, etc — the kind of thing you want to print out to take to the garage and make the part from a piece of wood with your table saw, drill and the like — seems basically impossible. Well, impossible within the timeframe I allocated, which I’m afraid was many hours too many compared to the results I got.

So I figured I have better things to do with my time. I’m proud to introduce DraftingJS: a little library to quickly define diagrams like the one above in Javascript and render it right in the browser. Basically you say: My diagram has the following shapes in it, and label this distance here or that radius there. DraftingJS does unit conversions, SVG generation, and knows where and how to draw the right symbols. (Well, as well as I remember from a drafting class some decades ago. Corrections appreciated.) And stuff like that, so you can be fast creating and maintaining those diagrams.

DraftingJS has its own website at draftingjs.gitlab.io with more examples. Check it out.

You think I’m going a bit overboard by building what’s essentially a version 0.1 of a text-based, parametric 2D CAD tool? Maybe, but I spent about as many hours creating DraftingJS as I had previously spent banging my head against various CAD tools, and this time I have the results I want — in fact, better: For example, I get SVG-based vector graphics instead of bitmaps, so the diagrams auto-scale. Also, Javascript is much easier to version control or “diff” than some opaque CAD repository. And I get a Turing-complete programming language that lets me generate diagrams from arbitrary algorithms, too. While we can disagree on the beauty (or lack thereof) of Javascript as a language, it certainly beats any special-purpose CAD scripting language, too. Not bad for a few hundred lines of code.

So, here you are. Pull requests appreciated :-)