@vesoft-inc/veditor NPM

NebulaGraph veditor

NebulaGraph VEditor is a highly customizable flow chart library, with which you create flow charts, sequence diagrams, workflow, and more.

demo flowchart react demo force-directed graph

Features

Typescript: Natively TS support
Customizable: Support SVG, HTML, CSS, Canvas, React/Vue and more to custome node/line shapes
Minimap: Birdview of given viewport in the diagram
Shortcuts Keys: undo, redo, copy, paste, select, zoom, pan and more
Performant: Async/Await pattern enabled high performance of graph loading

Installation

npm install @vesoft-inc/veditor

demo

npm run start

Build

npm run build
# make declaration
npm run makeDts

Quick Start

import VEditor from "@vesoft-inc/veditor";

let index = 0;
const editor =  new VEditor({ 
  dom: document.getElementById("root")
});
// add node
function add(){
  editor.graph.node.addNode({
    uuid:index,
    type:"default",// node shape type
    name:"test"+index++,
    x:window.innerWidth*Math.random(),
    y:300*Math.random()
  })
}
for(let x = 0;x<50;x++){
  add();
}
// add line
for(let x = 0;x<10;x++){
  editor.graph.line.addLine({
    from:Math.floor(50*Math.random()),
    to:Math.floor(50*Math.random()),
    fromPoint:1,
    toPoint:0
  })
}
// result
console.log(editor.schema.getData())