An open-source isometric whiteboard for React.

Key Features

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.

Roadmap

Beta release progress: ██████░░░

Basic view controls (pan & zoom)
Create / delete nodes
Create / delete rectangle areas
Create / delete connectors
onSceneUpdate callback
Drag items
Iconpacks
Export options

Quick start

Install the Isoflow npm package:

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. The sandbox is always synced with the Github repo.

Contributing

Missing something or found a bug? Report it here.
Want to contribute? See good first issues.

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:

Bump the version using npm version patch or similar
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).

3 KiB Raw Blame History

Isoflow Editor | Github | Discord