Interactive diagrams are expensive to build, requiring significant programming experience. The cost of building such diagrams often prevents novice programmers or nonprogrammers from doing so. We present user-guided techniques that transform a static diagram into an interactive one without requiring the user to write code. We also present a tool called EDDIE that prototypes these techniques. We evaluate EDDIE through: (1) a case study in which we use EDDIE to implement existing real-world diagrams from the literature and (2) a usability session with target users in which subjects build several diagrams in EDDIE and provide feedback on EDDIE’s user experience. Our experiments demonstrate that EDDIE is usable and expressive, and that EDDIE enables real-world diagrams to be implemented without requiring programming expertise.


This is a quick, 30 second overview of the technique:

This is a ~3:00 minute demonstration:


User-Guided Synthesis of Interactive Diagrams.

John Sarracino, Odaris Barrios-Arciga, Jasmine Zhu, Noah Marcus, Sorin Lerner, Ben Wiedermann. (to appear in) CHI '17. pdf, website, slides


Interested in using EDDIE and/or taking a look at the source code? It's all client-side so if your computer is sufficiently similar to our development environment, it should work relatively well on your web browser.

The standard research prototype caveats apply:

  • HTML5/canvas is required and modern Chrome is recommended.
  • It's full of bugs -- if something breaks, the "fix" is to refresh and start over.
  • It's missing billions of features. In particular, we're currently adding undo/redo, load/save, exporting standalone webpages, and more.

If there's a feature you need or passionately desire, please send me an email!


The latest version of EDDIE is live here.


Coming soonTM