{"id":21923146,"url":"https://github.com/n-yousefi/connect-it","last_synced_at":"2025-06-30T12:35:02.695Z","repository":{"id":59973101,"uuid":"540356134","full_name":"n-yousefi/connect-it","owner":"n-yousefi","description":"\u003cconnect-it\u003e 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. ","archived":false,"fork":false,"pushed_at":"2023-02-28T08:01:58.000Z","size":164,"stargazers_count":13,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T02:03:35.899Z","etag":null,"topics":["arrow","connect-it","diagram","digraph","flowchart","graph","javascript","line","mind-map","network-diagram","svg","tree","web-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/n-yousefi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-23T08:53:37.000Z","updated_at":"2025-02-15T16:03:36.000Z","dependencies_parsed_at":"2023-02-14T11:16:33.369Z","dependency_job_id":null,"html_url":"https://github.com/n-yousefi/connect-it","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n-yousefi%2Fconnect-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n-yousefi%2Fconnect-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n-yousefi%2Fconnect-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n-yousefi%2Fconnect-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/n-yousefi","download_url":"https://codeload.github.com/n-yousefi/connect-it/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249725131,"owners_count":21316123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arrow","connect-it","diagram","digraph","flowchart","graph","javascript","line","mind-map","network-diagram","svg","tree","web-component"],"created_at":"2024-11-28T21:09:19.963Z","updated_at":"2025-04-19T15:21:06.772Z","avatar_url":"https://github.com/n-yousefi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;connect-it\u0026gt;\n\nConnect everything together with SVG lines. `\u003cconnect-it\u003e` 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.\n\n## Features\n\n- Suitable for creating different types of diagrams\n- independent of node types\n- Customizable link colors and sizes\n- Customizable markers (circle, square, triangle)\n- Create interactive diagrams by adding event handlers for edges (click, mouseover, mouseout)\n\n## Examples/Demos\n\nThe best way to become familiar with the library is to check out this demos:\n\n- [Diffrent node types](https://htmlpreview.github.io/?https://github.com/n-yousefi/connect-it/blob/main/samples/diffrent-node-types.html)\n- [Movable random nodes](https://htmlpreview.github.io/?https://github.com/n-yousefi/connect-it/blob/main/samples/movable-random-nodes.html)\n- [Flowchart](https://htmlpreview.github.io/?https://github.com/n-yousefi/connect-it/blob/main/samples/flowchart.html)\n\n## Installing\n\nUsing npm:\n\n[![npm](https://img.shields.io/badge/npm-connect--to-brightgreen)](https://www.npmjs.com/package/connect-it/)\n\n```bash\n$ npm install connect-it\n```\n\nUsing jsDelivr CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/connect-it/dist/connect-it.js\"\u003e\u003c/script\u003e\n```\n\nUsing unpkg CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/connect-it/dist/connect-it.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Nodes\n\nSpecify an Id for your node and put it inside the `\u003cnodes\u003e` tag. You can style it as you wish.\n\n```html\n\u003cconnect-it\u003e\n  \u003cnodes\u003e\n    \u003cdiv id=\"node1\"\u003eFirst\u003c/div\u003e\n    \u003cdiv id=\"node2\"\u003eSecond\u003c/div\u003e\n    \u003cdiv id=\"node3\"\u003eThird\u003c/div\u003e\n  \u003c/nodes\u003e\n\u003c/connect-it\u003e\n```\n\n### Adjacents\n\nDefine source and adjacent nodes to draw the graph. You can specify the color and size of the link.\n\n```html\n\u003cconnect-it\u003e\n  \u003cnodes\u003e\n    \u003cdiv id=\"node1\"\u003eFirst\u003c/div\u003e\n    \u003cdiv id=\"node2\"\u003eSecond\u003c/div\u003e\n    \u003cdiv id=\"node3\"\u003eThird\u003c/div\u003e\n  \u003c/nodes\u003e\n  \u003cedges\u003e\n    \u003cedge from=\"node1\" to=\"node2\" color=\"red\"\u003e\u003c/edge\u003e\n    \u003cedge from=\"node1\" to=\"node3\"\u003e\u003c/edge\u003e\n    \u003cedge from=\"node2\" to=\"node3\" size=\"2\"\u003e\u003c/edge\u003e\n  \u003c/edges\u003e\n\u003c/connect-it\u003e\n```\n\n### Edge Markers\n\nYou can define different shapes inside the `\u003cshapes\u003e` tag and use them as an edge marker.\nFor now, we support 3 type of shapes; `circle`, `square` and `triangle`.\n\n```html\n\u003cconnect-it\u003e\n  \u003cnodes\u003e\n    \u003cdiv id=\"node1\"\u003eFirst\u003c/div\u003e\n    \u003cdiv id=\"node2\"\u003eSecond\u003c/div\u003e\n    \u003cdiv id=\"node3\"\u003eThird\u003c/div\u003e\n  \u003c/nodes\u003e\n  \u003cedges\u003e\n    \u003cedge from=\"node1\" to=\"node2\" marker-start=\"s1\" marker-end=\"t1\"\u003e\u003c/edge\u003e\n    \u003cedge from=\"node1\" to=\"node3\"\u003e\u003c/edge\u003e\n    \u003cedge from=\"node2\" to=\"node3\"\u003e\u003c/edge\u003e\n  \u003c/edges\u003e\n  \u003cshapes\u003e\n    \u003cshape name=\"t1\" type=\"triangle\" size=\"10\" color=\"red\"\u003e\u003c/shape\u003e\n    \u003cshape name=\"s1\" type=\"square\" size=\"10\"\u003e\u003c/shape\u003e\n    \u003cshape name=\"c1\" type=\"circle\" size=\"5\" color=\"red\"\u003e\u003c/shape\u003e\n  \u003c/shapes\u003e\n\u003c/connect-it\u003e\n```\n\n### Event Handlers\n\n`connect-it` provides some event handlers that you can use to create interactive diagrams. The following event handlers are available now:\n\n- onEdgesMouseover: Called when the user hovers over an edge\n- onEdgesMouseout: Called when the user stops hovering over an edge\n- onEdgesClick: Called when the user clicks on an edge\n\nYou can use these event handlers to create custom interactions and animations in your graph.\n\n### Limitations\n\nCurrently fixed and sticky position is not supported.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn-yousefi%2Fconnect-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fn-yousefi%2Fconnect-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn-yousefi%2Fconnect-it/lists"}