mirror of
https://github.com/markmanx/isoflow.git
synced 2025-02-08 12:27:53 +00:00
90 lines
2.2 KiB
Markdown
90 lines
2.2 KiB
Markdown
|
|
|
|
<div align="center">
|
|
|
|
|
|
|
|
|
|
A highly customizable React component for building interactive network diagrams.
|
|
|
|
Coming soon under the MIT licence | Use it now on [isoflow.io](https://isoflow.io)
|
|
|
|
</div>
|
|
|
|
## Key Features
|
|
|
|
- **Real-time:** Display real-time data on diagrams.
|
|
- **Customizable:** Use your own isometric icon packs, or use our free set of networking icons (also under MIT).
|
|
- **Export options:** Export diagrams as images, JSON or YAML.
|
|
- **Powerful annotation tools:** Annotate nodes, groups and connectors.
|
|
- **Step-by-step walkthroughs:** Create interactive tours of large diagrams to help viewers easily digest information.
|
|
|
|
## Roadmap
|
|
|
|
Migration to open-source: ██░░░░░░░░░
|
|
|
|
- [x] Set up automated publishing to NPM registry
|
|
- [ ] Migrate private JS project to public Typescript project
|
|
- [x] Pan / Select / Zoom modes
|
|
- [x] Display icons in sidebar
|
|
- [ ] Node controls
|
|
- [ ] Group controls
|
|
- [ ] Connector controls
|
|
- [ ] Publish icons as separate importable package
|
|
|
|
## Want to contribute?
|
|
|
|
See [good first issues](https://github.com/markmanx/isoflow/contribute).
|
|
|
|
## Installation
|
|
|
|
Note: Isoflow is currently in development and _NOT_ production ready. To view it's current state of development:
|
|
|
|
`npm install isoflow`
|
|
|
|
```
|
|
import Isoflow from 'isoflow';
|
|
|
|
const scene = {
|
|
icons: [
|
|
{
|
|
id: "block",
|
|
name: "Block",
|
|
url: "https://isoflow.io/static/assets/icons/networking/primitive.svg",
|
|
category: "Networking",
|
|
},
|
|
],
|
|
nodes: [
|
|
{
|
|
id: "a_node",
|
|
label: "A node",
|
|
icon: "block",
|
|
position: {
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
},
|
|
],
|
|
connectors: [],
|
|
groups: []
|
|
}
|
|
|
|
const App = () => (
|
|
<Isoflow
|
|
height={500}
|
|
scene={scene}
|
|
>
|
|
)
|
|
```
|
|
|
|
If using Next.js, make sure you only import Isoflow in the browser:
|
|
|
|
```
|
|
const Isoflow = dynamic(() => import("isoflow"), {
|
|
ssr: false,
|
|
});
|
|
```
|
|
|
|
## License
|
|
|
|
Isoflow is MIT licensed (see ./LICENSE).
|