Drakon.Tech

Drakon.Tech

Turn flowcharts into JavaScript code

Drakon.Tech is a truly visual online development environment for JavaScript.

  • Runs in the browser.
  • Based on the DRAKON visual language.

What is DRAKON?

DRAKON is a visual algorithmic language from the space industry. Aerospace engineers initially developed DRAKON to deal with the sheer complexity of spacecraft control systems. The authors of DRAKON carefully designed the language to reduce the cognitive effort of working with algorithms. Every rule and feature of DRAKON helps people understand programs easier.

Drakon.Tech brings DRAKON from the skies to the earth, allowing developers to use this space technology for web applications.

DRAKON and JavaScript

The development process with Drakon.Tech includes these steps:

Figure 1. A JavaScript function generated from a DRAKON diagram

A JavaScript function generated from a DRAKON diagram

The developer defines the control flow using the visual constructs of the DRAKON language. Then, the developer puts short snippets of JavaScript code in the boxes on the diagram. There is no need to use keywords if, else, for, and while because DRAKON takes care of branching and loops.

In Drakon.Tech, we still program in JavaScript, but we get a graphical view of the algorithm's logic.

Why DRAKON is cool

DRAKON cardinally changes programming experience because it is a break-through in representing algorithms. On the one hand, DRAKON shows the control flow in a clear, explicit manner. On the other hand, DRAKON provides order and consistency.

Text is not optimal for algorithms

Text-based structured programming outlines the control flow with nested blocks of indented text. Text with nested indentation emphasizes the tree-like nature of the program but creates a recurring mental problem that the developer needs to solve at the end of every block:
which line is next?

The modern code editors attempt to alleviate this problem by drawing vertical guides that connect the block's start and end. While a vertical guide can indeed help the programmer find the beginning of the code block, the frustrating work of finding the next line still needs to be done (Figure 2).

Figure 2. It's not trivial to see that the next line after betterFoo() is bar()

It's not trivial to see that the next line after betterFoo() is bar()

Flowcharts make the control flow easy to follow

Flowcharts free us from the redundant work of searching for the next step. On a flowchart, one can find the next icon by merely following the connecting lines (Figure 3). What is even better, the reader can trace all possible paths through an algorithm with a finger or a mouse pointer. This level of intuitiveness is not achievable with purely textual programming.

Figure 3. With DRAKON, it's obvious that bar() follows betterFoo()

With DRAKON, it's obvious that bar() follows betterFoo()

Flowcharts lack order

Despite the benefits of the visual programming, almost no one programs with flowcharts. Developers prefer indentation-based textual programming languages.

The main reason for that is that structured programming provides structure. In contrast, traditional flowcharts have no means to ensure order and hence represent the visual version of the dreaded goto operator. It is too easy to turn a flowchart into an unreadable tangle of arrows and boxes.

DRAKON is visual structured programming

The DRAKON visual language resembles flowcharts, but it's not precisely flowcharts anymore.

DRAKON introduces rules and guidelines that produce visually clean and consistent diagrams. These rules make DRAKON a visual equivalent of structured programming.

DRAKON is as superior to flowcharts as structured programming is to goto.

Figure 4. DRAKON vs. traditional flowcharts

DRAKON vs. traditional flowcharts

The benefits of DRAKON

Here are a few examples of DRAKON's mindfully crafted rules:

These and other rules improve the readability of a diagram by removing the visual noise.

Another benefit that these rules provide is consistency. The diagram flows the way the reader expects it to flow. For example, the next icon is always below the current one, so there is no need to scan the surrounding area to find the next step. Branching always goes to the right, never to the left. This predictability makes it possible to see the algorithm immediately without studying the layout of the diagram first.

Unique features

In addition to the improved clarity, DRAKON has some unique features, such as the silhouette and the ability to show the happy path of the algorithm.

The silhouette

The silhouette is a diagram layout that breaks up a large algorithm into smaller logical parts (Figure 5). The silhouette offers a convenient method to split a complicated function into steps avoiding the creation of many smaller functions. The silhouette follows the famous "divide-and-conquer" strategy without the overhead of passing variables in parameters and handling return values.

Figure 5. The silhouette

The silhouette

Showing the happy path

The happy path in DRAKON goes down the straight line on the left side of the diagram. The right side, in its turn, handles undesirable situations and errors. This convention is called "the further to the right, the worse it is." If the reader is interested only in the main course of the algorithm, he or she does not need to study the whole diagram; a glance on the left-hand part of the drawing is enough.

Figure 6. The happy path in DRAKON

The happy path in DRAKON

Drag-and-drop-free

The editing process in Drakon.Tech is drag-and-drop-free. Mouse clicks replace the ergonomically expensive drag-and-drop operations. Instead of constructing the diagram manually, the user clicks highlighted points on the canvas to direct the editor. The user does not draw the chart—the editor does.

That is why building a diagram takes so little time in Drakon.Tech.

Fast diagram creation

Easy to edit

Programming is a continuous process of improving the code, and the traditional development environments based on text offer rich editing possibilities. The developer can move around blocks of code using the clipboard and ride the undo-redo time-machine. No visual editor provides the flexibility and ease of use of a text IDE. No visual editor, except Drakon.Tech.

Editing algorithms in Drakon.Tech is even faster than rearranging code in a traditional text editor. Besides, the selection tool in Drakon.Tech makes sure that only a logically complete part of the diagram gets selected, copied, and pasted.

Easy diagram editing