JUMLY

JUMLY is a JavaScript library, UML diagram rendering engine. Using JUMLY, you can easily embed stylish UML diagrams on your HTML document. You need nothing to use JUMLY except for modern browser.

@found "You", ->
  @message "Think", ->
    @message "Write your idea", "JUMLY", ->
      @create "Diagram"

Getting Started

Let's say you already have a document. In case you put a sequence diagram into it, put next four lines in your <head>.

<link href='https://jumly.herokuapp.com/release/jumly.min.css' rel='stylesheet'/>
<script src='http://code.jquery.com/jquery-2.0.2.min.js'></script>
<script src='http://coffeescript.org/extras/coffee-script.js'></script>
<script src='https://jumly.herokuapp.com/release/jumly.min.js'></script>

Then, put a next <script> element into the place where you want to put at.

<script type='text/jumly+sequence'>
@found "You", ->
  @message "get", "JUMLY"
</script>

That's all. It's easy, isn't it?

You'll get the above one there. To get it, you only write just eight-lines. It's certainly that you can add another or more diagrams.

Here is a HTML file for one of simplest examples. Take a look at the source.

These things before?

To do a lot
Getting many small diagrams which have a few icons and relationships. Then you launched an UML modeling tool, and create a new project, and make a model, ...
Unsightly looks
There was something you don't like at diagram which application generated. For instance, color, size, line width, font, space b/w objects and so on.
Not reusable
Wanted to copy a string, like a class name and something phrase, from UML note icon. If it's an image, you never do that.
What changed?
Can't see difference b/w old diagram and updated one.
Not viewable
Can't open a file created by modeling application on other computer you don't usually use.

Why you like JUMLY

Easy to use
To use JUMLY, you need only a web browser and a text editor you get used to.
Fast for everything
The time you get a diagram since you want it, the time JUMLY render diagram, the time you know JUMLY and or so are shorter.
Everything is text
Input data is text, and output format is text/html.
It's great advantage to proprietary binnary data format, because we can use SCM like Subversion/Mercurial/Git to manage and version the data.
High quality
You can get keen designed diagrams, especially on MacOSX
Based on DOM, jQuery and HTML5/CSS3
Diagrams JUMLY renders are composed with DOM, jQuery and HTML5/CSS3, so you've already understood the way to handle them. For example, you can edit font-size and color of icons or animate them applying CSS3.
CoffeeScript-base DSL
DSL of JUMLY is completely CoffeeScript. If you need, you can use "if", "for" or so its statements.
Light and small
Now the size of script is 56KB, and the size of stylesheet is 16KB. They are relatively lighter than the UML modeling tools =)

New Feature

Robustness diagram is coming soon. Actually, I'm considering the DSL and layout logic now...

@actor "User" :-> @view "Browser"
@view "Browser" :-> @controller "Server"
@controller "Server" :-> @entity "Database"

Examples

@found "User", ->
  @message "search", "Browser", ->
    @create asynchronous:"connection", "Web Server"
    @message "GET", "Web Server", ->
      @message "find the resource", -> @reply ""
    @reply "", "User"
    
@found "You", ->
  @alt
    "[found]": ->
      @loop ->
        @message "request", "HTTP Server"
        @note "NOTE: This doesn't make sense :)"
    "[missing]": ->
      @message "new", "HTTP Session"
  @ref "respond resource"
  
@found "Browser", ->
  @message "http request", "HTTP Server", ->
    @create "HTTP Session", ->
      @message "init"
      @message "aquire lock", "Database"
    @message "do something"
    @message "release lock", "Database"
    @reply "", "Browser"
    
@found "Browser", ->
  @alt {
    "[200]": -> @message "GET href resources", "HTTP Server"
    "[301]": -> @ref "GET the moved page"
    "[404]": -> @ref "show NOT FOUND"
  }
@find(".ref").css(width:256, "padding-bottom":4)
  .find(".tag").css float:"left"
get_the_moved_page.css "background-color":"#80c080"
show_not_found.css "background-color":"#f0b0b0"

Document

  • Mar 24, 2013
    • Dropped Japanaese page (maintenance was troublesome...)

Examples

History

  • 0.1.4, May 20, 2013
    • Replaced canvas with svg
  • 0.1.3c, Apr 29, 2013
  • 0.1.3b, Apr 27, 2013
  • 0.1.3a, Mar 29, 2013
    • Robustness diagram prototyping
    • Fixed pollution of jQuery namespace with some funcitons
  • 0.1.2b, Jan 9, 2013
  • 0.1.2a, Dec 31, 2012
  • Try JUMLY, Dec 29, 2012
    • interactive demo for sequence diagram
  • 0.1.2, Dec 29, 2012
    • change CSS class name for .participant, which was .object
  • Reference Manual r1, Dec 10, 2012
    • about some directives of sequence diagram
  • 0.1.1, Nov 29, 2012
    • support @note directive
    • adjust margins and spaces in stylesheet
  • 0.1.0, Nov 23, 2012
    • support sequence diagram

Requirement

JUMLY is tested on jQuery 2.0.2 and CoffeeScript 1.6.3, and they or later are recommended on you.

WebKit-base browser like Google Chrome and Safari, Gecko-base browser like Firefox, or Opera are recommended. Internet Explorer has never been tested.

License

JUMLY v0.1.4 is under MIT license.
Perhapse, license for newer versions may be changed to another one in the future. In that case, you can still use old version's JUMLY with MIT license.

Privacy Policy

This site utilizes Google Analytics (GA) and provides first party cookie of GA to your browser. I just only use the data, which is collected by GA, in order to improve the contents, accessibility, usability and readability of this site. And also about the data, I never disclose and use it for another purpose.