@nice2dev/ui-diagrams

Full-featured diagram editor & viewer for React — flowchart, BPMN, ER, org chart, mind map, sequence, state machine, network topology.

Features

NiceDiagramEditor

• Canvas with pan/zoom (scroll wheel, pinch, minimap)
• Node CRUD — drag, resize, double-click edit, custom shapes (SVG/React)
• Edge creation — click port → drag to target port
• Toolbar — select, add node/edge, group, delete, undo/redo
• Property panel — node style (shape, color, border, font, icon), edge style (line, color, arrow)
• Auto-layout — dagre hierarchical, force-directed, grid, radial, tree
• Animations timeline — entry/exit/highlight per element
• Data binding — DataSource → auto-generated diagram (e.g., org chart from employee table)
• Export — SVG, PNG, PDF, .ndd.json, Mermaid
• Import — .ndd.json, Mermaid, draw.io XML (basic)
• i18n (10+ languages) + theming (light/dark, custom CSS variables)

NiceDiagramViewer

• Read-only with pan/zoom
• Auto-play animations (step-by-step sequence)
• Interactive tooltips on hover
• Fullscreen + print mode

Business Integrations

• NiceWorkflowVisualizer — auto-generate from workflow engine
• NiceDatabaseSchemaViewer — ER diagram from DB metadata
• NiceOrgChartVisualizer — org chart from HR data
• NiceProcessMiningDiagram — frequent paths, bottlenecks, SLA violations
• NiceDependencyGraph — module/microservice dependency visualization
• NiceNetworkTopology — auto-discovery + real-time status (green/yellow/red)
• NiceDecisionTreeEditor — decision tree with conditions, probabilities

Collaboration

• Multi-user CRDT editing with visible cursors
• Version history with visual diff (node added/removed/moved)
• Comments & annotations — sticky notes, @mentions, resolve
• Diagram template gallery

Installation

npm install @nice2dev/ui-diagrams

License

MIT © NiceToDev