jaime-olivares / Yuml Diagram
Licence: mit
UML diagramming package based on the yUML syntax
Stars: ✭ 203
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Yuml Diagram
Atom Autocomplete Module Import
⚛️ Search & install npm packages from import/require statements.
Stars: ✭ 182 (-10.34%)
Mutual labels: npm
React Material Components Web
React wrapper of Google's Material Components Web
Stars: ✭ 184 (-9.36%)
Mutual labels: npm
Tui.editor
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
Stars: ✭ 14,016 (+6804.43%)
Mutual labels: uml
Node.js
一步一步学习Node.js，带你从零开始学习Node.js！本仓库是自己总结的Node.js学习图文教程，里面有学习案列和源代码（pubdreamcc原创，欢迎转载，欢迎star）
Stars: ✭ 181 (-10.84%)
Mutual labels: npm
Webpack Static Html Pages
Webpack template/example with multiple static html pages
Stars: ✭ 202 (-0.49%)
Mutual labels: npm
Corepack
Zero-runtime-dependency package acting as bridge between Node projects and their package managers
Stars: ✭ 196 (-3.45%)
Mutual labels: npm
Darkmode.js
🌓 Add a dark-mode / night-mode to your website in a few seconds
Stars: ✭ 2,339 (+1052.22%)
Mutual labels: npm
Greenkeeper Lockfile
🔒 Your lockfile, up to date, all the time
Stars: ✭ 181 (-10.84%)
Mutual labels: npm
Dont Break
Checks if the current version of your package would break dependent projects
Stars: ✭ 200 (-1.48%)
Mutual labels: npm
100 Days Of Code Frontend
Curriculum for learning front-end development during #100DaysOfCode.
Stars: ✭ 2,419 (+1091.63%)
Mutual labels: npm
yUML diagrammer
Allows the creation of offline UML diagrams based on the yUML Syntax.
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].