{"id":21411777,"url":"https://github.com/elicdavis/node-flow","last_synced_at":"2025-03-16T18:17:31.276Z","repository":{"id":253040939,"uuid":"841118797","full_name":"EliCDavis/node-flow","owner":"EliCDavis","description":"Another Flow-based Node Graph Library","archived":false,"fork":false,"pushed_at":"2024-09-18T03:15:46.000Z","size":520,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-18T06:31:30.040Z","etag":null,"topics":["editor","flowchart","nocode","node-based-ui","node-graph","visual-programming"],"latest_commit_sha":null,"homepage":"https://elicdavis.github.io/node-flow/","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/EliCDavis.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}},"created_at":"2024-08-11T17:36:46.000Z","updated_at":"2024-09-18T03:15:10.000Z","dependencies_parsed_at":"2024-10-26T14:25:53.301Z","dependency_job_id":"5229dc6a-3983-43c9-9c24-b081f38b750b","html_url":"https://github.com/EliCDavis/node-flow","commit_stats":null,"previous_names":["elicdavis/node-flow"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EliCDavis%2Fnode-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EliCDavis%2Fnode-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EliCDavis%2Fnode-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EliCDavis%2Fnode-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EliCDavis","download_url":"https://codeload.github.com/EliCDavis/node-flow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243910820,"owners_count":20367545,"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":["editor","flowchart","nocode","node-based-ui","node-graph","visual-programming"],"created_at":"2024-11-22T17:47:32.410Z","updated_at":"2025-03-16T18:17:31.270Z","avatar_url":"https://github.com/EliCDavis.png","language":"TypeScript","readme":"# Node Flow\n\nAnother Flow-based Node graph Library.\n\nCheck it out [here](https://elicdavis.github.io/node-flow/).\n\n![promotional image](./docs/promotional-image.png)\n\n## About\n\nNode Flow is a javascript library that enables developers to build node based tools similar to Unreal Blueprints or Blender Nodes. \n\n## Features\n\n* Nodes\n* Markdown Notes\n* More Nodes\n\n## Install\n\nDownload the latest build [here](https://raw.githubusercontent.com/EliCDavis/node-flow/gh-pages/dist/web/NodeFlow.js).\n\n## API\n\n### Graph API\n\n#### Creation\n\nThe only requirement for creating a graph is providing it an instance of a [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas).\n\n```javascript\n// Create a canvas to render our graph to\nvar canvas = document.createElement(\"canvas\");\n\n// Create our Node Flow Graph\nvar graph = new NodeFlowGraph(canvas)\n```\n\nThere are a bunch of optional parameters you can provide the graph:\n\n```javascript\nvar graph = new NodeFlowGraph(canvas, {\n    // Background color of the graph.\n    backgroundColor: \"#FF5500\",\n\n    // You can add extra items to the context\n    // menu that pops up when you right click.\n    contextMenu: {\n        subMenus: [\n            {\n                // Text that shows up in the context\n                // menu \n                name: \"Example Context Menu Item\",\n                \n                // This is recursive. We can nest as \n                // many submenus within eachother as\n                // we want. This field is optional.\n                subMenus: [],\n\n                items: [\n                    {\n                        name: \"Sub menu Item!!!\"\n                    }\n                ]\n            }\n        ],\n\n        // Items that show up at the base of the \n        // context menu\n        items: [\n            {\n                // Text that shows up in the context\n                // menu \n                name: \"Example Context Menu Item\",\n                \n                // Function that get's executed when\n                // Item is clicked.\n                callback: () =\u003e {\n                    alert(\"Example Context Menu Item\");\n                }    \n            }\n        ]\n    },\n\n    // Notes we want rendered on the graph.\n    board: {\n        notes: [\n            {\n                // Where to render the note\n                position: { x: 20, y: 20 },\n\n                // Whether or not the note can be \n                // interacted with on the graph\n                locked: true,\n\n                // Markdown enabled text\n                text: `\n                # My First note!!!\n\n                Not sure what to write here\n                `\n            },  \n        ]\n    },\n});\n```\n\n### Node API\n\n#### Creation\n\n```javascript\n// All nodes require a title. That's about it.\nvar node = new FlowNode({ \n    title: \"My First Node!\",\n});\n\n// Be sure to add it to the graph so it can be rendered.\ngraph.addNode(node);\n```\n\n#### Inputs and Outputs\n\nCreate a Add node that takes two numbers and outputs a single number\n\n```javascript\nvar node = new FlowNode({ \n    title: \"Add\",\n    inputs: [\n        { name: \"a\", type: \"float32\" },\n        { name: \"b\", type: \"float32\" }\n    ],\n     outputs: [\n        { name: \"sum\", type: \"float32\" }\n    ],\n});\n```\n\nYou can also add additional inputs and outputs to the node after it's been created\n\n```javascript\nnode.addInput({ name: \"c\", type: \"float32\" })\nnode.addOutput({ name: \"sum\", type: \"float32\" })\n```\n\n## Library Development\n\nJust run\n\n```bash\nnpm run watch-dev\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felicdavis%2Fnode-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felicdavis%2Fnode-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felicdavis%2Fnode-flow/lists"}