{"id":16417100,"url":"https://github.com/zuramai/graphism","last_synced_at":"2025-03-23T06:31:36.609Z","repository":{"id":55142344,"uuid":"458701714","full_name":"zuramai/graphism","owner":"zuramai","description":"A tool to create graph visualization and run algorithms on top of it","archived":false,"fork":false,"pushed_at":"2022-12-21T10:00:25.000Z","size":438,"stargazers_count":16,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T18:43:26.872Z","etag":null,"topics":["algorithm","canvas","graph","graph-visualization","visualization"],"latest_commit_sha":null,"homepage":"https://zuramai.github.io/graphism","language":"TypeScript","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/zuramai.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}},"created_at":"2022-02-13T03:45:00.000Z","updated_at":"2024-06-06T03:44:15.000Z","dependencies_parsed_at":"2023-01-30T03:15:33.391Z","dependency_job_id":null,"html_url":"https://github.com/zuramai/graphism","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuramai%2Fgraphism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuramai%2Fgraphism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuramai%2Fgraphism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuramai%2Fgraphism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zuramai","download_url":"https://codeload.github.com/zuramai/graphism/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245066497,"owners_count":20555402,"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":["algorithm","canvas","graph","graph-visualization","visualization"],"created_at":"2024-10-11T07:11:01.922Z","updated_at":"2025-03-23T06:31:36.170Z","avatar_url":"https://github.com/zuramai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/45036724/172974810-4ba481f9-bd24-4128-99aa-ebfdd61cf19a.svg\" alt=\"Graphism Logo\" width=\"400\" height=\"120\" align=\"center\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nA tool to create graph visualization \n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://zuramai.github.io/graphism\"\u003ePlayground\u003c/a\u003e • \u003ca href=\"https://zuramai.github.io/graphism/docs\"\u003eDocumentation\u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- Vanilla JavaScript - integrate into any framework you like\n- Run algorithms on the graph (like Kruskal's algorithm, Dijkstra's algorithm, etc)\n- Design your own graph\n- Save graph in .png\n\n## Install\n\n```bash\nnpm i graphism\n```\n\n```html\n\u003ccanvas id=\"canvas\"\u003e\n```\n\n```js\nimport { createGraphism } from 'graphism'\n\nconst graphism = createGraphism({\n    el: '#canvas',\n    canvasBackground: '#eee'\n})\n\n// Generate an random graph\ngraphism.generateGraph()\n\n```\n\n## API\n```ts\n// Create new node and return the Node instance\ncreateNode: (name: string, coordinate: Coordinate, config?: NodeConfig) =\u003e NodeInterface\n\n// Clear selected\nclearSelectedNode: () =\u003e void\nclearSelectedLine: () =\u003e void\n\n// Select a node\nselectNode: (node: NodeInterface, mode: CanvasMode = \"normal\") =\u003e NodeInterface\n\n// Connect two node\naddNodeNeighbor: (from: NodeInterface, to: NodeInterface, distance: number) =\u003e void\n\n// Generate random graph \ngenerateGraph: () =\u003e void\n\n// Event listener\non: (event: string, callback: any, once: boolean = false) =\u003e void\n```\n\n\n## Events\n\n### Event Usage\n\nExample of event usage\n```js\ngraphism.on(\"node:select\", (node1: NodeInterface) =\u003e {\n    console.log(`The node clicked contains value = ${node1.value}`)\n})\n\n// If you want the event only trigger once, add `true` to the third param\ngraphism.on(\"grab\", () =\u003e {\n    console.log(\"You are grabbing the canvas, this will only run once\")\n}, true)\n```\n\n### Event list\n\n| Name | Param | Description |\n| ---- | ----- | ----------- |\n| mounted |  | Graphism is successfully mounted |\n| grab | | User grabbing on the canvas |\n| error | (message: string) | Triggered when error occured |\n| canvas:click | (coordinate: Coordinate) | Canvas clicked by user |\n| node:created | | New node created |\n| node:move | (node: NodeInterface) | Node moved |\n| node:mouseover | | The cursor is on the node | \n| node:mouseleave | | The cursor is going out from the node |\n| node:select | | Node is selected |\n| node:deselect | | Node is deselected |\n| node:clearSelect |  | All nodes is deselected |\n| node:connect | | Two nodes are connected |\n| line:select | | Line is selected |\n| line:deselect | | Line is deselected |\n| line:clearSelect | | All lines is deselected |\n| line:mouseover | | The cursor is on the line |\n\n## License\nMIT License\t\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzuramai%2Fgraphism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzuramai%2Fgraphism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzuramai%2Fgraphism/lists"}