mirror of
https://github.com/markmanx/isoflow.git
synced 2025-02-01 07:34:46 +00:00
chore: updates README
This commit is contained in:
Mark Mankarious
parent
9354afb2ac
commit
3c3d9a0c31
1 changed files with 39 additions and 39 deletions
78
README.md
78
README.md
|
|
@ -1,42 +1,49 @@
|
|||
|
||||
|
||||
<h4 align="center">
|
||||
<a href="beta.isoflow.io">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 isometric whiteboard for React.</h2>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
|
||||
|
||||
A highly customizable React component for building interactive network diagrams.
|
||||
|
||||
MIT licence | Source available on [Github](https://github.com/markmanx/isoflow) | 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).
|
||||
- **Annotation tools:** Annotate your whiteboard with isometric icons, labels, rectangles 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.
|
||||
- **Powerful annotation tools:** Annotate nodes, rectangles and connectors.
|
||||
- **Step-by-step walkthroughs:** Create interactive tours of large diagrams to help viewers easily digest information.
|
||||
|
||||
## Roadmap
|
||||
|
||||
Version 1: ██████████░░
|
||||
Beta release progress: ██████░░░
|
||||
|
||||
- [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 itemControls
|
||||
- [x] Node controls
|
||||
- [ ] Rectangle controls
|
||||
- [ ] Connector controls
|
||||
- [ ] Publish icons as separate importable package
|
||||
- [x] Basic view controls (pan & zoom)
|
||||
- [x] Create / delete nodes
|
||||
- [x] Create / delete rectangle areas
|
||||
- [x] Create / delete connectors
|
||||
- [x] onSceneUpdate callback
|
||||
- [ ] Drag items
|
||||
- [ ] Iconpacks
|
||||
- [ ] Export options
|
||||
|
||||
## Installation
|
||||
## Quick start
|
||||
|
||||
Note: Isoflow is currently in development and _NOT_ production ready. To view it's current state of development:
|
||||
Install the [Isoflow npm package](https://www.npmjs.com/package/isoflow):
|
||||
```
|
||||
npm install isoflow
|
||||
```
|
||||
|
||||
`npm install isoflow`
|
||||
Render a diagram:
|
||||
|
||||
```
|
||||
import Isoflow from 'isoflow';
|
||||
|
|
@ -46,14 +53,12 @@ const scene = {
|
|||
{
|
||||
id: "block",
|
||||
name: "Block",
|
||||
url: "https://isoflow.io/static/assets/icons/networking/primitive.svg",
|
||||
category: "Networking",
|
||||
url: "https://isoflow.io/static/assets/icons/networking/primitive.svg"
|
||||
},
|
||||
],
|
||||
nodes: [
|
||||
{
|
||||
id: "a_node",
|
||||
label: "A node",
|
||||
id: "node1",
|
||||
icon: "block",
|
||||
position: {
|
||||
x: 0,
|
||||
|
|
@ -68,7 +73,7 @@ const scene = {
|
|||
const App = () => (
|
||||
<Isoflow
|
||||
height={500}
|
||||
scene={scene}
|
||||
initialScene={scene}
|
||||
>
|
||||
)
|
||||
```
|
||||
|
|
@ -81,19 +86,18 @@ const Isoflow = dynamic(() => import("isoflow"), {
|
|||
});
|
||||
```
|
||||
|
||||
## Development setup
|
||||
|
||||
1. Clone the repo
|
||||
2. `npm i`
|
||||
3. `npm run start`
|
||||
4. Visit `localhost:3000` in your browser
|
||||
|
||||
## 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. You can make changes by forking the template.
|
||||
The sandbox is always synced with the Github repo.
|
||||
|
||||
## To deploy to npm
|
||||
## 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:
|
||||
|
|
@ -101,8 +105,6 @@ To deploy:
|
|||
1. Bump the version using `npm version patch` or similar
|
||||
2. `git push && git push --tags`
|
||||
|
||||
## Contributions
|
||||
|
||||
### Branching Strategy:
|
||||
|
||||
Branches are named using the following convention:
|
||||
|
|
@ -116,8 +118,6 @@ Branches are named using the following convention:
|
|||
- 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
|
||||
|
||||
See [good first issues](https://github.com/markmanx/isoflow/contribute).
|
||||
|
||||
## License
|
||||
|
||||
Isoflow is MIT licensed (see ./LICENSE).
|
||||
|
|
|
|||
Loading…
Reference in a new issue