DaS Workbench

DaS means “Diagrams as Syntax”.

This essay gives a brief overview to a simplistic tool called daswb.

The interesting bits of this tool are the various phases.

The HTML surrounding the phases is very rudimentary allowing discussion of the phases without interference from UX details.


The DasWB inputs a .drawio file and outputs a factbase in PROLOG format.


Download ohm.min.js and

Other Fields

A number of yellow-ish input fields have been retained to allow easier copying and discussion below.


The DasWB uses Ohm-JS and various JavaScript functions found in various JavaScript files

  • support.js contains utility functions used by the workbench
  • glue.js contains the raw JS code for the Glue tool used by the workbench in conjunction with Ohm-JS
  • scope.js contains a simplistic scope stack class used by glue code
  • ohm.min.js is the JavaScript code for Ohm-JS (a PEG parser)
  • pako_inflate.js is the JavaScript code for pako inflate

Empty DasWB

Open a browser and load the File “daswb.html”.

The empty workbench shows a number of fields and one button (scroll down to the bottom).

The yellow-ish fields are inputs to the workbench.

The gray-ish fields are outputs generated by the workbench.

We only need to populate one field - the source field with a raw .drawio file.

The other input fields (yellow-ish) are meant for grammar debugging and for the discussion below.

2021-07-30 Empty daswb.png

DaSWB Populated with a Drawio File

We created the file final.drawio. It looks like:

2021-07-30 Daswb overview final drawio.png

Copy/paste final.drawio into the source field of the workbench.

2021-07-30 Daswb populated with final drawio.png

DasWB Generated Code

Scroll to the bottom and push the generate button.

2021-07-30 Daswb generate overview.png

The factbase is generated and sorted into the final field sorted factbase.

The steps for this process will be discussed in subsequent essays.



See Also