Skip to content

Latest commit

 

History

History
82 lines (64 loc) · 2.91 KB

README.md

File metadata and controls

82 lines (64 loc) · 2.91 KB
Raw

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