{"id":15060330,"url":"https://github.com/rajasegar/ember-gen-uml","last_synced_at":"2025-04-10T05:50:38.034Z","repository":{"id":35055859,"uuid":"201245481","full_name":"rajasegar/ember-gen-uml","owner":"rajasegar","description":"A CLI to generate Plant UML compatible diagrams for Ember components","archived":false,"fork":false,"pushed_at":"2024-09-27T19:58:53.000Z","size":645,"stargazers_count":5,"open_issues_count":18,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-13T20:42:11.942Z","etag":null,"topics":["cli","ember","emberjs","plantuml","uml-diagrams"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajasegar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-08T11:37:09.000Z","updated_at":"2023-09-29T06:38:23.000Z","dependencies_parsed_at":"2023-02-18T14:31:08.364Z","dependency_job_id":"77ced565-7de4-450a-9327-e00fe89cb556","html_url":"https://github.com/rajasegar/ember-gen-uml","commit_stats":{"total_commits":142,"total_committers":6,"mean_commits":"23.666666666666668","dds":0.6126760563380282,"last_synced_commit":"1d32e1d00290a33710ec4fa8724e24815b5f9f77"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-gen-uml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-gen-uml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-gen-uml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-gen-uml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajasegar","download_url":"https://codeload.github.com/rajasegar/ember-gen-uml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166926,"owners_count":21058480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","ember","emberjs","plantuml","uml-diagrams"],"created_at":"2024-09-24T22:56:55.412Z","updated_at":"2025-04-10T05:50:38.010Z","avatar_url":"https://github.com/rajasegar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-gen-uml\n\n![Build and Deploy](https://github.com/rajasegar/ember-gen-uml/workflows/Build/badge.svg)\n[![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)\n[![npm](https://img.shields.io/npm/dm/ember-gen-uml.svg)](https://www.npmjs.com/package/ember-gen-uml)\n[![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\")\n[![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)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n\n\nA CLI to generate PlantUML compatible diagrams from Ember Components source\n\n## Usage\n\n### 1. Install CLI\n```sh\nnpm i -g ember-gen-uml\n```\n\n### 2. Generate UML files\n```sh\nember-gen-uml app/components --out=/Users/user/Desktop/uml-folder\n```\n\nor using npx:\n```sh\nnpx ember-gen-uml app/components --out=/Users/user/Desktop/uml-folder\n```\n\nIf you are using PODS layout for components, you need to pass `--pods` flag:\n\n```sh\nember-gen-uml app/components --out=/Users/user/Desktop/uml-folder --pods\n```\n\n### 3. Generate PNG files or SVG files using plantuml.jar\nDownload the [plantuml.jar](http://sourceforge.net/projects/plantuml/files/plantuml.jar/download) from the official [website](http://plantuml.com/index).\n\n```sh\njava -jar ~/plantuml.jar /User/user/Desktop/uml-folder/**.pu\n```\nThis will generate PNG files with UML diagrams in the same folder.\n\nTo generate in SVG format\n\n```sh\njava -jar ~/plantuml.jar -tsvg /User/user/Desktop/uml-folder/**.pu\n```\n\n\n\n## From\nFor 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)\n\n```js\nimport Component from '@ember/component';\nimport layout from '../templates/components/es-accordion';\nimport {\n  get,\n  getProperties,\n  set,\n} from '@ember/object';\nimport {\n  isPresent,\n} from '@ember/utils';\nimport { computed } from '@ember/object';\nimport {\n  A,\n} from '@ember/array';\n\n\nexport default Component.extend({\n  layout,\n\n  classNames: ['accordion-group'],\n  activeItem: null,\n  focusIndex: null,\n  accordionItemIndexes: null,\n\n  accordionState: computed('activeItem', 'focusIndex', function() {\n    const {\n      activeItem,\n      focusIndex,\n      actions,\n    } = getProperties(this, [\n      'activeItem',\n      'focusIndex',\n      'actions',\n    ]);\n\n    return {\n      activeItem,\n      focusIndex,\n      setActiveItem: actions.setActiveItem.bind(this),\n      setFocusIndex: actions.setFocusIndex.bind(this),\n      registerIndex: actions.registerIndex.bind(this),\n    };\n  }),\n\n  init() {\n    this._super(...arguments);\n\n    set(this, 'accordionItemIndexes', []);\n  },\n\n\n  keyDown(e) {\n    const keyCode = get(e, 'keyCode');\n    const focusIndex = get(this, 'focusIndex');\n\n    if (isPresent(focusIndex)) {\n      const targetIndex = this._resolveTargetItemIndex(keyCode);\n\n      set(this, 'activeItem', targetIndex);\n    }\n  },\n\n\n  _resolveTargetItemIndex(keyCode) {\n    const {\n      accordionItemIndexes,\n      activeItem,\n      focusIndex,\n    } = getProperties(this, [\n      'accordionItemIndexes',\n      'activeItem',\n      'focusIndex',\n    ]);\n    const first = Math.min(...accordionItemIndexes);\n    const last = Math.max(...accordionItemIndexes);\n    let itemIndexOfIndex = A(accordionItemIndexes).indexOf(activeItem);\n    let targetIndex;\n\n    switch (keyCode) {\n      case 38:\n        if (activeItem === null || itemIndexOfIndex === -1) {\n          targetIndex = focusIndex;\n        } else if (activeItem === first) {\n          targetIndex = last;\n        } else {\n          itemIndexOfIndex--\n          targetIndex = accordionItemIndexes[itemIndexOfIndex];\n        }\n        break;\n      case 40:\n        if (activeItem === null || itemIndexOfIndex === -1) {\n          targetIndex = focusIndex;\n        } else if (activeItem === last) {\n          targetIndex = first;\n        } else {\n          itemIndexOfIndex++\n          targetIndex = accordionItemIndexes[itemIndexOfIndex];\n        }\n        break;\n      case 36:\n        targetIndex = first;\n        break;\n      case 35:\n        targetIndex = last;\n        break;\n      case 13:\n      case 32:\n        if (activeItem !== focusIndex) {\n          targetIndex = focusIndex;\n        } else {\n          targetIndex = null;\n        }\n        break;\n      default:\n        targetIndex = activeItem;\n    }\n\n    return targetIndex;\n  },\n\n  actions: {\n    setActiveItem(accordionItemIndex) {\n      return set(this, 'activeItem', accordionItemIndex);\n    },\n\n    setFocusIndex(accordionItemIndex) {\n      set(this, 'focusIndex', accordionItemIndex);\n    },\n\n    registerIndex(accordionItemIndex) {\n      get(this, 'accordionItemIndexes').push(accordionItemIndex);\n    },\n  },\n});\n```\n\n## To\n![sample uml diagram](https://github.com/rajasegar/ember-gen-uml/blob/master/images/sample.png)\n\n## CLI Options/Usage\nUsage: ember-gen-uml [path...] [options]\n\nOptions:\n*  -v, --version     CLI Version\n*  -o, --out \u003cpath\u003e  Store PlantUML definitions (.pu files) in \u003cpath\u003e\n*  --pods            Enable support for POD style components\n*  --ts              Enable support for TypeScript components\n*  -h, --help        output usage information\n\n## References\n* [PlantUML](http://plantuml.com)\n* [PlantUML Class Diagrams](http://plantuml.com/class-diagram)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-gen-uml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajasegar%2Fember-gen-uml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-gen-uml/lists"}