A highly customizable React component for building interactive network diagrams.

MIT licence | Source available on Github | Use it now on isoflow.io

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: ██░░░░░░░░░

• Set up automated publishing to NPM registry
• Migrate private JS project to public Typescript project
  • Pan / Select / Zoom modes
  • Display icons in itemControls
  • Node controls
  • Group controls
  • Connector controls
• Publish icons as separate importable package

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,
});

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. The sandbox is always synced with the Github repo. You can make changes by forking the template.

To deploy 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

Contributions

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

See good first issues.

License

Isoflow is MIT licensed (see ./LICENSE).