Generate Graphviz dataflow graphs for your Ember app.
Given some templates:
app/templates/
├── application.hbs
└── components
├── x-bar.hbs
└── x-foo.hbs
Running ember trace:
ember trace app/templates/application.hbs | dot -Tpng > docs/images/example.png
Will produce something like this:
These graphs can be useful for analysing how data flows through Ember apps. Put another way, they’re a visual tool for answering questions like “where did this value come from?” and “who owns it?”.
ember install ember-trace
Then download and install GraphViz.
ember trace app/templates/my-route.hbs
This command emits the graph to stdout in Graphviz DOT format. You’ll
probably want to pipe it straight into the dot
program to generate the graph.
ember trace app/templates/my-route.hbs | dot -Tpdf > graph.pdf
Some ember-cli addons emit deprecation warnings on stdout, so you’ll want to
strip those before handing it over to dot
.
ember trace app/templates/my-route.hbs | sed 's/^DEPRECATION.*$//g' | dot -Tpdf > graph.pdf
Created as an experiment in early 2018 by the Human Interface Team at Heroku.