Click here to try it out!
Diagrammata is based on the JavaScript version of Paul Harrison's Ghost Diagrams, which he created in order to demonstrate the tile assembly algorithm described in the seventh chapter of his PhD thesis. If you're interested in the theory of computation -- the tile assembly process is Turing equivalent! -- or just want a more detailed picture of how the process works, it's well worth the read.

The short version, from the superficial standpoint of making interesting pictures, is that the program allows you to make (or randomly generate) four- or six-sided tiles which are then semi-randomly assembled into larger patterns. These are often beautiful and surprising (and surprisingly beautiful), and sometimes demonstrate allotropy, i.e., different kinds of patterns can arise from the same simple set of tiles.

I've been working on extending Harrison's original program for some time now. The main change from the original, other than restructuring the user interface, has been to add the ability to export generated patterns as minimal paths with all of the adjacent tiles "welded" together. (It was already possible to export the generated SVG with discrete tiles.) I've also added copious comments to the almost entirely comment-free original in the process of figuring out how everything worked and begun reorganizing the code. (If you want to hack on it yourself, the source is available here. and is licensed under the GNU GPL v2.0.) I'm currently working on adding a graphical tile editor and replacing the random tile generation routines.

How It Works

If you want to jump right in and explore, the easiest thing is just to select some of the pre-generated patterns in the preset dropdown or click the randomize button. Clicking on any of the control labels will trigger popups explaining their functions.

On the other hand, if you want a detailed introduction, read on...

The User Interface

The user interface is divided into three sections. The left-hand column contains all of the controls except for the tile set itself, which appears at the top of the right-hand side and can be edited directly there. The majority of the right side is the pattern area where tiles are assembled into larger patterns.

Action Buttons

The three buttons along the top control all of the action. (Re)Start begins the process of assembling tiles into a pattern. (This happens automatically when you select a preset.) Pause/Continue halts or resumes pattern assembly. And the Randomize button generates a set of random tiles and starts assembling them.


Right below the action buttons is the preset dropdown. Easily the most popular item for newbies and the casually curious, this is a list of several hundred tile sets with amusing names. Just select one and a pattern will be generated. Some tile sets will generate more than one kind of pattern, so try pressing the Restart button a few times.

Drawing Options

These all determine how the tiles and patterns are displayed. They can be changed both while a pattern is being generated and after generation is complete.

Export Links

Three buttons are provided to save patterns in various ways.

Randomization Parameters

These options govern the random tile generation process. Some of them are mainly useful if you're actually digging into the source code to hack Diagrammata yourself, but a few may be useful to non-programmers.

Designing Your Own Tiles by Hand

Once you get bored with playing with presets and randomly generated tile sets, you can try your hand at designing your own by typing them straight into the tile set box at the top of the screen.

Each tile set consists of a set of character strings separated by spaces. The commas are optional and included for the sake of easy readability. All of the tiles in the same set must be either four or six characters long, which implicitly determines whether square or hexagonal tiles will be generated. Each character determines a particular kind of connector for that side of the tile. Exactly which side doesn't matter because the program rotates tiles as needed to fit them into the pattern. They are specified in counterclockwise order, which does matter because tiles can be rotated but not mirrored.

The character codes are as follows: