Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajasegar/ember-gen-uml
A CLI to generate Plant UML compatible diagrams for Ember components
https://github.com/rajasegar/ember-gen-uml
cli ember emberjs plantuml uml-diagrams
Last synced: 2 months ago
JSON representation
A CLI to generate Plant UML compatible diagrams for Ember components
- Host: GitHub
- URL: https://github.com/rajasegar/ember-gen-uml
- Owner: rajasegar
- License: mit
- Created: 2019-08-08T11:37:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-27T19:58:53.000Z (3 months ago)
- Last Synced: 2024-09-30T06:02:32.128Z (3 months ago)
- Topics: cli, ember, emberjs, plantuml, uml-diagrams
- Language: JavaScript
- Size: 630 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-gen-uml
[](https://coveralls.io/github/rajasegar/ember-gen-uml?branch=master)
[](https://www.npmjs.com/package/ember-gen-uml)
[](https://npmjs.org/package/ember-gen-uml "View this project on npm")
[](https://github.com/semantic-release/semantic-release)
[](https://conventionalcommits.org)
A CLI to generate PlantUML compatible diagrams from Ember Components source
## Usage
### 1. Install CLI
```sh
npm i -g ember-gen-uml
```
### 2. Generate UML files
```sh
ember-gen-uml app/components --out=/Users/user/Desktop/uml-folder
```
or using npx:
```sh
npx ember-gen-uml app/components --out=/Users/user/Desktop/uml-folder
```
If you are using PODS layout for components, you need to pass `--pods` flag:
```sh
ember-gen-uml app/components --out=/Users/user/Desktop/uml-folder --pods
```
### 3. Generate PNG files or SVG files using plantuml.jar
Download the [plantuml.jar](http://sourceforge.net/projects/plantuml/files/plantuml.jar/download) from the official [website](http://plantuml.com/index).
```sh
java -jar ~/plantuml.jar /User/user/Desktop/uml-folder/**.pu
```
This will generate PNG files with UML diagrams in the same folder.
To generate in SVG format
```sh
java -jar ~/plantuml.jar -tsvg /User/user/Desktop/uml-folder/**.pu
```
## From
For example, this is the [es-accordion](https://github.com/ember-learn/ember-styleguide/blob/master/addon/components/es-accordion.js) component from [ember-style-guide](https://github.com/ember-learn/ember-styleguide)
```js
import Component from '@ember/component';
import layout from '../templates/components/es-accordion';
import {
get,
getProperties,
set,
} from '@ember/object';
import {
isPresent,
} from '@ember/utils';
import { computed } from '@ember/object';
import {
A,
} from '@ember/array';
export default Component.extend({
layout,
classNames: ['accordion-group'],
activeItem: null,
focusIndex: null,
accordionItemIndexes: null,
accordionState: computed('activeItem', 'focusIndex', function() {
const {
activeItem,
focusIndex,
actions,
} = getProperties(this, [
'activeItem',
'focusIndex',
'actions',
]);
return {
activeItem,
focusIndex,
setActiveItem: actions.setActiveItem.bind(this),
setFocusIndex: actions.setFocusIndex.bind(this),
registerIndex: actions.registerIndex.bind(this),
};
}),
init() {
this._super(...arguments);
set(this, 'accordionItemIndexes', []);
},
keyDown(e) {
const keyCode = get(e, 'keyCode');
const focusIndex = get(this, 'focusIndex');
if (isPresent(focusIndex)) {
const targetIndex = this._resolveTargetItemIndex(keyCode);
set(this, 'activeItem', targetIndex);
}
},
_resolveTargetItemIndex(keyCode) {
const {
accordionItemIndexes,
activeItem,
focusIndex,
} = getProperties(this, [
'accordionItemIndexes',
'activeItem',
'focusIndex',
]);
const first = Math.min(...accordionItemIndexes);
const last = Math.max(...accordionItemIndexes);
let itemIndexOfIndex = A(accordionItemIndexes).indexOf(activeItem);
let targetIndex;
switch (keyCode) {
case 38:
if (activeItem === null || itemIndexOfIndex === -1) {
targetIndex = focusIndex;
} else if (activeItem === first) {
targetIndex = last;
} else {
itemIndexOfIndex--
targetIndex = accordionItemIndexes[itemIndexOfIndex];
}
break;
case 40:
if (activeItem === null || itemIndexOfIndex === -1) {
targetIndex = focusIndex;
} else if (activeItem === last) {
targetIndex = first;
} else {
itemIndexOfIndex++
targetIndex = accordionItemIndexes[itemIndexOfIndex];
}
break;
case 36:
targetIndex = first;
break;
case 35:
targetIndex = last;
break;
case 13:
case 32:
if (activeItem !== focusIndex) {
targetIndex = focusIndex;
} else {
targetIndex = null;
}
break;
default:
targetIndex = activeItem;
}
return targetIndex;
},
actions: {
setActiveItem(accordionItemIndex) {
return set(this, 'activeItem', accordionItemIndex);
},
setFocusIndex(accordionItemIndex) {
set(this, 'focusIndex', accordionItemIndex);
},
registerIndex(accordionItemIndex) {
get(this, 'accordionItemIndexes').push(accordionItemIndex);
},
},
});
```
## To
## CLI Options/Usage
Usage: ember-gen-uml [path...] [options]
Options:
* -v, --version CLI Version
* -o, --out Store PlantUML definitions (.pu files) in
* --pods Enable support for POD style components
* --ts Enable support for TypeScript components
* -h, --help output usage information
## References
* [PlantUML](http://plantuml.com)
* [PlantUML Class Diagrams](http://plantuml.com/class-diagram)