Isoflow Editor | Github | Discord

An open-source React component for drawing network diagrams.

Key Features

• Annotation tools: Annotate your architecture with isometric icons, labels, regions and connectors.
• Customizable: Use the standard free set of networking icons (also included under the MIT licence), or create your own.
• Export options: Export diagrams as images, JSON or YAML.

Roadmap

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

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

Quick start

Install the Isoflow npm package:

npm install isoflow

Basic usage is as follows:

import Isoflow from 'isoflow';
import { networkingIsopack } from 'isoflow/dist/iconpacks';

const initialData = {
  icons: networkingIsopack,
  nodes: [
    {
      id: "node1",
      iconId: "server",
      position: {
        x: 0,
        y: 0,
      },
    },
  ],
  connectors: [],
  rectangles: []
};

const App = () => (
  <Isoflow initialData={initialData} />
);

Note: Isoflow cannot be server-side rendered. If using Next.js, make sure you only import Isoflow in the browser:

const Isoflow = dynamic(() => import("isoflow"), {
  ssr: false,
});

Developer documentation

For more detailed API documentation, examples and more, see the developer documentation.

CodeSandbox

Demo the latest version of Isoflow on Codesandbox here. The sandbox is always synced with the Github repo.

Contributing

• Isoflow is actively being worked on. Missing something or found a bug? Report it here or join our Discord server.
• Want to contribute? See good first issues.