Isoflow Documentation

Isoflow is a React component designed for drawing network diagrams. Key capabilities include:

• Drag-and-drop editor: Build architecture diagrams using icons, regions, and connectors.
• Extensible icon system: Supports custom icon libraries or plugins for major providers like AWS, Azure, GCP, and Kubernetes.
• Export options: Diagrams can be exported as either code or images.

Isoflow is an open-core project.

• Isoflow Community Edition: A fully-functional, open-source version available under the MIT license. You can find the source code on GitHub.
• Isoflow Pro: A commercial version that includes additional features for professional use.

To decide which version fits your needs, compare the features of Pro versus the Community Edition on the official Isoflow website.

If you want to run the online developer documentation on your local machine, use the following commands:

npm run docs:build
npm run docs:start

To run the Isoflow project locally for development, clone the repository and use the following commands to install dependencies and start the development server:

npm i
npm run start

To use the Isoflow editor and its icon libraries, install both the core isoflow package and the @isoflow/isopacks package via npm.

npm install isoflow @isoflow/isopacks

You can use Isoflow by importing it as an ES6 module. By default, rendering <Isoflow /> will display a blank editor without icons. To include icons, you must initialize the editor with an iconset (refer to the 'Loading Isopacks' guide).

import React from 'react';
import Isoflow from 'isoflow';

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

export default App;

Run the following command to add the Isopacks package to your project:

npm i @isoflow/isopacks

Isoflow is distributed as a React component. You can add it to your project using either npm or yarn package managers.

npm install isoflow

yarn add isoflow