RaphUML is a JavaScript library for drawing UML diagrams in the browser using the Raphael graphics library. The idea is to be able to specify UML class and sequence diagrams in HTML using simple DSLs and have them nicely rendered using vector graphics. For example, a class diagram might be implemented like this:
<pre id="myClasses">
class Foo
--
+id: int
+name: String
class Bar
--
+id: int
assoc Foo(1) to Bar(1..*)
</pre>
<script>
$(function () { $('#myClasses').classDiagram(); }
</script>
The DSL for sequence diagrams will be similar to that used by Web Sequence Diagrams, which would look something like this:
<pre id="mySeq">
participant foo "Foo"
participant bar "Bar"
foo -> bar
</pre>
RaphUML can currently render class diagrams built programmatically by the Javascript API. Classes must be explicitly positioned on the diagram. I hope to implement a layout algorithm that will position the classes nicely by default.
Next steps:
- create some demo pages
- work on sequence diagrams
- implement an automated layout algorithm
Building RaphUML involves generating the parser from the parser
definition (*.par
) files, then assembling RaphUML from the generated
parsers and other Javascript files. To do this you need the following:
- Java
- Ant, a Java-based build utility
- Rhino, a Javascript interpreter. This is used to run JS/CC in order to generate the DSL parsers.
- JS/CC, a parser generator in Javascript
The first three can be installed in Ubuntu with sudo apt-get install ant rhino
. For other operating systems you're on your own.
Once installed, ensure that the ant
executable is on your path. The
build script assumes that the Rhino executable is available at
/usr/bin/rhino
, and that JS/CC is available at /opt/jscc
. If this
the the case for you, simply change into the RaphUML directory and run
ant
. If not, you'll need to specify the locations of these utilities
on the command line like so:
ant -Drhino=/path/to/rhino -Djscc=/path/to/jscc-dir
This should create target/RaphUML.js
.
To test, load the desired HTML file from the test
directory into your
browser.