JavaScript-based DSM Utility

Systems Thinking | March 16, 2025

Note: This page and GitHub will be updated in the future as I have time to add functionality to the DSM utility.

Overview

When it comes to systems thinking, often it is said to be good to implement. Many have not learned tools to actually work towards applying the fundamentals of said field. How should we really approach analyzing systems with real, rigorous tools? There are several approaches, including design structure matrices (DSM), system dynamics (SD), ordinary differential equations (ODE), and more. One large benefit of the DSM over the other two methods is the relative ease with which it can be employed, while capturing complex feedback loops and interdependencies between tasks or system elements.

A DSM is a matrix consisting of several subelements of a system, sometimes tasks in a project, assumed to be sequenced, and where a mark at the intersection of two elements represents a dependency. Depeneding on the use case and field under consideration, there are various ways of semantically describing this relationship. For a given system element, you can say if you see a marked intersection that the subelement 'depends on' the intersected element. You may also say it 'requires output from' or 'requires information from', or 'requires the completion of' the intersected element or task. In this way, we can see for a given element how it it impacted by elements earlier and later in the sequence. In order to minimize impacts that could result in larger negative outcomes, we partition the DSM and re-sequence the elements in order to provide an optimized sequence. An optimized DSM is one that minimizes some negative metric, maximizes some positive metric, or simply seeks to reduce the amount and depth of feedback cycles or large feed forwards in the DSM.

Utility

Get the code on GitHub: JSDSM Code

NOTES:

To change ONLY the sequence, update the JSON 'order' attribute of the associated element.
To change the dependency structure, add a new array to the dependencies attribute with an associated strength.
After updating the JSON text, click 'regenerate' to update the grid.

EDITABLE JSON INTERFACE

{
    "rootElement": {
        "subElements" : [
            {
                "identifier": "A",
                "order": 1,
                "dependencies": []
            },
            {
                "identifier": "B",
                "order": 2,
                "dependencies": [["C",1],["E",1]]
            },
            {
                "identifier": "C",
                "order": 3,
                "dependencies": [["E",2]]
            },
            {
                "identifier": "D",
                "order": 4,
                "dependencies": [["B",3],["E",2]]
            },
            {
                "identifier": "E",
                "order": 5,
                "dependencies": [["G",3]]
            },
            {
                "identifier": "F",
                "order": 6,
                "dependencies": [["A",2],["D",1]]
            },
            {
                "identifier": "G",
                "order": 7,
                "dependencies": [["C",3],["F",1]]
            }
        ]
    } 
}