Awesome Open Source
Awesome Open Source

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

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,155,559
Syntax (10,984
Diagram (5,639
Uml (1,550
Wiki Page (687
Uml Diagram (173
Sequence Diagram (55
Yuml (7