ArchFlow

The architecture of MyWorkLog

This map shows the app's source code: every file is a tile, every line a load relationship. When a page pulls in a script or a stylesheet, that line is drawn here.

How to read it

Colour means exactly one thing — the kind of file:

• Pages and templates (HTML)
• Program code (JavaScript)
• Styling (CSS)
• Configuration and data (JSON)

A connecting line takes the colour of whatever it pulls in. The frames group what belongs together in the app — dashboard, history, report book and so on.

In the 3D view the app is a neural network: every group a glowing region, every file a neuron. The bigger the neuron, the more links the file has, and you can watch along the nerve pathways what gets loaded. Drag to rotate, right mouse button or Shift to pan, scroll to fly in.

Controls

Drag to pan, scroll to zoom. In the overview the names stay hidden because they would be a few pixels tall there; zooming in brings them back. Clicking a tile shows what it loads and who loads it.

• /search
• 0fit everything
• +−zoom
• EscClose

Where the data comes from

The map is not maintained by hand. An analysis tool reads the repository, follows the references between files and writes the result into a file that this page loads. So it shows the state of the last run, not a hand-drawn wish.

The source code of MyWorkLog is open. Whatever sits here as a tile, you can read there as a file — the map is the overview, the repository is the truth.