feature-model-viz

This tool takes a FeatureIDE feature model (like this) and visualizes it as a graph (similar to FeatureIDE's feature model editor). Configurations (i.e. feature selections) can be visualized as well.

Click here for an online demonstration. You should be able to load any consistent FeatureIDE feature model.

Intention

Similar to ekuiter/feature-configurator, this project brings an aspect of feature-oriented software development into the browser.

It may be used in concert with feature-configurator to visualize a user's feature selection or reason about a feature model without installing Eclipse and FeatureIDE first.

Implementation

Feature models (given as XML data) are first transformed into the DOT language, then passed to Viz.js (Graphviz compiled for JavaScript) to create an SVG representation of the graph. Finally, this SVG is injected into the web page.

Note that Viz.js is quite a heavy library (~1.6MB). It is recommended to enable gzip on the server, this way only ~500KB are transferred. If you need a server-side solution, you may have a look at graphp/graphviz.

Usage

Run npm install feature-model-viz in your project directory (NPM required). Then include the bundle.js file as shown in the example below. Additionally, jQuery needs to be included.

XmlModel

To retrieve and parse a feature model, use the XmlModel class:

var xmlModel = new XmlModel(
  $.parseXML("<featureModel>(...)</featureModel>") // you can use jQuery to parse an XML string
);
// ... use xmlModel ...

To load a feature model stored on the server at ./model.xml:

$.ajax("model.xml").then(function(xml) {
  var xmlModel = new XmlModel(
    xml // this is already parsed by jQuery
  );
  // ... use xmlModel ...
});

ModelViz

Then use the ModelViz class as follows to render the feature model graph to a target element:

var modelViz = new ModelViz( // the model visualization
  model, // contains the feature model and its constraints
  { // additional options
    target: $("#some-element"), // where to render the configurator, defaults to $("body")
    size: "100%" // optional size (CSS width and height) to override Graphviz default
  },
  Configuration.fromXml(model, configurationXml) // optional configuration, can be omitted
);

Example

This example loads a given feature model and then renders a visualization for it. You can try it online.

License

This project is released under the LGPL v3 license.