system diagram tool for use in CLEAR project.
JavaScript Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



This project consists of two components: MySystem and the Sinatra app.

MySystem is the core product that described below in the section “MySystem”, and it gets built from src/ and other directories into public/.

The whole thing is a sinatra app (called MySystem-Sinatra here on) runnable from the top directory, which gets built to the appspot/ directory and deployed from there to Google App Engine.


Part of the CLEAR project, MySystem is a system diagraming tool. Part of the goal is to be a light-weight javascript
component to be used inside something like mozSwing (?)

See the basecamp docs for the project description for CLEAR
See Alex’ Narratives in this spreadsheet

Ruby & Gem dependencies

The application uses bundler to manage gem dependencies. This is required to run on googles app engine.
You can also run sinatra locally using the bundled gems using
<pre> bundler exec ruby app.rb </pre>

You can also setup a gemset using rvm
<pre> rvm use <your favorite ruby version> rvm gemset create mysystem rvm gemset use mysystem rvm gemset import mysystem.gems </pre>

If you are not using RVM, you can roll the dice and try: rake gems:install — which isn’t very verbose, but
should install tall the gems listed in mysystem.gems

Javascript Dependencies

Mysystem is derived from WireIt
Which uses YUI

We just switched to JQuery and JQuery UI for our own work.

(note: that currently all dependent libraries are included in this repo, and thats not good….)
(note: We are working on reducing dependancies on these libraries.)

Building for distribution

If you have ruby installed, you should also install a few gems to run the distro rake task

  • sudo gem install --remote sprockets
  • sudo gem sources -a (Not clear as of 04/14/2010 why/whether we need this)

If you need to make a compact and easy to distribute version of MySystem, you can use Rake to build the system into public/ directory. Building is not required; You can preview the work simply by opening src/mysystem-dev.html in your browser.

  • rake combine:all
  • open ./public/mysystem.html*


JavaScript lint: rake jslint
(JavaScript lint must be installed, with jsl in path:

I had installed visionmedia-jspec with sudo gem install visionmedia-jspec
but then I copied the spec javascripts and css flies into the tests/ directory.

All test can be run by opening ./test/ in a browser.
After you have built the dist directory, you can run test on the dist opening ./test/spec.dist.html.


  1. authorable pallet of icons / node types.
  2. decouple view from models
  3. code documentation
  4. more tests
  5. google gears integration.
  6. means to handle page-out data saving.
  7. Subsystems: The ability to add ‘sub-modules’ inside of modules (nested modules)
  8. Clean up dependencies on YUI if possible.
  9. restructure this repository
  10. ?? more!


This is a simple server container/backend for the MySystem pre-prototype demo.
It uses Google App-Engine, and DataMapper.


Uses Google App Engine Gem:
sudo gem install google-appengine

Uses DataMapper


Gems installed by editing Gemfile and running ‘appcfg.rb bundle .’ are checked into github. (these gems are local in ./.gems/gems/)

  1. install the google-appengine gem : sudo gem install google-appengine
  2. Follow other instructions at
  3. try out the app with ruby ./app.rb or at the console with irb require ‘config’
  4. run in developer mode with “dev_appserver.rb .” (intsalled with google-appengine gem)
  5. deploy the application with “appcfg.rb update .”
  6. the application will be available at


rake appspot:sinatra_app builds a sinatra app deployable to appspot into the appspot/ directory.


rake appspot:deploy deploys the app to Google App Engine.


(1) Locally:
Go to top directory and do ruby app.rb
Open “http://localhost:4567”

(2) Locally in Google App Engine development environment:
Go to top directory and do dev_appserver.rb appspot
Open “http://localhost:8080”

(3) From Google App Engine: