mirror of
https://github.com/markmanx/isoflow.git
synced 2025-02-08 04:18:29 +00:00
123 lines
3 KiB
Markdown
123 lines
3 KiB
Markdown
|
|
|
|
<h4 align="center">
|
|
<a href="https://codesandbox.io/p/sandbox/github/markmanx/isoflow">Isoflow Editor</a> |
|
|
<a href="https://github.com/markmanx/isoflow">Github</a> |
|
|
<a href="https://discord.gg/efXxbsha">Discord</a>
|
|
</h4>
|
|
|
|
<div align="center">
|
|
<h1>An open-source network diagram editor for React.</h2>
|
|
</div>
|
|
|
|
<div align="center">
|
|
|
|
[](https://opensource.org/licenses/MIT)
|
|
|
|
|
|
</div>
|
|
|
|
## Key Features
|
|
|
|
- **Annotation tools:** Annotate your architecture with isometric icons, labels, regions and connectors.
|
|
- **Customizable:** Use your own isometric icon packs, or the standard free set of networking icons (also under MIT).
|
|
- **Export options:** Export diagrams as images, JSON or YAML.
|
|
|
|
## Roadmap
|
|
|
|
Beta release progress: ███████░░
|
|
|
|
- [x] Basic view controls (pan & zoom)
|
|
- [x] Create / delete nodes
|
|
- [x] Create / delete rectangle areas
|
|
- [x] Create / delete connectors
|
|
- [x] onSceneUpdate callback
|
|
- [x] Drag items
|
|
- [x] Iconpacks
|
|
- [ ] Export options
|
|
|
|
## Quick start
|
|
|
|
Install the [Isoflow npm package](https://www.npmjs.com/package/isoflow):
|
|
```
|
|
npm install isoflow
|
|
```
|
|
|
|
Render a diagram:
|
|
|
|
```
|
|
import Isoflow from 'isoflow';
|
|
|
|
const scene = {
|
|
icons: [
|
|
{
|
|
id: "block",
|
|
name: "Block",
|
|
url: "https://isoflow.io/static/assets/icons/networking/primitive.svg"
|
|
},
|
|
],
|
|
nodes: [
|
|
{
|
|
id: "node1",
|
|
icon: "block",
|
|
position: {
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
},
|
|
],
|
|
connectors: [],
|
|
rectangles: []
|
|
}
|
|
|
|
const App = () => (
|
|
<Isoflow
|
|
height={500}
|
|
initialScene={scene}
|
|
>
|
|
)
|
|
```
|
|
|
|
If using Next.js, make sure you only import Isoflow in the browser:
|
|
|
|
```
|
|
const Isoflow = dynamic(() => import("isoflow"), {
|
|
ssr: false,
|
|
});
|
|
```
|
|
|
|
## Codesandbox
|
|
|
|
You can preview the latest version of Isoflow on Codesandbox [here](https://codesandbox.io/p/sandbox/github/markmanx/isoflow/tree).
|
|
The sandbox is always synced with the Github repo.
|
|
|
|
## Contributing
|
|
- Missing something or found a bug? Report it [here](https://github.com/markmanx/isoflow/issues).
|
|
- Want to contribute? See [good first issues](https://github.com/markmanx/isoflow/contribute).
|
|
|
|
# For contributors
|
|
|
|
## Deploying to NPM
|
|
|
|
CI is sensitive to any tag pushed to `main` branch. It will build and deploy the app to NPM.
|
|
To deploy:
|
|
|
|
1. Bump the version using `npm version patch` or similar
|
|
2. `git push && git push --tags`
|
|
|
|
### Branching Strategy:
|
|
|
|
Branches are named using the following convention:
|
|
|
|
- `feature/` for new feature implementations
|
|
- `fix/` for broken code / build / bug fixes
|
|
- `chore/` non-breaking & non-fixing code changes such as linting, formatting, etc.
|
|
|
|
#### Commit / PR Strategy:
|
|
|
|
- Commits are to be squashed prior to merge
|
|
- PRs are to target a singular issue in order to keep the commit history clean and easy to follow
|
|
|
|
## License
|
|
|
|
Isoflow is MIT licensed (see ./LICENSE).
|