yuml-diagram
Version:
UML diagramming package based on the yUML syntax
83 lines (64 loc) • 2.98 kB
Markdown
Allows the creation of offline UML diagrams based on the [yUML Syntax](http://yuml.me/).
<a href="https://www.npmjs.com/package/yuml-diagram"><img alt="NPM Status" src="https://img.shields.io/npm/v/yuml-diagram.svg?style=flat"></a>
[]()
[](https://dev.azure.com/jaime-olivares-f/yuml-diagram/_build/latest?definitionId=2&branchName=master)
* 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**
Please refer to the [wiki page](https://github.com/jaime-olivares/yuml-diagram/wiki)
This library is published as a npm package [here](https://www.npmjs.com/package/yuml-diagram). For installing use:
````bash
npm install yuml-diagram
````
````javascript
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
For using this library in a browser application, include the script at [/dist/yuml-diagram.min.js](https://github.com/jaime-olivares/yuml-diagram/blob/master/dist/yuml-diagram.min.js) in your project.
The following example shows how to use it:
````html
<html>
<head>
<script src="yuml-diagram.min.js"></script>
<script>
function loadSvg()
{
var yumlText =
`// {type:class}
[]->[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>
````
For pull requests, please read [CONTRIBUTING.md](https://github.com/jaime-olivares/yuml-diagram/blob/master/CONTRIBUTING.md)
Have a nice diagram to show? Please send it for publishing here!
* Syntax and some examples taken from [yuml.me](http://yuml.me/diagram/scruffy/class/samples)
* This package embeds a Javascript port of [Dot/Graphviz](http://www.graphviz.org/) called [viz.js](https://github.com/mdaines/viz.js)
* The yuml-to-dot translator is loosely based on a Python project called [scruffy](https://github.com/aivarsk/scruffy)
* The new sequence diagram is based on [this github fork](https://github.com/sharvil/node-sequence-diagram)