About connect-it

connect-it is a web component designed to create various types of diagrams including flowcharts, mind maps, network diagrams, org charts, and flow diagrams using SVG lines. It is highly customizable and independent of node types, allowing developers to integrate any HTML element as a diagram node. Key features include customizable link colors and sizes, support for edge markers such as circles, squares, and triangles, and the ability to attach event handlers to edges for interactivity. Users can define mouseover, mouseout, and click events to create dynamic and responsive graph interactions. The component is framework-agnostic and can be installed via npm or included directly through CDNs like jsDelivr or unpkg. Usage involves wrapping nodes in a nodes tag and defining connections using edges tags, where source and target nodes are linked with optional styling attributes. Custom shapes can be defined within a shapes tag and referenced as edge markers. While it supports a wide range of visualizations, it curre

n

Published by

n-yousefi

Visit View Profile

README.md

View on GitHub

<connect-it>

Connect everything together with SVG lines. <connect-it> is a web component that allows you to create various types of diagrams, such as flowcharts, mind maps, network diagrams, org charts, and flow diagrams. The component is highly customizable, so you can create many other types of diagrams as well.

Features

Suitable for creating different types of diagrams
independent of node types
Customizable link colors and sizes
Customizable markers (circle, square, triangle)
Create interactive diagrams by adding event handlers for edges (click, mouseover, mouseout)

Examples/Demos

The best way to become familiar with the library is to check out this demos:

Installing

Using npm:

$ npm install connect-it

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/connect-it/dist/connect-it.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/connect-it/dist/connect-it.js"></script>

Usage

Nodes

Specify an Id for your node and put it inside the <nodes> tag. You can style it as you wish.

<connect-it>
  <nodes>
    <div id="node1">First</div>
    <div id="node2">Second</div>
    <div id="node3">Third</div>
  </nodes>
</connect-it>

Adjacents

Define source and adjacent nodes to draw the graph. You can specify the color and size of the link.

<connect-it>
  <nodes>
    <div id="node1">First</div>
    <div id="node2">Second</div>
    <div id="node3">Third</div>
  </nodes>
  <edges>
    <edge from="node1" to="node2" color="red"></edge>
    <edge from="node1" to="node3"></edge>
    <edge from="node2" to="node3" size="2"></edge>
  </edges>
</connect-it>

Edge Markers

You can define different shapes inside the <shapes> tag and use them as an edge marker. For now, we support 3 type of shapes; circle, square and triangle.

<connect-it>
  <nodes>
    <div id="node1">First</div>
    <div id="node2">Second</div>
    <div id="node3">Third</div>
  </nodes>
  <edges>
    <edge from="node1" to="node2" marker-start="s1" marker-end="t1"></edge>
    <edge from="node1" to="node3"></edge>
    <edge from="node2" to="node3"></edge>
  </edges>
  <shapes>
    <shape name="t1" type="triangle" size="10" color="red"></shape>
    <shape name="s1" type="square" size="10"></shape>
    <shape name="c1" type="circle" size="5" color="red"></shape>
  </shapes>
</connect-it>

Event Handlers

connect-it provides some event handlers that you can use to create interactive diagrams. The following event handlers are available now:

onEdgesMouseover: Called when the user hovers over an edge
onEdgesMouseout: Called when the user stops hovering over an edge
onEdgesClick: Called when the user clicks on an edge

You can use these event handlers to create custom interactions and animations in your graph.

Limitations

Currently fixed and sticky position is not supported.

connect-it