JSPM

  • Created
  • Published
  • Downloads 454
  • Score
    100M100P100Q73985F
  • License MIT

A highly customizable React component for building interactive flow diagrams.

Package Exports

  • isoflow
  • isoflow/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (isoflow) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

readme-header

GitHub License MIT CircleCI

A highly customizable React component for building interactive network diagrams.

Coming soon under the MIT licence | Use it now on isoflow.io

Key Features

  • Real-time: Display real-time data on diagrams.
  • Customizable: Use your own isometric icon packs, or use our free set of networking icons (also under MIT).
  • Export options: Export diagrams as images, JSON or YAML.
  • Powerful annotation tools: Annotate nodes, groups and connectors.
  • Step-by-step walkthroughs: Create interactive tours of large diagrams to help viewers easily digest information.

Roadmap

Migration to open-source: ██░░░░░░░░░

  • Set up automated publishing to NPM registry
  • Migrate private JS project to public Typescript project
    • Pan / Select / Zoom modes
    • Display icons in itemControls
    • Node controls
    • Group controls
    • Connector controls
  • Publish icons as separate importable package

Installation

Note: Isoflow is currently in development and NOT production ready. To view it's current state of development:

npm install isoflow

import Isoflow from 'isoflow';

const scene = {
  icons: [
    {
      id: "block",
      name: "Block",
      url: "https://isoflow.io/static/assets/icons/networking/primitive.svg",
      category: "Networking",
    },
  ],
  nodes: [
    {
      id: "a_node",
      label: "A node",
      icon: "block",
      position: {
        x: 0,
        y: 0,
      },
    },
  ],
  connectors: [],
  groups: []
}

const App = () => (
  <Isoflow
    height={500}
    scene={scene}
  >
)

If using Next.js, make sure you only import Isoflow in the browser:

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

Development setup

  1. Clone the repo
  2. npm i
  3. npm run start
  4. Visit localhost:3000 in your browser

To deploy to npm

CI is sensitive to any tag pushed to main branch. It will build and deploy the app to NPM. To deploy:

  1. Bump the version using npm version patch or similar
  2. git push && git push --tags

Contributions

See good first issues.

License

Isoflow is MIT licensed (see ./LICENSE).