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

Basic view controls (pan & zoom)
Create / delete nodes
Create / delete connectors
Create / delete rectangle areas
Generic networking icons (e.g. server, router etc)
onSceneUpdate callback
Drag items
Documentation
Load / save diagrams locally as JSON
Support for AWS and GCP icons

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. You can also build and run the docs locally:

npm run start:docs

CodeSandbox

Demo the latest version of Isoflow on CodeSandbox. The sandbox will always be synced with the main branch on the Github repo, and also includes the latest version of the developer documentation.

Using Isoflow commercially?

Isoflow is free to use for personal and commercial projects. If you're using Isoflow commercially, please consider sponsoring the project (please get in touch).

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.

3.2 KiB Raw Blame History

Isoflow Editor | Documentation | Github | Discord