{"id":13522090,"url":"https://github.com/eBay/nice-dag","last_synced_at":"2025-03-31T22:30:35.330Z","repository":{"id":60024321,"uuid":"526398649","full_name":"eBay/nice-dag","owner":"eBay","description":"nice-dag is a lightweight javascript library, which is used to present a DAG diagram.","archived":false,"fork":false,"pushed_at":"2024-03-29T13:10:23.000Z","size":8713,"stargazers_count":42,"open_issues_count":5,"forks_count":17,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-14T13:06:50.533Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://opensource.ebay.com/nice-dag/examples/index.html","language":"TypeScript","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/eBay.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-08-18T23:07:21.000Z","updated_at":"2024-06-05T04:52:42.057Z","dependencies_parsed_at":"2024-01-13T22:58:55.895Z","dependency_job_id":"62607d5d-35f2-4652-ba69-1da6ea9e5738","html_url":"https://github.com/eBay/nice-dag","commit_stats":{"total_commits":100,"total_committers":14,"mean_commits":7.142857142857143,"dds":0.63,"last_synced_commit":"c3d72eb78d9887aa68f5d4151c289175b37ef4dd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eBay%2Fnice-dag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eBay%2Fnice-dag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eBay%2Fnice-dag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eBay%2Fnice-dag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eBay","download_url":"https://codeload.github.com/eBay/nice-dag/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246552047,"owners_count":20795757,"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":[],"created_at":"2024-08-01T06:00:42.090Z","updated_at":"2025-03-31T22:30:35.324Z","avatar_url":"https://github.com/eBay.png","language":"TypeScript","readme":"![nice-dag-logo](./static/img/logo.svg)\n\n# Nice-DAG\n\n[![Demo](https://img.shields.io/badge/demo-link-orange.svg)](https://opensource.ebay.com/nice-dag/examples/index.html)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/eBay/nice-dag/blob/main/LICENSE.md)\n\nhttps://user-images.githubusercontent.com/3853/191567804-6e3dfb37-f1fd-4a70-976a-8aa543feff4e.mov\n\n## Overview\n\nNice-DAG is a lightweight JavaScript library designed for presenting Directed Acyclic Graphs (DAGs). It builds on **dagre** to layout nodes and edges within a DAG diagram. However, the functionality provided by Nice-DAG goes far beyond what dagre offers.\n\nWhile **dagre** supplies position coordinates for DAG nodes, Nice-DAG offers a complete DOM container for DAG diagrams, including DOM elements to host both nodes and edges. Utilizing this visual container, Nice-DAG introduces generic visual features such as **zoom in/out**, a **mini-map** widget, and more. Additionally, Nice-DAG provides robust editing capabilities, allowing users to **drag and drop** nodes, **connect** nodes to each other, and **create/remove** nodes or edges. This enables developers to concentrate on customizing the rendering of nodes and edges according to their requirements, without needing to implement foundational functionalities. Furthermore, Nice-DAG grants developers full control over the container’s placement, as well as its overall look and feel.\n\nWhen it comes to usage, Nice-DAG offers two distinct views: **read-only view** and **editable view**. The **read-only view** provides a set of APIs that allow users to customize node and edge renderers for static visualizations. The **editable view** expands upon the read-only view's capabilities by incorporating a set of drag-and-drop APIs that can be applied to node and edge renderers, making it suitable for dynamic and interactive graph editing.\n\n![nice-dag-modules](./static/img/nice-dag-modules.png)\n\nIdeally, the Nice-DAG is framework agnostic. The DOM operations are covered by `nice-dag-core`. It doesn't rely on any 3rd party frameworks. Based on it, the Nice-DAG can be adapted for different modern frameworks like React, Vue, Angular.\n\n![nice-dag-adaptors](./static/img/nice-dag-adaptors.png)\n\nCurrently, Nice-DAG provides a React adaptor and a Vue(3.0) adaptor.\n\nFor more details information, you can visit the [Doc Portal](https://opensource.ebay.com/nice-dag/), the [React Demo Portal](https://opensource.ebay.com/nice-dag/examples/react/index.html) and the [Vue Demo Portal](https://opensource.ebay.com/nice-dag/examples/vue/index.html).\n\n## Installation (React App)\n\nIf your project is using yarn, you can run the command.\n\n```\nyarn add @ebay/nice-dag-core\nyarn add @ebay/nice-dag-react\n```\n\nIf your projet is using npm, you can run the command.\n\n```\nnpm install @ebay/nice-dag-core\nnpm install @ebay/nice-dag-react\n```\n\n## Installation (Vue3 App)\n\nIf your project is using yarn, you can run the command.\n\n```\nyarn add @ebay/nice-dag-core\nyarn add @ebay/nice-dag-vue3\n```\n\nIf your projet is using npm, you can run the command.\n\n```\nnpm install @ebay/nice-dag-vue3\nnpm install @ebay/nice-dag-vue3\n```\n\n# Key Features\n\n- Auto-Layout. No need to give fixed positions for each node and edge.\n- Sub DAG support. A hierarchical node set (without position) can be mapped to a view with Sub-DAGs.\n- Easy customization. Rendering can be controlled completely with the interfaces **nice-dag** exposes.\n- Framework agnostic. Easily integrated with any UI library.\n- Support scaling. The DAG diagram can be zoomed in/out.\n- Support Mini-Map. For large diagrams, navigation can be done via a mini-map.\n- Powerful Dragging \u0026 Dropping. Both nodes and edges can support DnD. Moreover, the page can auto-scroll and the size can be auto-scaled.\n- Rich APIs. Comprehensive APIs to control nodes and edges.\n\n# Motivation\n\nNowdays, there are many pipeline engines focusing on back-end pipeline orchestractions. Unfortunately those engines are, very often, lacking good pipeline edition capabilities, with poor or no UI at all. Users have to manually maintain complicated pipeline specific configurations, making it difficult either to write or validate pipelines.\n\nHaving a visualized DAG editor significantly increases pipeline efficiency and maintainability.\n\n# More Documents\n\n[Tutorial](https://opensource.ebay.com/nice-dag/docs/intro)\n\n[API Reference](https://opensource.ebay.com/nice-dag/docs/api-ref/)\n\n# License\n\n[MIT](LICENSE.md)\n","funding_links":[],"categories":["Javascript Libraries"],"sub_categories":["Renderers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FeBay%2Fnice-dag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FeBay%2Fnice-dag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FeBay%2Fnice-dag/lists"}