pb10005 / Diagram Vue
Licence: mit
A editable SVG-based diagram component for Vue
Stars: ✭ 86
Projects that are alternatives of or similar to Diagram Vue
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+194.19%)
Mutual labels: json, vue-component, vue2
Vue Star Rating
⭐️ A simple, highly customisable star rating component for Vue 2.x. / 3.x
Stars: ✭ 509 (+491.86%)
Mutual labels: vue-component, vue2
Macsvg
macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ➤➤➤
Stars: ✭ 789 (+817.44%)
Mutual labels: svg, bezier
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+415.12%)
Mutual labels: vue-component, vue2
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+23260.47%)
Mutual labels: vue-component, vue2
Flowchart.js
Draws simple SVG flow chart diagrams from textual representation of the diagram
Stars: ✭ 7,711 (+8866.28%)
Mutual labels: svg, diagram
Gatsby Embedder Excalidraw
🤴 Custom transformer to embed Excalidraw diagrams
Stars: ✭ 45 (-47.67%)
Mutual labels: svg, diagram
Pure Vue Chart
Simple and lightweight vue chart component without using chart library dependencies
Stars: ✭ 50 (-41.86%)
Mutual labels: svg, vue2
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+4581.4%)
Mutual labels: vue-component, vue2
Iconpark
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Stars: ✭ 4,924 (+5625.58%)
Mutual labels: svg, vue-component
Vue Json Pretty
A JSON tree view component that is easy to use and also supports data selection.
Stars: ✭ 477 (+454.65%)
Mutual labels: json, vue-component
Vue Typer
Vue component that simulates a user typing, selecting, and erasing text.
Stars: ✭ 691 (+703.49%)
Mutual labels: vue-component, vue2
Maker.js
📐⚙ 2D vector line drawing and shape modeling for CNC and laser cutters.
Stars: ✭ 1,185 (+1277.91%)
Mutual labels: svg, bezier
vue-icon
Maybe it is the smallest vue component that contains all the feather icons
Stars: ✭ 44 (-48.84%)
Mutual labels: vue2, vue-component
Vue Flow Form
Create conversational conditional-logic forms with Vue.js.
Stars: ✭ 315 (+266.28%)
Mutual labels: vue-component, vue2
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+7893.02%)
Mutual labels: vue-component, vue2
diagram-vue
A SVG-based diagram component for Vue
Installation
npm i diagram-vue --save
Usage
Ready-to-use editor
1. Import
import { DiagramEditor } from "diagram-vue";
import "diagram-vue/dist/diagram.css";
2. Template
<DiagramEditor v-model="graph"></DiagramEditor>
See Data specification.
Customization
1. Import
import Diagram from 'diagram-vue';
import "diagram-vue/dist/diagram.css";
2. Template
<Diagram
:width="2000"
:height="1000"
:fluid="false"
scale="1"
background="#fafafa"
:nodes="nodes"
:links="links"
:editable="editable"
:labels="{
edit: 'Edit',
remove: 'Remove',
link: 'Link',
select: 'Select',
cancel: 'Cancel'
}"
@editNode="editNode"
@editLink="editLink"
@nodeChanged="nodeChanged"
@linkChanged="linkChanged"
>
</Diagram>
3. Props
props: {
width: Number,
height: Number,
background: String,
nodes: Array,
links: Array,
editable: Boolean,
labels: Object,
fluid: Boolean
}
See Data specification.
4. Events
editNode(node /* selected node */) {
/* event handler */
},
editLink(link /* selected link */) {
/* event handler */
},
nodeChanged(obj /* array of nodes */) {
/* event handler */
const nodes = obj.nodes
},
linkChanged(obj /* array of links */) {
/* event handler */
const links = obj.links
},
nodeRemoved(id /*Identifier of node*/){
/* event handler */
},
linkRemoved(id /*Identifier of link*/){
/* event handler */
},
nodeClicked(id /* identifier of node */) {
/* event handler */
console.log("your clicked in node: ", id)
},
linkClicked(id /* identifier of link */) {
/* event handler */
console.log("your clicked in link: ", id)
}
5. Get SVG as String
Use plain JavaScript.
document.getElementById('svg-diagram-show-area').innerHTML; // <svg ...>...</svg>
Development
Development Environment
Project setup
yarn install
Compiles and hot-reloads for development
yarn run serve
Compiles and minifies for production
yarn run build
Run your tests
yarn run test
Lints and fixes files
yarn run lint
Run your end-to-end tests
yarn run test:e2e
Run your unit tests
yarn run test:unit
Customize configuration
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].