https://github.com/jaime-olivares/yuml-diagram
UML diagramming package based on the yUML syntax
https://github.com/jaime-olivares/yuml-diagram
npm sequence-diagram uml uml-diagram yuml yuml-syntax
Last synced: 5 days ago
JSON representation
UML diagramming package based on the yUML syntax
- Host: GitHub
- URL: https://github.com/jaime-olivares/yuml-diagram
- Owner: jaime-olivares
- License: mit
- Created: 2018-05-21T03:28:56.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-06-20T09:57:56.000Z (almost 3 years ago)
- Last Synced: 2025-04-09T22:18:41.233Z (5 days ago)
- Topics: npm, sequence-diagram, uml, uml-diagram, yuml, yuml-syntax
- Language: JavaScript
- Homepage:
- Size: 998 KB
- Stars: 251
- Watchers: 11
- Forks: 28
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - jaime-olivares/yuml-diagram - UML diagramming package based on the yUML syntax (npm)
- jimsghstars - jaime-olivares/yuml-diagram - UML diagramming package based on the yUML syntax (JavaScript)
README
# yUML diagrammer
Allows the creation of offline UML diagrams based on the [yUML Syntax](http://yuml.me/).
[]()
[](https://dev.azure.com/jaime-olivares-f/yuml-diagram/_build/latest?definitionId=2&branchName=master)
## 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](https://github.com/jaime-olivares/yuml-diagram/wiki)
## Installation
This library is published as a npm package [here](https://www.npmjs.com/package/yuml-diagram). For installing use:
````bash
npm install yuml-diagram
````
## Usage example
````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
## Browserified distribution
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
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;
}
````
## Contributing
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!
## Credits
* 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)