This was created to meet a need of drawing data driven process diagrams. I wanted to use Harry Beck's classic London Underground map as an inspiration for the layout.

I attempted to follow as much of the TFL line diagram standards as possible: https://content.tfl.gov.uk/tfl-line-diagram-standard.pdf

This example is included in the code. You can see it straight away by pulling down the repo and then running

npm ci
npm start

It should open in your browser, and if not, visit http://localhost:3000

The tool is designed to draw diagrams from left to right only, and it expects a single starting point.

The tool expects a data structure containing two items, the branches of the process and the milestones. Each should be an object.

const data = {
  branches: {},
  milestones: {}
}

The branches object should contain one or more objects, each of which defines a a process branch. For example

const data = {
  branches: {
    brancha: {},
    branchb: {}
  }
}

Each branch should be defined as follows:

{
  name: "Name of the branch",
  seq: "",
  colour: ""
}

seq should be a comma-separated string containing the instructions to draw the process branch. Each comma-separated substring should conform to the following scheme:

Each of the milestones referenced in the sequences should be defined in the milestones object. Each milestone should have a name and optionally a colour as follows:

const data = {
  branches: {},
  milestones: {
    milestone1: {
      name: "Start of the process",
      colour: "red"
    }
  }
}

The colour attribute is optional and if not present the default colour is white

After defining your data object, including the tube-map is quite easy:

import Map from './Map';

// in your render method:
return (
  <Map 
    data={data}
    debug={false}
    dimensions={{
      width: 1000, height: 400,
      margin: { top: 0, right: 30, bottom: 30, left: 0 }
    }}
  />
)

Setting debug to true is useful if you want to see how the drawing is done or work out the source of problems. It will draw some helpers and a grid.

• Support for clicking milestones
• Support for 'tool-tip' style mouse overs on milestones

This project was bootstrapped with Create React App.