Web app for drawing Feature Models with drag & drop and importing / exporting UVL (Universal Variability Language).
- Next.js 15 (App Router) + React 19 + TypeScript
- React Flow (
@xyflow/react) for the visual editor - Zustand for state management
- Tailwind CSS
- Docker + docker-compose (hot reload)
docker compose up --build- Visual editor with grid, snap, zoom, pan, minimap
- Feature nodes with type (Boolean / Integer / Float / String), attributes and cardinality
- Edges with FODA-style mandatory (●) / optional (○) markers
- Groups: or, alternative (XOR) and cardinality [n..m] rendered with a sibling arc
- Cross-tree constraints — visual editor for
requires/excludesplus an advanced mode for free-form UVL expressions (& | ! => <=>) - Multi-selection (drag box or Shift+click) with context menu: bulk delete, copy / paste, group / ungroup, change type / parent relation, align, distribute
- Bidirectional highlighting between the UVL code view and the diagram (click a feature name or relation keyword to select it on the canvas, and vice versa)
- Undo / redo (⌘Z / ⇧⌘Z), search palette (⌘K), fit view (⌘0), duplicate (⌘D)
- Autosave to localStorage with a "Saved · Xs ago" indicator
- Export SVG / PNG / JPG / PDF with optional transparent background, legend and constraints block. PDF is true vector with embedded Inter / JetBrains Mono so it stays crisp at any zoom — ready for LaTeX / Overleaf
- Import / export UVL (the eShop example from the UVL paper is loaded by default)
src/app/— Next.js App Router entry pointssrc/components/—Canvas,Sidebar,FeatureNode,FeatureEdge,GroupArcs,EdgeMarkers,ContextMenu,SearchPalette,UvlCodeView,TabBarsrc/lib/store.ts— Zustand store (model, history, clipboard, tabs)src/lib/uvl.ts— UVL exportersrc/lib/uvlParser.ts— UVL importersrc/lib/constraintParser.ts— visual/advanced constraint parsingsrc/lib/layout.ts— tidy-tree auto-layoutsrc/lib/exporter.ts— SVG / PNG / JPG / PDF export