A CLI to generate PlantUML compatible diagrams from Ember Components source
npm i -g ember-gen-umlember-gen-uml app/components --out=/Users/user/Desktop/uml-folderor using npx:
npx ember-gen-uml app/components --out=/Users/user/Desktop/uml-folderIf you are using PODS layout for components, you need to pass --pods flag:
ember-gen-uml app/components --out=/Users/user/Desktop/uml-folder --podsDownload the plantuml.jar from the official website.
java -jar ~/plantuml.jar /User/user/Desktop/uml-folder/**.puThis will generate PNG files with UML diagrams in the same folder.
To generate in SVG format
java -jar ~/plantuml.jar -tsvg /User/user/Desktop/uml-folder/**.puFor example, this is the es-accordion component from ember-style-guide
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);
},
},
});
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent