A Vue-based visual graph editor built on AntV G6 for creating and editing flowcharts and diagrams.
X-Flowchart-Vue is a Vue.js component library that provides a visual graph editor for creating and manipulating flowcharts and diagrams. It solves the problem of embedding interactive diagramming capabilities into Vue applications without building an editor from scratch. The editor is built on the AntV G6 graphics engine, offering a balance of performance and customization.
Vue.js developers who need to integrate flowchart or diagram editing features into their web applications, such as those building process modeling tools, UI mockup apps, or educational software.
Developers choose X-Flowchart-Vue for its deep integration with Vue, extensive built-in tooling, and high configurability, allowing them to add professional diagram editing with minimal setup while retaining control over the UI and functionality.
基于G6和Vue的可视化图形编辑器。A visual graph editor based on G6 and Vue.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Offers drag-and-drop nodes, visual toolbar, and context menus, enabling intuitive flowchart creation directly in the UI as demonstrated in the online preview.
Includes undo/redo, copy/paste, zoom, alignment, and styling controls with default keyboard shortcuts, providing a full-featured editor out of the box.
Allows fine-grained control over tools, materials, and shortcuts via props like enableTools and materials, though configuration is complex and warned against unnecessary use.
Supports saving graph data with save() API and exporting images in PNG, JPEG, and SVG formats through downloadImage(), facilitating easy integration with backend systems.
Features built-in i18n with configurable UI elements like logo and colors, making it adaptable for international audiences as shown in the language configuration options.
The configuration system for tools and materials is intricate, with warnings like '无非必要不建议配置此项' (if not necessary, not recommended to configure), which can overwhelm developers seeking simplicity.
Parts of the README are in Chinese without full translation, and the project tightly couples with AntV G6, relying on its documentation and community for advanced features.
Built on AntV G6, it may face performance issues with very large or complex graphs due to canvas-based rendering, which isn't addressed in the README beyond basic API references.
Deep integration with Vue and AntV G6 makes migration to other frameworks or graphics engines difficult, limiting flexibility for future tech stack changes.