jumly

v0.2.1

Published

4 years ago

Library to render UML diagrams

Downloads

0High
0Medium
0Low

tmtk75

README

JUMLY is a JavaScript library.
Using JUMLY, you can easily embed UML diagram on your HTML document.
All you need are 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 http://jumly.tmtk.net/.
The auther's blog is http://tmtk75.github.com.

A trait

JUMLY doesn't render diagram as image like PNG or SVG, but render as combination of DOM with CSS on browser. You can calibrate any CSS parameters like font-size, padding, margin, etc using CSS at runtime.

Actually you can also usual image data like PNG and JPEG. They can be generated by a CLI or REST API.

Purpose

JUMLY is convenient to render

Getting Started

Copy following code, paste it at the place of your HTML document, and open the document.

<head>
<script src='//code.jquery.com/jquery-2.1.0.min.js'></script>
<script src='//coffeescript.org/extras/coffee-script.js'></script>
<script src='//jumly.tmtk.net/public/jumly.min.js'></script>
</head>
<body>
<script type='text/jumly+sequence'>
@found "You", ->
  @message "meet", "JUMLY"
</script>
</body>

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://github.com/creationix/nvm.git ~/.nvm
$ . ~/.nvm/nvm.sh
$ nvm install 0.10.20

Build jumly

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

$ git clone https://github.com/tmtk75/jumly.git
$ 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/jumly.coffee 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
$ ./app.coffee

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.

License

JUMLY v0.2.1 is under MIT License.

History

0.2.1, Jan 25, 2015
- Fixed several issues. #8 #18 #19 #23 #24 #31 #35
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
- Fixed https://github.com/tmtk75/jumly/issues/4
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

jQuery http://jquery.com/
CoffeeScript http://coffeescript.org/
node.js http://nodejs.org/
express http://expressjs.com/
GitHub https://github.com/
heroku https://www.heroku.com/
jade http://jade-lang.com/
Stylus http://learnboost.github.com/stylus/
Markdown https://daringfireball.net/projects/markdown/
GRUNT http://gruntjs.com/
webpack http://webpack.github.io/
Karma http://karma-runner.github.io/