Yuml-diagram NPM

yUML diagrammer

Allows the creation of offline UML diagrams based on the yUML Syntax.

Example

Features

Currently, the following diagram types are supported:
- Class
- Activity
- Use-case
- State
- Deployment
- Package
- Sequence
Additional directives for altering diagram type and orientation
Embedded rendering engine: No need to call an external web service

yUML syntax

Please refer to the wiki page

Installation

This library is published as a npm package here. For installing use:

npm install yuml-diagram

Usage example

const yuml_diagram = require('yuml-diagram');

var yuml = new yuml_diagram();
var svgLightBg = yuml.processYumlDocument(yumlText, false);
var svgDarkBg = yuml.processYumlDocument(yumlText, true);

Try a live example with RunKit: https://runkit.com/embed/r21r931hzoqm

Browserified distribution

For using this library in a browser application, include the script at /dist/yuml-diagram.min.js in your project.

The following example shows how to use it:

<html>
    <head>
        <script src="yuml-diagram.min.js"></script>
        <script>
            function loadSvg()
            {
                var yumlText = 
                    `// {type:class}
                    [A]->[B]`;

                // Generate the diagram
                var yuml  = new yuml_diagram();
                var svg = yuml.processYumlDocument(yumlText, false);

                document.body.innerHTML = svg;
            }
        </script>
    </head>
    <body onload="loadSvg();">        
    </body>
</html>