{"id":20084562,"url":"https://github.com/dhtmlx/angular-diagram-demo","last_synced_at":"2026-02-09T00:06:32.019Z","repository":{"id":141418522,"uuid":"273254155","full_name":"DHTMLX/angular-diagram-demo","owner":"DHTMLX","description":"Using DHX Diagram with Angular","archived":false,"fork":false,"pushed_at":"2024-07-02T10:02:26.000Z","size":5227,"stargazers_count":0,"open_issues_count":1,"forks_count":2,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-09-07T03:21:59.468Z","etag":null,"topics":["angular","dhtmlx","dhtmlx-demo","diagram","diagram-editor","mindmap","orgchart","shape","swimlane"],"latest_commit_sha":null,"homepage":"https://dhtmlx.github.io/angular-diagram-demo/?path=/story/default-editor--autoplacement","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DHTMLX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-06-18T14:03:42.000Z","updated_at":"2024-07-02T10:02:26.000Z","dependencies_parsed_at":"2024-05-19T16:49:18.363Z","dependency_job_id":null,"html_url":"https://github.com/DHTMLX/angular-diagram-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Fangular-diagram-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Fangular-diagram-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Fangular-diagram-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Fangular-diagram-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DHTMLX","download_url":"https://codeload.github.com/DHTMLX/angular-diagram-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224479925,"owners_count":17318299,"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":["angular","dhtmlx","dhtmlx-demo","diagram","diagram-editor","mindmap","orgchart","shape","swimlane"],"created_at":"2024-11-13T15:52:28.642Z","updated_at":"2026-02-09T00:06:26.988Z","avatar_url":"https://github.com/DHTMLX.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DHTMLX Diagram with Angular Demo\n\n[](https://dhtmlx.com/)\n\n[How to start](#how-to-start) | [Key features](#key-features) | [License](#license) | [Useful links](#links) | [Other examples](#examples) | [Join our online community](#join)\n\n\n\nThe DHTMLX [JavaScript Diagram library](https://dhtmlx.com/docs/products/dhtmlxDiagram/) allows developers to create interactive, customizable diagrams such as flowcharts, organizational charts, network diagrams, mind maps, etc. It simplifies complex data visualization by organizing it into a clear hierarchical structure using automatic layouts and live editors.\n\n\u003ca name=\"how-to-start\"\u003e\u003c/a\u003e\n## How to start\n\nClone the repository or download files.\n\n```\nyarn\nyarn start\n```\n\nor\n\n```\nnpm install\nnpm run start\n```\n\nYou can also use [GitHub Codespaces](https://docs.github.com/en/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository) to run online.\n\n\u003ca name=\"key-features\"\u003e\u003c/a\u003e\n## DHTMLX Diagram key features\n\n- Live Diagram, Org chart, and Mindmap editors for a quick diagram arrangement\n- Orthogonal and Radial auto layout modes\n- Adding partner and assistant shapes\n- Searching and filtering\n \n[](https://snippet.dhtmlx.com/846cz71r?tag=diagram_editor\u0026mode=wide)\n\n- Creating swimlanes and groups\n- Expanding and collapsing branches\n- Creating custom shapes\n\n[](https://snippet.dhtmlx.com/plqsq611?tag=diagram_editor\u0026mode=wide)\n\n- Group work with multiple objects (select, copy, move, delete)\n- Intuitive drag-n-drop behavior\n- Snap lines\n- Configurable Toolbar, Shapebar, and Editbar elements\n\n[](https://snippet.dhtmlx.com/1qh2r0ub?tag=diagram_editor\u0026mode=wide)\n\n- Built-in themes\n- Inline editing\n- Touch support\n- Keyboard navigation\n- Cross-browser support\n- Export to PDF and PNG\n\n\u003ca name=\"license\"\u003e\u003c/a\u003e\n## License ##\nThis demo is available under the Evaluation license. To use it in your projects, please choose a proper license on the DHTMLX website: [https://dhtmlx.com/docs/products/licenses.shtml](https://dhtmlx.com/docs/products/licenses.shtml)\n\n\u003ca name=\"links\"\u003e\u003c/a\u003e\n## Useful links\n\n- [More demos about the DHTMLX Diagram functionality](https://snippet.dhtmlx.com/a9t2z2dt?tag=diagram\u0026mode=wide)\n- [Technical support ](https://forum.dhtmlx.com/c/diagram)\n- [Online documentation](https://docs.dhtmlx.com/diagram/)\n\n\u003ca name=\"examples\"\u003e\u003c/a\u003e\n## Other examples\n\nCheck out examples of using DHTMLX Diagram with other technologies:\n\n| JavaScript | React | Vue |\n| ----- | ----- | ----- |\n| [](https://dhtmlx.com/docs/products/dhtmlxDiagram/) | [](https://github.com/DHTMLX/react-diagram-demo/) | [](https://github.com/DHTMLX/vue-diagram-demo) |\n\n\u003ca name=\"join\"\u003e\u003c/a\u003e\n## Join our online community\n\n- Star our GitHub repo :star:\n- Watch our tutorials on [YouTube](https://www.youtube.com/user/dhtmlx/videos) :tv:\n- Read us on [Medium](https://dhtmlx.medium.com) :newspaper:\n- Follow us on [X](https://x.com/dhtmlx) :bird:\n- Check our news and updates on [Facebook](https://www.facebook.com/dhtmlx/) :feet:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhtmlx%2Fangular-diagram-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhtmlx%2Fangular-diagram-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhtmlx%2Fangular-diagram-demo/lists"}