--- source: https://www.jointjs.com/vue-diagrams generated: 2026-04-03 format: plaintext --- Create interactive Vue diagrams with a professional library Leverage the declarative nature of Vue combined with our powerful diagramming toolkit to build AI-powered visual applications. start free trial video tutorial One library, unlimited UIs Enjoy AI workflow editors, mind maps, kanban boards and other diagramming studios directly inside your Vue application. Benefit from our app templates and reduce your development time to days. [# AI Agent Builder Explore an AI agent builder packed with advanced diagramming features—getting your app ready for the future of UIs.](https://www.jointjs.com/demos/uml-class-diagrams)[# Flowchart maker This generic flowchart maker offers advanced diagramming features included in our library.](https://www.jointjs.com/demos/flowchart)[# Chatbot Use this demo application to create an advanced Chatbot solution with an intuitive drag-and-drop editor.](https://www.jointjs.com/demos/chatbot)[# Organizational chart This demo showcases the power of JointJS+ on one of the most widely used diagram types.](https://www.jointjs.com/demos/organizational-chart)[# Kanban board The Kanban demo shows how to visualize work, maximize efficiency and continuously improve.](https://www.jointjs.com/demos/kanban)[# Mind mapping app This demo shows a diagram used to visually organize information into a hierarchy and display the relationships between them.](https://www.jointjs.com/demos/mindmap)[# BPMN editor The BPMN demo shows a standardized approach to modeling the steps of a business process from start to finish.](https://www.jointjs.com/demos/bpmn)[# Sankey diagram See how to use link anchors, curve connector, stack layout and its drag & drop user interface to create Sankey diagram.](https://www.jointjs.com/demos/sankey-diagram) Feature highlights Complete diagramming toolkit Don't reinvent the wheel. Let us take care of all the math, interactivity and graphics for you. Use a set of pre-built diagramming tools to build an outstanding app while saving months of complex development and avoiding headaches from never-ending code maintenance. Automatic layouts and link routing Lay out nodes as an orgchart, flowchart or force-directed graph, and determine link behavior with built-in or custom routers. Custom SVG or HTML shapes with ports Provide your own custom shape definitions (including ports) for your diagram nodes using SVG or HTML. Export/Import, serialisation Export your diagrams to various formats (PNG, JPEG, SVG, PDF), or use JSON for an easy integration with your database. Events Enable user interaction by triggering events on the JointJS paper, or individual elements and links. Snaplines, element & link tools Define custom UI to manipulate elements and links via built-in and custom tools, including snaplines, buttons and connect tools. Property editor and viewer Keep all your diagram data in one place using the model-view architecture, and edit it via the property editor and viewer component. Zoom and pan, copy and paste & undo and redo Enhance your application with core diagram controls without having to create them from scratch. Element palette Organize your shapes in the element palette, then drag & drop to the diagram. code example Seamless integration of JointJS+ & Vue See the integration in action, demonstrated on a small piece of a complete application – initializing a diagram and defining custom element type. Our approach to integration is simple yet easily scalable. Include JointJS+ code anywhere in your Vue application and enhance any component with advanced functionality. read our tutorial compatibility It works with all versions of Vue Our professional library works seamlessly with all previous versions of Vue and doesn't require extra effort when new versions of Vue are released. Explore the Vue integration with our pre-built flowchart app Use our boilerplate flowchart maker, built according to integration best practices, to experience the integration of JointJS+ and Vue. explore demo Feature highlights Integrate your Vue app with JointJS+ Ready to roll up your sleeves? Watch this tutorial to get an in-depth guidance on how to incorporate JointJS+ into a Vue app. KEY FEATURES Why developers love us 10+ years of work and experience has led to several areas where we excel today. Scalable vector graphics Vector graphics is the building block of our library. It renders perfectly, supports accessibility and makes interaction easier. more information Versatility Our library is used in a wide variety of industries and fields for all kinds of applications. Use one of our many demos as a boilerplate for your project and get results in no time. more information Customizability Our library can serve everyone from novice programmers who benefit from a wide range of ready-to-implement features, to experienced developers who need as much customization as possible. more information Browser & framework friendliness Our library works on all devices and is compatible with all major JavaScript frameworks such as React, Angular, Vue and others. more information Exceptional support Our library is built by developers for developers. We know things can get complicated, and we're proud to provide top-notch support including conference calls, expert code reviews and other services to help you overcome any obstacle. more information Flexible pricing JointJS+ is priced per developer, making it suitable for projects of any size. This means you can develop any number of products for any number of users on any number of machines without paying more. more information Build a professional visual application with ease Start a 30-day trial and get access to all JointJS+ features and demo applications. start free trial our customers JointJS+, the first choice of industry leaders We empower industry giants, startups and solopreneurs to build visual and No-Code/Low-Code applications faster and with confidence. Using JointJS with Vue has remarkably enhanced Servision's Wiring Diagram System. The Vue integration facilitates precise element connections and flexible link paths customization. The rich, easy-to-use UI complements Vue's reactivity, allowing real-time updates and synchronization with our backend data sources. Together, JointJS and Vue have boosted our productivity and precision to unprecedented levels. Jiang Yan CTO, Servision versions JointJS & JointJS+ Choose our community version for basic solutions, or go professional to create advanced visual applications without limitations. Community Community version for basic apps JointJS is a community-driven diagramming library that helps developers create simple applications in less time by offering essential UI features. Open-source code Essential features Basic support Professional Swiss-army knife on the road to cutting-edge apps JointJS+ extends the functionality of JointJS and offers a wide range of customizable features, ready-to-implement demo apps and white-glove support. Commercial license and source code 40+ UI features 180+ ready-to-use demo apps Dedicated developer support Speed up your development with a powerful library Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development. EXPLORE ALL DEMOSGET STARTED FOR FREE