Skip to content


Repository files navigation

yUML diagrammer

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

NPM Status github Build Status



  • 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


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:

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:

        <script src="yuml-diagram.min.js"></script>
            function loadSvg()
                var yumlText = 
                    `// {type:class}

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

                document.body.innerHTML = svg;
    <body onload="loadSvg();">        


For pull requests, please read

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


  • Syntax and some examples taken from
  • 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


No releases published


No packages published

Contributors 4