It mainly covers sequence diagrams and flowcharts. It offers an online editor but you can also directly reuse the packaged Mermaid API to integrate Mermaid in your own developments. It depends on d3 and dagre-d3 for providing the graphical layout and drawing libraries. Similar to nomnoml, Mermaid’s main focus is the generation of diagrams from text files, in this case via a simple markdown-like script language. The only dependencies are lodash and dagre. Nomnoml is a well-known textual modeling tool able to render UML diagrams from textual descriptions, but it also offers a standalone JavaScript library you can use to render diagrams on your own web page. You have also automatic graph layout algorithms available. To facilitate the use of the API, they heavily documented it. It comes with a rich set of predefined shapes (for workflow diagrams, process schemas, class diagrams, trees,… check their collection of samples) and the possibility to define your own shapes and customization options (e.g. The component can use either jQuery or Microsoft Ajax® library for browser independence layer and type system implementation. The diagram tool is written 100% in JavaScript and uses the HTML5 Canvas element for drawing. The tool was discontinued in 2017 but it remains a strong option for all of you looking for a UML JavaScript library. With support of style edition for diagram elements (size, position, color, etc.), stereotypes definition, import/export of UML diagrams to XML and image generation. In particular, it supports all major UML types of diagrams: It offers a broad range of interesting features for UML-specific models. The jsUML2 library provides an API to allow web developers to include editable diagrams in their own websites making use of the HTML5 technologies supported by the newest web browsers, as well as by current mobile devices. Its main objective is to provide web developers an easy way to visualize and edit UML models in their our own websites, without other external dependencies and fully executable on the client-side via the browser, unlike other tools in this list. We covered extensively GoJS in this post.Ī HTML5/javascript library for UML2 diagramming. The API is very well documented to make sure you can start using in no time. They provide over 150 interactive samples to help you get started with diagrams such as BPMN, flowchart, state chart, visual trees, Sankey, and data flow. GoJS offers many advanced features for user interactivity such as drag-and-drop, copy-and-paste, transactional state and undo management, palettes, overviews, data-bound models, event handlers, and an extensible tool system for custom operations. GoJS makes constructing diagrams of complex Nodes, Links, and Groups easy with customizable templates and layouts. GoJS is a feature-rich JavaScript library for implementing interactive diagrams across modern browsers and platforms. The backends may be used as is, or they may be embedded into an existing server application in one of the supported languages. The client requires a web server to deliver the required files to the client or can be run from the local filesystem without a web server.
The client software is a graph component with an optional application wrapper that is integrated into an existing web interface.
The mxGraph package contains a client software, written in JavaScript, and a series of backends for various languages. The library is developed since 2005. mxGraph uses no third-party software, it requires no plugins and can be integrated into virtually any framework. This library is used, for instance, in Draw.io. mxGraph is a fully client-side library that uses SVG and HTML for rendering your models. MxGraph is an interactive JavaScript HTML 5 diagramming library.
It has also a commercial version (Rappid, see below) JointJS can be used to create either static diagrams or fully interactive diagramming tools and application builders. JavaScript libraries for drawing UML (or BPMN or ERD …) diagrams JointJS