Isoflow Editor | Github | Discord

An open-source network diagram editor for React.

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

• 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:

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).