$ show gwenaelp/vue-diagrams
This repository is a Vue.js 3 component library for building interactive node-based diagrams, inspired by react-diagrams. It provides a `Diagram` component that renders an SVG canvas with draggable nodes, ports, and links, supporting pan/zoom, grid snapping, resizable nodes, custom node types, context menus, serialization, and edit modes. The architecture is a classic Vue component library: a main `Diagram.vue` orchestrates SVG rendering via `vue-svg-pan-zoom`, while `DiagramModel` and `DiagramNode` classes manage the data model. The codebase includes extensive Storybook stories and a documentation site built with Nuxt. While functional and well-documented, the main diagram component is monolithic and mixes concerns, and some features (like port deletion) are incomplete. The library is actively maintained and uses modern tooling (Vite, TypeScript, Vitest).
The LLM identified 2 files worth highlighting for reuse:
A self-contained class that creates SVG resize handles (8 directional) on a given container element. It handles mouse events for starting a resize drag and updates handle positions. This component is completely decoupled from Vue and could be extracted into any SVG-based project with minimal changes.
A minimal Vue component rendering a simple circle as a port shape. It is part of a family of port shape components (DiamondPort, RectPort, etc.) that are cleanly separated and can be swapped via the `display_shape` property. These components are small, focused, and reusable in any SVG-based node editor.