Skip to content
Web based argument mapping tools
Branch: master
Clone or download
Latest commit aa1ca94 May 13, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Add default height to canvas. Closes #5 May 12, 2019
LICENSE Update readme May 13, 2019
_config.yaml Death by trailing backslash Feb 22, 2017
reasons.min.js Refactor metakey press event so control-z works on windows Mar 14, 2019


Reasons is a digital argument mapping library designed for modern web browsers.

Argument mapping is the process of visually representating the logical structure of arguments. Argument maps are an important pedagogical tool in the analysis of argumentation and have been associated with substantial increases in student cognative gains.

Argument mapping forms the middle of the three stages of informal logical analysis - identification of truth claims within arguments, the analysis of logical structure, and synthesis of logcial structure into writen form. Reasons is designed to seemlessly integrate these stages into existing teaching pedagogies.


Embedding Reasons

Download the library and add a reference to it and any initial data just before the </body> tag of a HTML page.

  <div id="element"></div>


  <script src="reasons.js"></script>
    let graph = [
        {id: 'p1', text: "Circular arguments work"},
        {id: 'c1', text: "Circular arguments work"},
        {from: 'p1', to: 'c1', type: "because"},
        {from: 'c1', to: 'p1', type: "because"}

Reasons needs to know the target #element of the DOM in which to render the argument map. You could use body to append the map to the HTML body tag or #id to append it to a specific element id. The optional graph is just an array of nodes and edges representing the logical structure of an argument. Nodes and edges are plain javascript objects representing propositional claims and inferential support.

Saving an argument map is left as an implementation detail. Mapper.export() will return a Graph array from the map's current state.

Using Reasons

Reasons relies on a few simple commands to edit an argument map:

  • Double clicking on an empty canvas will create a new reason node.

  • Dragging one reason onto another creates an inferential connection. Dragging reasons that share an inferential connection onto one another will create a conjoined reason.

  • Double clicking on an element will open the edit dialog. Return or Esc will close the dialog.

  • A single click or Tab will select an element. Delete or Backspace will remove that element.

  • Ctrl z or ⌘ z will undo an action. Ctrl y or ⌘ y will redo it.

  • Ctrl + or ⌘ + will zoom in. Ctrl - or ⌘ - will zoom out.

Click for a demonstration

Development & Testing

Clone the repo and install the dependencies.

$ git clone
$ npm install

Running the tests requires additional dev dependencies listed in the package.json file under dev-dependencies including JSDOM and Canvas. . You will need to install all these using the command:

$ npm install mocha --save-dev
$ npm install jsdom --save-dev


$ npm test

Browser Compatibility

Reasons relies on the HTML5 Canvas library - as such, it will not work on legacy browsers. Touch events will be added in future releases. It has been tested and works on the following browsers:

  • Chrome on OSX (60+)
  • Firefox on OSX (54+)
  • Safari on OSX (11+)
  • Chrome on Windows
  • Firefox on Windows
  • Safari iOS (View only)
  • Safari iOS (Touch)
  • Internet Explorer on Windows
  • Chrome on Android

Contributing & Support

We gladly accept feature requests and bug fixes. If you have questions or problems, please open an issue.

Please read for details on our code of conduct, and the process for submitting pull requests to us.

How to Cite

If you are using this software in an academic capacity, please cite as:

Kinkead et al., (2019). Reasons: A digital argument mapping library for modern browsers. Journal of Open Source Software, 4(37), 1044,

You can’t perform that action at this time.