vesoft-inc / nebulagraph-veditor

A Highly customizable JavaScript Diagramming Lib with SVG, HTML, Canvas support.

NebulaGraph veditor

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

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

• Basic Demo
• FlowChart Demo
• React Demo
• Force-directed Graph

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())

Documents

• Get Started
• Custom Shape
• Event
• API

License

Apache 2.0