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

V1 release progress: █████████░

Basic view controls (pan & zoom)
Create / delete nodes
Create / delete connectors
Create / delete rectangle areas
Node icons (e.g. server, router etc)
Cloud service icons (i.e. AWS + GCP icons)
onSceneUpdate callback
Drag items
Documentation
Load / save diagram (locally as JSON)

Quick start

To integrate with your existing React app, install the Isoflow npm package:

npm install isoflow

Basic integration:

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

Running Isoflow in development mode

To run Isoflow on a local development server with hot-reloading enabled:

npm i
npm run start.

Developer documentation

For detailed API documentation, examples and more, see the online developer documentation. Or if you'd prefer to build and run the docs locally:

npm run start:docs

CodeSandbox

You can demo the latest version of Isoflow on CodeSandbox. 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.

2.9 KiB Raw Blame History

Isoflow Editor | Github | Discord