The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Rendering engine for UML diagrams in JavaScript
    Filed under 

    • 🔾22%Overall
    • 315
    • 34.4 days
    • 🕩45
    • 👥1

    README Build Status

    JUMLY is a JavaScript library.
    Using JUMLY, you can easily embed UML diagram on your HTML document.
    All you need is just two things you use everyday.

    • Text editor you get used to use.
    • A modern browser like WebKit-base brwoser and Opera.
      (working for Firefox now)

    For more information, see
    The auther's blog is

    Trait and Purpose

    Trait I'd like to tell you is that JUMLY doesn't render diagram as image like PNG or SVG, but render as combination of DOM with CSS on browser. You can easily calibrate any CSS parameters like font-size, color, padding, margin, etc using CSS at runtime.

    Actually you can also usual image data in PNG and JPEG. They are generated by a CLI or REST API, so JUMLY is convenient way to embed small diagrams in your HTML documents like README file like below.

    I aim to develop JUMLY to render small UML diagrams in handy without any heavy UML modeling tools. A UML diagram is usually more understandable than a tedious text. It's better that people can casually use UML digrams in every documents.

    Getting Started

    Copy following code, save as a file, and open the file with your browser.

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

    Here is a minimal sample.

    How to build

    Requiring node.js v0.10.20 or upper.

    node.js installation

    nvm is good to get it.

    $ git clone git:// ~/.nvm
    $ . ~/.nvm/
    $ nvm install 0.10

    Build jumly

    In order to build jumly.js, jumly.css and minified ones, it's shortly steps.

    $ git clone
    $ cd jumly
    $ . .env
    $ npm install
    $ make build

    ./public/jumly.min.js is generated.

    How to develop

    Written in CoffeeScript and stylus. They are in ./lib directory. ./lib/js/ organizes other *.coffee files in order.

    On a webapp, which is described at next, you can use them without build. Editing *.coffee and *.styl, reload a page of webapp, and your change will make effect.

    How to launch the webapp

    You can launch the webapp using express.

    $ . .env
    $ git submodule update --init
    $ ./

    Please access to localhost:3000 thru your browser.

    How to run specs

    With browser

    $ make test

    Compile spec files, and open ./spec/index.html with your browser.

    With Karma

    To compile them,

    $ . .env
    $ build karam
    $ open spec/index.html

    jasmine is used for writing specs.


    JUMLY v0.2.2 is under MIT License.

    JUMLY v0.2.2, 2010-2015 copyright(c), all rights reserved Tomotaka Sakuma.


    • 0.2.4, Jul 21, 2015
      • Workaround for #40
    • 0.2.3, Apr 1, 2015
    • 0.2.2, Feb 7, 2015
      • Fixed an issue for image width
    • 0.2.1, Jan 25, 2015
    • 0.2.0, Jan 4, 2015
      • Followed CommonJS for module system
      • Use Karam for test
    • 0.1.5-2, Mar 12, 2014
      • Removed z-index from .sequence-diagram .lifeline .line for #28
    • 0.1.5-1, June 23, 2013
      • REST API to generate image
    • 0.1.4, May 20, 2013
      • Replaced canvas with svg
    • 0.1.3b, Apr 27, 2013
      • API JUMLY.scan (beta)
    • 0.1.3a, Mar 29, 2013
      • Robustness diagram prototyping
      • Fixed pollution of jQuery namespace with some funcitons
    • Use GRUNT for bulid, Mar 10, 2013
    • 0.1.2b, Jan 9, 2013
      • @fragment directive
    • 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 published Dec 10, 2012
    • 0.1.1 Nov 29, 2012
      • support @note directive
      • adjust margins and spaces in stylesheet
    • 0.1.0 Nov 23, 2012 -- initial release
      • support sequence diagram

    Special Thanks

    Show All