DraftingJS: publish 2-D blueprints on the web in Javascript

Need to publish simple, two-dimensional technical drawings on the web, such as the ones on this page?

Infuriated how hard that can be with common CAD tools? I was.

So I wrote a little bit of Javascript, which I call DraftingJS. You include it in your web page. It lets you describe your drawing on a high level in Javascript, and DraftingJS renders it in SVG right in the browser. Most styles are defined in a separate CSS file, so you can easily change colors or line widths.

Below are some examples. Source is at gitlab.com/draftingjs.

I don't claim that this is complete at all; I've only written as much code as I needed for now :-) But it handles surprisingly many situations already. Arguably it qualifies as a parametric CAD tool, because you can use variables, and loops and anything Javascript to construct your diagrams.

Simple part with label

Here is the code:

<script src="js/drafting.js"></script>

<script src="examples/simple.drafting.js"></script>

The first line brings in the library, the second one reads the Javascript file that defines the diagram, converts it to SVG and inserts it into the HTML right after the diagram script itself. Click here to open that second file, or read on as I have it in-lined right here so it's easy to compare with the diagram:


This code creates an instance of DjsDiagram with defaults, and specifies which elements (here: two) to include in the diagram. We have a rectangle, and a label for the part. The coordinates and sizes for all are defined with a straightforward "Point" class and some suitable operations on it to make it easy to use.

I bet you can write this file faster than it takes some CAD tools to just come up.

Let's add dimensions

Parts are not very useful without dimensions. If you want to cut this part in the garage, you better know how big it needs to be. So let's add the right measures to the code above. We get:


There's not much to explain: two elements of type DjsLinearMeasure have been added at the points whose distance they measure. DraftingJS automatically calculates that distance, and creates the lines, arrow heads and labels. If you don't like where they are placed, you can override the location.

Yes, this works in any direction, not just horizontal or vertical.

Note that if you parameterize your diagram by using variables, all your distance labels will automatically update when variables change.

A more complex part

For this more complex part, we add some HTML5 custom attributes to the script tag to specify units, display size etc. instead of using the defaults as we did above. Here is the code in the HTML file:

<script src="js/drafting.js"></script>

<script src="examples/arm.drafting.js"
           data-scale="800/10" data-width="1000" data-height="600"
           data-rounding="2" data-unit='"'></script>

And here is the diagram, in-lined again. DraftingJS lets you use some version of Turtle Graphics to define an irregular part. As you can see, you can mix straight lines and curves.


Repeat elements

Given that this is Javascript, it will come at no surprise that we can do things such as loops and generate diagrams in the process. Here I define two custom part classes by encapsulating the code for the above part, and use it repeatedly:


Not very hard, is it? :-)

To use, easiest might be to clone this repo. All you need is files js/drafting.js and assets/drafting.css. Pull requests welcome!