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>

Contributing

For pull requests, please read CONTRIBUTING.md

Have a nice diagram to show? Please send it for publishing here!

Credits

Syntax and some examples taken from yuml.me
This package embeds a Javascript port of Dot/Graphviz called viz.js
The yuml-to-dot translator is loosely based on a Python project called scruffy
The new sequence diagram is based on this github fork