https://github.com/dhtmlx/react-diagram-demo
Using DHX Diagram with React
https://github.com/dhtmlx/react-diagram-demo
dhtmlx dhtmlx-demo diagram diagram-editor group mindmap orgchart react shape swimlane
Last synced: 5 months ago
JSON representation
Using DHX Diagram with React
- Host: GitHub
- URL: https://github.com/dhtmlx/react-diagram-demo
- Owner: DHTMLX
- Created: 2020-06-18T14:03:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-14T22:51:11.000Z (12 months ago)
- Last Synced: 2025-04-09T06:50:29.890Z (6 months ago)
- Topics: dhtmlx, dhtmlx-demo, diagram, diagram-editor, group, mindmap, orgchart, react, shape, swimlane
- Language: JavaScript
- Homepage: https://dhtmlx.com/docs/products/dhtmlxDiagram/
- Size: 4.92 MB
- Stars: 7
- Watchers: 10
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DHTMLX Diagram with React Demo
[](https://dhtmlx.com/)
[How to start](#how-to-start) | [Key features](#key-features) | [License](#license) | [Useful links](#links) | [Other examples](#examples) | [Join our online community](#join)
The 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.
Clone the repository or download files.
```
yarn
yarn start
```
or
```
npm install
npm run start
```
You can also use [GitHub Codespaces](https://docs.github.com/en/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository) to run online.
## DHTMLX Diagram key features
- Live Diagram, Org chart, and Mindmap editors for a quick diagram arrangement
- Orthogonal and Radial auto layout modes
- Adding partner and assistant shapes
- Searching and filtering
[](https://snippet.dhtmlx.com/846cz71r?tag=diagram_editor&mode=wide)
- Creating swimlanes and groups
- Expanding and collapsing branches
- Creating custom shapes
[](https://snippet.dhtmlx.com/plqsq611?tag=diagram_editor&mode=wide)
- Group work with multiple objects (select, copy, move, delete)
- Intuitive drag-n-drop behavior
- Snap lines
- Configurable Toolbar, Shapebar, and Editbar elements
[](https://snippet.dhtmlx.com/1qh2r0ub?tag=diagram_editor&mode=wide)
- Built-in themes
- Inline editing
- Touch support
- Keyboard navigation
- Cross-browser support
- Export to PDF and PNG
## License ##
This 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)
- [More demos about the DHTMLX Diagram functionality](https://snippet.dhtmlx.com/a9t2z2dt?tag=diagram&mode=wide)
- [Technical support ](https://forum.dhtmlx.com/c/diagram)
- [Online documentation](https://docs.dhtmlx.com/diagram/)
Check out examples of using DHTMLX Diagram with other technologies:
| JavaScript | Angular | Vue |
| ----- | ----- | ----- |
| [](https://dhtmlx.com/docs/products/dhtmlxDiagram/) | [](https://github.com/DHTMLX/angular-diagram-demo) | [](https://github.com/DHTMLX/vue-diagram-demo) |
- Star our GitHub repo :star:
- Watch our tutorials on [YouTube](https://www.youtube.com/user/dhtmlx/videos) :tv:
- Read us on [Medium](https://dhtmlx.medium.com) :newspaper:
- Follow us on [X](https://x.com/dhtmlx) :bird:
- Check our news and updates on [Facebook](https://www.facebook.com/dhtmlx/) :feet: