Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

yUML diagrammer

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

NPM Status github Build Status

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