Helper method to visually display SystemJS dependency relationships using http://yuml.me/

system.yuml.js

System.trace = true;
window.showModuleRelationships = function () {
  var modules = Object.keys(System.loads)
    .map(function (moduleName) {
      return System.loads[moduleName];
    });

  function displayName(module) {
    return module
      .replace(System.baseURL, '')
      .replace('jspm_packages/github/', '')
      .replace('jspm_packages/npm/', '')
      .replace('app/js/', '')
      .replace('controllers/', '')
      .replace('angular/', '');
  }

  var moduleDefinitions = modules.map(function (module) {
    var name = displayName(module.name);
    return '[' + name + '|' + 'type: ' + module.metadata.format + ']';
  });

  var dependencyDefinitions = [];

  modules
    .filter(function (module) {
      return module.deps.length > 0;
    })
    .forEach(function (module) {
      var name = displayName(module.name);

      var dependencies = module.deps
        .map(function (dependency) {
          return System.normalizeSync(dependency, module.name, module.address);
        })
        .map(displayName)
        .map(function (dependencyName) {
          return '[' + name + ']->[' + dependencyName + ']'
        });

      dependencyDefinitions = dependencyDefinitions.concat(dependencies);
    });

  var definitions = moduleDefinitions.concat(dependencyDefinitions);

  window.open('http://yuml.me/diagram/plain/class/' + definitions);

};

To use, place this snippet before the call to System.import():

<script src="/jspm_packages/system.js"></script>
<script src="/config.js"></script>

<script src="/System.yuml.js"></script>  // snippet is here

<script>
  System.import('app');
</script>

Then in the console, run showModuleRelationships()

Note: Do not use this in a production environment.

This is gold! Thanks! 👍