Gizmo Draw Now Supports Groups

Inch by Inch Gizmo Draw Gets Better

I started developing Gizmo Draw as a means to an end — to learn more about programming language development. I’ve always enjoyed toying around with new languages and I know a little bit about what goes on under the hood. But to really understand them you’ve got to have a go at making your own.

My idea was to build something in the spirit of “diagrams as code”, like Mermaidjs and PlantUML. Both have been around forever, and once upon a time both were free. I especially like Mermaid’s simple, compact language. 

Of course, the world doesn’t really need another “diagrams as code” tool — there are others too that are quite good (see the nice survey here). But, as these tools get more successful the authors start to move towards monetization. We all need to make a living, but “free” seems to vanish anytime a tool reaches some level of success. You’re either paywalled or overpowered by ads.

Plus, I wanted to include a graphical editor to build the code, so you have the best of both worlds: a graphical editor combined with the power of a more traditional Javascript-like language.

As it turns out, this is no easy feat and it’s been a good bit of work. I’ve been at it (on hobby time) for over a year now, and my efforts are finally starting to yield some fruit and the idea shows some promise.

But you can be the judge.

In spite of my progress, there are still some missing features that we’ve come to expect from drawing tools — Groups is high on that list. For me, Groups are critical since I tend to use tools like this for drawing architectural diagrams, like this one:

Architecture Diagram in Gizmo Draw

Groups are important for communicating collaborating components as well as providing a vehicle to arrange and rearrange groups of icons on the canvas.

In the Gizmo language, the drawing above looks like this:

group {
    container: rect{ x: 952 y: 187.25 width: 361 height: 301 }()
    let b = ec2{ x: 85 y: -61 label: { text: "Decision Engine" position: "bottom" } }()
    let a = lambda{ x: -116 y: -16 label: { text: "Ad Server" position: "bottom" } }()
    let c = aurora{ x: 85 y: 43 label: { text: "Storage" position: "bottom" } }()
}()
a'e--b'w
a'e--c'w
let d = api_gateway{ x: 561 y: 169.25 label: { text: "Gateway" position: "bottom" } }()
d'e--a'w

In Mermaidjs, the code looks like this:

graph LR
subgraph Ad Server
B((Ad Server)) --- C((Decision Engine))
B --- D((Storage))
style B fill:#ccf,stroke:#333,stroke-width:2px
style C fill:#ccf,stroke:#333,stroke-width:2px
style D fill:#ccf,stroke:#333,stroke-width:2px
end
A((Gateway)) --- B

Which produces a diagram like this:

Mermaid JS

There are pros and cons to both, so pick your poison. Gizmo is more expressive, but it’s not expressly designed for UML as both Mermaidjs and PlantUML are. Plus, with Gizmo you probably won’t write much of the code. You’ll drag and drop like you would with a tool like LucidChart, and the code gets created for you.

Here’s what that code looks like in the Gizmo UI:

Gizmo User Interface

Gizmo Draw is a Programming Language

My goal for Gizmo Draw was to create my own programming language, and I did. It’s got all the accoutrements of a typical language — loops, conditionals, built-in functions, plus built-in animations and physics effects. You can use it as a simple game engine too. 

There are lots of examples built-in that will show you the details of how the language works. 

Check it out at https://draw.gizmocms.com.

It’s not quite “Mission Accomplished” and there are still a few shortcomings (and bugs) but it’s usable. Maybe I’ll carry on and add some missing features that it surely needs. Or maybe not. Could be time for a new project. You never know.