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

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. Documentation is included in this package and is built with NextJS. To run the docs locally, run npm run start:docs.

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.

2.8 KiB Raw Blame History

Isoflow Editor | Github | Discord