{"id":20595985,"url":"https://github.com/jsplumb-demonstrations/segmented-connectors","last_synced_at":"2026-05-26T13:42:46.401Z","repository":{"id":230991459,"uuid":"780659321","full_name":"jsplumb-demonstrations/segmented-connectors","owner":"jsplumb-demonstrations","description":"Examples of the segmented connector and how to edit paths with segmented connectors","archived":false,"fork":false,"pushed_at":"2025-08-11T04:24:33.000Z","size":19,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"7.x","last_synced_at":"2025-08-11T06:27:55.298Z","etag":null,"topics":["diagramming","diagrams","javascript","jointjs","jsplumb","svg","visualization"],"latest_commit_sha":null,"homepage":"https://jsplumbtoolkit.com/demonstrations/segmented-connectors","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsplumb-demonstrations.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-01T23:19:47.000Z","updated_at":"2025-08-11T04:21:19.000Z","dependencies_parsed_at":"2024-04-18T03:42:32.404Z","dependency_job_id":"24c4d5c5-1c3f-45ad-8a22-1c0a78494188","html_url":"https://github.com/jsplumb-demonstrations/segmented-connectors","commit_stats":null,"previous_names":["jsplumb-demonstrations/segmented-connectors"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/jsplumb-demonstrations/segmented-connectors","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fsegmented-connectors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fsegmented-connectors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fsegmented-connectors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fsegmented-connectors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsplumb-demonstrations","download_url":"https://codeload.github.com/jsplumb-demonstrations/segmented-connectors/tar.gz/refs/heads/7.x","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fsegmented-connectors/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33523659,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T03:12:49.672Z","status":"ssl_error","status_checked_at":"2026-05-26T03:12:47.976Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["diagramming","diagrams","javascript","jointjs","jsplumb","svg","visualization"],"created_at":"2024-11-16T08:14:39.948Z","updated_at":"2026-05-26T13:42:46.370Z","avatar_url":"https://github.com/jsplumb-demonstrations.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Segmented connectors\n\n### What are segmented connectors?\n\nThis connector type consists of a set of straight line segments, with the option to smooth the segments into a series of Bezier curves. This type of connector is useful for a wide range of different UIs - flowcharts, process flows, CAD applications - anything where the user wants fine grained control of the path that the edges follow.\nEditing paths\n\nThe editor for this connector type supports three operations:\n\n- Segment end points can be dragged around\n- The scissors icon cuts a segment into two.\n- The trashcan icon deletes a segment. This icon is not shown when the connector has only one segment.\n\n### Path smoothing\n\nSegmented connectors can be rendered with \"smoothing\" enabled, in which mode the path is represented as a series of Bezier splines.\n\nSmoothing can be switched on via the `smooth` flag in the connector options. In this demonstration, you can toggle smoothing via the Toggle smoothing button.\nEditing smooth paths\n\nWhen smoothing is switched on, the drag handles mark the control points of the Bezier curves.\n\n### Further reading\n\n- Read more about segmented connectors in the docs on this page: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/connectors#segmented\n- See this demo at [https://jsplumbtoolkit.com/demonstrations/segmented-connectors](https://jsplumbtoolkit.com/demonstrations/segmented-connectors)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsplumb-demonstrations%2Fsegmented-connectors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsplumb-demonstrations%2Fsegmented-connectors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsplumb-demonstrations%2Fsegmented-connectors/lists"}