{"id":16241532,"url":"https://github.com/tve/node-red-fd-network-diagram","last_synced_at":"2025-04-08T09:53:02.332Z","repository":{"id":146951474,"uuid":"473883742","full_name":"tve/node-red-fd-network-diagram","owner":"tve","description":"Display a network diagram in Node-RED using the FlexDash dashboard.","archived":false,"fork":false,"pushed_at":"2022-04-03T05:30:53.000Z","size":23,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-14T06:49:54.052Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tve.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-25T05:44:38.000Z","updated_at":"2023-02-02T17:35:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"1c7b6248-7b93-4130-9d56-023383cd1dc3","html_url":"https://github.com/tve/node-red-fd-network-diagram","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tve%2Fnode-red-fd-network-diagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tve%2Fnode-red-fd-network-diagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tve%2Fnode-red-fd-network-diagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tve%2Fnode-red-fd-network-diagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tve","download_url":"https://codeload.github.com/tve/node-red-fd-network-diagram/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247819946,"owners_count":21001394,"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":[],"created_at":"2024-10-10T14:07:56.108Z","updated_at":"2025-04-08T09:53:02.310Z","avatar_url":"https://github.com/tve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Network Diagram FlexDash Widget for Node-RED\n============================================\n\nHow-To using Docker\n-------------------\n\n- create a working directory (or use an existing one)\n- get the latest node-red-network-diagram as well as vis-network:\n```\n  git clone https://github.com/tve/node-red-fd-network-diagram\n  cd ./node-red-fd-network-diagram/widgets\n  npm install --production\n  cd ../..\n```\n- create a data directory for Node-RED and install node-red-flexdash there:\n```\n  mkdir network-diagram-data\n  cd network-diagram-data\n  npm install @flexdash/node-red-flexdash\n  cd ..\n```\n    (An alternative is to install it in the palette manager once Node-RED is up, but that's not\n    always the latest version.)\n- create a shell script to start Node-RED in docker, adjust paths and ports as desired:\n```\n#! /usr/bin/env bash\nmkdir -p network-diagram-data\ndocker run --rm -ti -p 1990:1880 \\\n  -v $PWD/node-red-fd-network-diagram:/usr/src/node-red/node-red-fd-network-diagram \\\n  -v $PWD/network-diagram-data:/data \\\n  --entrypoint bash \\\n  --name network-diagram \\\n  nodered/node-red:2.2.2 \\\n  -c \"npm i ./node-red-fd-network-diagram; npm start --cache /data/.npm -- -v -userDir /data\"\n```\n- launch the docker container by running the script (`bash ./start.sh` or similar)\n- open the flow editor at http://localhost:1990 and import the network-diagram simple example\n- deploy\n- watch the status of the FlexDash Dev node 'til it's ready, it will take 1-2 minutes the first time\n  you launch the docker container\n- open FlexDash at http://localhost:1990/flexdash-src, wait a minute for the dashboard to appear\n- you should have a widget with a little diagram\n- in the flow editor, hit the set_network inject node, then hit the add_nodes inject node, observe the changes\n\n### Running the dev server outside of docker\n\nOne annoyance with the FlexDash dev server built into Node-RED is that the first page load takes\na long time. This is not an issue when working on a widget, but it becomes painful when working\non a node because every test cycle requires restarting Node-Red and thus the dev server, and then\nwait a minute for the initial dashboard load.\n\nAn solution to this is to run the dev server outside of Node-RED so it stays running even when\nNode-RED is restarted. Here's how to do this:\n\n(This ended up being a few more steps than I anticipated, some automation is needed...)\n\n- stop the dev server running in Node-RED by editing the FD Dev Server node and unchecking \n  'enable dev server', then deploy (the dev server produces some temp files in the source dir's\n  node_modules and having two running at the same time is likely to cause issues)\n- create a symlink in the flexdash source directory that points to the widget(s) provided\n  by network-diagram, this is how FlexDash finds the extra widgets:\n```\n  cd network-diagram-data/flexdash-src/xtra\n  mkdir nd\n  cd nd\n  ln -s ../../../../node-red-network-diagram/widgets .\n  cd ../..   # ends up in flexdash-src dir\n```\n- adjust the dev server config file to let it serve the \"out of directory\" network diagram widgets:\n```\n  cp vite.config.js myvite.config.js\n```\n  edit myvite.config.js and after `base: \"./\",` add\n```\n  server:{fs:{allow:[\"../..\"]}},\n```\n- launch the dev server pointing it to the new config file\n```\n  npm run dev -- -c myvite.config.js\n```\n- you should see messages that vite is starting up, ending with something like\n```\n  vite v2.8.6 dev server running at:\n\n  \u003e Local:    http://localhost:3000/\n```\n- point your web browser at the dev server and tell FlexDash to connect to Node-RED for data\n  (ensure the ports are what vite printed and what you used in the docker config for Node-RED):\n  http://localhost:3000/flexdash-src?sio=http://localhost:1990/flexdash/io\n- you should see two widgets: \"Welcome to FlexDash\" and the small network-diagram; if you get a\n  pop-up to change connections, then the \"sio\" URL is incorrect or Node-RED is not running\n  (if you look into the Node-RED console log you'll see a line printed by FlexDash with\n  \"sio options\" and you need the \"path\" portion)\n\n\nNon-docker (untested)\n---------------------\n\n- git clone network-diagram: https://github.com/tve/node-red-fd-network-diagram\n- install vis-network (`cd node-red-fd-network-diagram/widgets; npm install --production`)\n- install it in Node-RED (in the Node-RED dir run `npm install ../path/to/node-red-fd-network-diagram`)\n- (this should also install node-red-flexdash because it's a dependency)\n- start Node-RED\n- create a new flow and import the example flow from the network diagram pkg\n- you will need to wait a while the first time while the dev server downloads flexdash and gets it running\n- open FlexDash and proceed as with docker\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftve%2Fnode-red-fd-network-diagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftve%2Fnode-red-fd-network-diagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftve%2Fnode-red-fd-network-diagram/lists"}