# ember-gen-uml > A CLI to generate PlantUML compatible UML diagrams from Ember components Latest version **2.1.24** (published 2023-12-03) · MIT license · 0 weekly downloads ## Install ```sh npm install ember-gen-uml pnpm add ember-gen-uml yarn add ember-gen-uml bun add ember-gen-uml ``` Provides the command `ember-gen-uml`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.1.24 | | Published | 2023-12-03 | | First published | 2019-08-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=12.0.0 | | Dependencies | 10 | | Unpacked size | 48.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Rajasegar Chandran | | Maintainers | rajasegar | | Keywords | ember, uml, plantuml, uml-generation, documentation | ## Links - npm: https://www.npmjs.com/package/ember-gen-uml - Repository: https://github.com/rajasegar/ember-gen-uml - Homepage: https://github.com/rajasegar/ember-gen-uml#readme - Issues: https://github.com/rajasegar/ember-gen-uml/issues - npm.io page: https://npm.io/package/ember-gen-uml ## Dependencies (10) - [debug](https://npm.io/package/debug.md) ^4.3.1 - [commander](https://npm.io/package/commander.md) ^9.0.0 - [walk-sync](https://npm.io/package/walk-sync.md) ^3.0.0 - [typescript](https://npm.io/package/typescript.md) ^4.3.5 - [@babel/types](https://npm.io/package/@babel/types.md) ^7.14.5 - [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.14.5 - [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.14.5 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.14.5 - [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.14.5 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.14.5 ## Alternatives - [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads - [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads - [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads - [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads - [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads ## Recent versions - 2.1.24 (latest) — 2023-12-03 - 2.1.23 — 2023-03-22 - 2.1.22 — 2023-03-22 - 2.1.20 — 2023-03-22 - 2.1.19 — 2022-02-15 - 2.1.18 — 2022-02-14 - 2.1.17 — 2021-11-17 - 2.1.16 — 2021-11-17 - 2.1.15 — 2021-11-17 - 2.1.14 — 2021-11-17 - 2.1.13 — 2021-09-17 - 2.1.12 — 2021-09-07 - 2.1.11 — 2021-09-07 - 2.1.10 — 2021-09-06 - 2.1.9 — 2021-09-06 - … 21 more at https://npm.io/package/ember-gen-uml/versions ## README # ember-gen-uml ![Build and Deploy](https://github.com/rajasegar/ember-gen-uml/workflows/Build/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/rajasegar/ember-gen-uml/badge.svg?branch=master)](https://coveralls.io/github/rajasegar/ember-gen-uml?branch=master) [![npm](https://img.shields.io/npm/dm/ember-gen-uml.svg)](https://www.npmjs.com/package/ember-gen-uml) [![npm version](http://img.shields.io/npm/v/ember-gen-uml.svg?style=flat)](https://npmjs.org/package/ember-gen-uml "View this project on npm") [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](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 ![sample uml diagram](https://github.com/rajasegar/ember-gen-uml/blob/master/images/sample.png) ## 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) --- _Source: https://npm.io/package/ember-gen-uml · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._