Dr. José Raúl Romero Salguero
home   back  
jsUML2 Editor:
The online UML 2 diagramming tool using the jsUML2 javascript/HTML5 library
Latest news Description Screenshots Download Documentation Links Credits

Latest news

  • May 20, 2017. jsUML2 - the project is closed at the moment. Sorry but I am short of time. There are still some additional improvements that I expect to release asap (e.g. jsBPMN). Enjoy the latest release (#004)!
  • February 9, 2014. jsUML2 signicantly improved! Code errors fixed. New UML diagrams (object/instance, deployment, package). Profiles improved. New UML elements (generalizations, n-ary associations, etc.) and more style customization. The jsUML2 library, adapted to mobile devices (iOS, android).
  • December 6, 2012. New examples added.
  • October 31, 2012. Code refactorization and improvements; Some new UML elements added; new programmer's guide. Examples updated.
  • January 11, 2012. Behavioral diagrams improved; UML profiles added; code improvements (encapsulation, getters, setters, etc.). Examples updated.
  • October 10, 2011. New objects added to the jsUML2 library: sequence diagrams, state machines, activity diagrams. More features included, such as style edition.
  • March 8, 2011. Initial version: it serves as a demo of the jsUML2 library.



The jsUML2 editor is a first lightweight UML 2 diagramming tool developed using the jsUML2 library.

Since UML 2 has become a de-facto standard for modeling software systems, many tools are already available to allow the software modeler to draw their own designs using the different structural and behavioural diagrams that UML 2 provides. However, these tools are mostly implemented to be run on your own PC. This editor however can be executed locally by downloading the lightweight application to your own computer, or remotely by freely accessing this site.

The jsUML2 editor is not intended to serve as a end-user application, but as a 'dummy' demo of the power the jsUML2 library provides to the developer of any web application. For this reason, the reader should understand that the user interface is not a primary objective of the project, as it can be easily further extended. Thus, this editor just shows some basic features available in the library:
  • Visualization and edition of diagrams:
    • Use case diagrams
    • Package diagramas
    • Class diagrams
    • Instance/object diagrams
    • Component diagrams
    • Deployment diagrams
    • Sequence diagrams
    • State machines
    • Activity diagrams
  • Adapted to be used on mobile devices and responsive designs
  • Treatment of stereotyped elements
  • Raw serialization of the project
  • Generation of images containing the current diagram
  • Support for managing multiple diagrams in the same model
  • Profiling capabilities, i.e. customize your diagrams using extension definitions
Note that the diagram edition is a configurable feature. You could also create your diagrams without edition capabilities (i.e. read-only diagrams), or customize your models according to your needs (i.e. color, position, distribution, fonts, type and number of elements, etc.).

IMPORTANT NOTE: Make sure you are using the latest version of your browser (Opera, Mozilla Firefox or Google Chrome). Otherwise, you may experience unexpected results in the running of the library for reasons beyond of our development.

Have a look at the following simple examples, and check how easy it is to write a piece of code!

For a more complex example:

Try the jsUML2 editor now! (release 3)



Export/Import Use case diagram
Export/import a model (one or more diagrams) Use case diagram

Class diagram Component diagram
Class diagram Component diagram

Package diagram Deployment diagram
Package diagram Deployment diagram

Sequence diagram UML profiles
Sequence diagram UML profile



The latest public version of the library can be downloaded here, distributed under the GPL3 license. Don't hesitate to visit this site if you need further information on the license. In the near future, I expect to distribute the library from a GitHub repository... (pending task :).

IMPORTANT: Notice that we freely but gladly share our effort with you, so please send us any modification or addition to the library or editor code. We also appreciate if you report any tool or website that you make using this library. This will cost you only a very short time, but would help us to improve the library in the future. Thank you!



You can read the programmer's guide online.

Note 1: The current initial draft of the programmer's guide is only in Spanish. We hope to provide an English version soon.

Note 2: We would be happy if you contact us to tell about your experience with jsUML2. Notice that we are working on the library and permanently improving and extending it. This software is PROVIDED AS IS, and we do not (cannot) provide any further technical support to your developments.



  • The jsUML2 library project. [+ - No source code]
  • The HTML5 specification at W3C. [+]
  • The latest UML 2 specification at OMG. [+]



If you have any question, improvement or new development to notify using the library, please contact us at jrromero -at- uco.es.

Ideologist and developer:
José Raúl Romero, PhD.
Rubén Salado Cid, MSc.
Former developer/s:
Jesús Pérez Navarro, BSc.
Alejandro Arrabal Hidalgo, MSc.
Rafael Molina-Linares, MSc.
Martin Vega-Leal, BSc.


We want to thank all the developers and users that have commented to us about their experience with the library jsUML2. Also, we want to thank Dr. Antonio Vallecillo (University of Málaga, Spain) and Dr. Jordi Cabot (ATLAS research group, INRIA, Nantes, France) for their insightful and disinterested support. Finally, we want to acknowledge the following jsUML2 users and developers:
  • Antonio Villegas Niño and José María Gómez Hernández (Universitat Politècnica de Catalunya - Barcelona Tech, Spain) for their code improving font styles and their ideas and suggestions about UMLGeneralizationSet and UMLNAssociation.
  • Indra (Sofia2 IoT project, Spain) for their use of the library to create an ontology model viewer.