Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vesoft-inc/nebulagraph-veditor
A Highly customizable JavaScript Diagramming Lib with SVG, HTML, Canvas support.
https://github.com/vesoft-inc/nebulagraph-veditor
canvas dag diagram erd erdiagram flowchart graph javascript nebulagraph svg
Last synced: 3 months ago
JSON representation
A Highly customizable JavaScript Diagramming Lib with SVG, HTML, Canvas support.
- Host: GitHub
- URL: https://github.com/vesoft-inc/nebulagraph-veditor
- Owner: vesoft-inc
- License: apache-2.0
- Created: 2022-03-03T05:29:24.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-12T07:53:25.000Z (about 1 year ago)
- Last Synced: 2024-01-12T20:09:49.228Z (about 1 year ago)
- Topics: canvas, dag, diagram, erd, erdiagram, flowchart, graph, javascript, nebulagraph, svg
- Language: TypeScript
- Homepage: https://vesoft-inc.github.io/nebulagraph-veditor
- Size: 10.2 MB
- Stars: 75
- Watchers: 21
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [NebulaGraph veditor](https://vesoft-inc.github.io/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
```bash
npm install @vesoft-inc/veditor
```
# demo
```bash
npm run start
```
+ [Basic Demo](https://vesoft-inc.github.io/nebulagraph-veditor/public/basic.html)
+ [FlowChart Demo](https://vesoft-inc.github.io/nebulagraph-veditor/public/flowChart.html)
+ [React Demo](https://vesoft-inc.github.io/nebulagraph-veditor/public/demo.html)
+ [Force-directed Graph](https://vesoft-inc.github.io/nebulagraph-veditor/public/graph.html)
# Build
```bash
npm run build
# make declaration
npm run makeDts
```
## Quick Start
```typescript
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](https://vesoft-inc.github.io/nebulagraph-veditor/start)
- [Custom Shape](https://vesoft-inc.github.io/nebulagraph-veditor/custom)
- [Event](https://vesoft-inc.github.io/nebulagraph-veditor/event)
- [API](https://vesoft-inc.github.io/nebulagraph-veditor/docs)
# License
Apache 2.0