{"id":19220609,"url":"https://github.com/gorenje/node-red-flowviewer-js","last_synced_at":"2025-10-05T05:15:54.301Z","repository":{"id":182034782,"uuid":"667836462","full_name":"gorenje/node-red-flowviewer-js","owner":"gorenje","description":"Code for an Unofficial Node-RED inline flow viewer","archived":false,"fork":false,"pushed_at":"2025-06-09T16:08:42.000Z","size":7814,"stargazers_count":15,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-28T22:44:14.477Z","etag":null,"topics":["node-red","svg","visual-programming"],"latest_commit_sha":null,"homepage":"https://blog.openmindmap.org/blog/backticks-in-markdown-and-node-red","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gorenje.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,"zenodo":null}},"created_at":"2023-07-18T12:11:11.000Z","updated_at":"2025-06-09T16:08:46.000Z","dependencies_parsed_at":"2023-12-20T12:49:43.486Z","dependency_job_id":"0a8ce588-0164-4a75-b4aa-a67bb13e9ac6","html_url":"https://github.com/gorenje/node-red-flowviewer-js","commit_stats":null,"previous_names":["gorenje/node-red-flowviewer-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gorenje/node-red-flowviewer-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorenje%2Fnode-red-flowviewer-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorenje%2Fnode-red-flowviewer-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorenje%2Fnode-red-flowviewer-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorenje%2Fnode-red-flowviewer-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gorenje","download_url":"https://codeload.github.com/gorenje/node-red-flowviewer-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorenje%2Fnode-red-flowviewer-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278411261,"owners_count":25982368,"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","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["node-red","svg","visual-programming"],"created_at":"2024-11-09T14:35:40.031Z","updated_at":"2025-10-05T05:15:54.284Z","avatar_url":"https://github.com/gorenje.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Unofficial Node-RED flow viewer\n\nCreate renderings of your Node-RED flows in the browser.\n\nThis:\n\n```\n[{\"id\":\"95114553b51edb0e\",\"type\":\"group\",\"z\":\"1cf772ae2066495e\",\"style\":{\"stroke\":\"#999999\",\"stroke-opacity\":\"1\",\"fill\":\"none\",\"fill-opacity\":\"1\",\"label\":true,\"label-position\":\"nw\",\"color\":\"#a4a4a4\"},\"nodes\":[\"90aee4ed68c9b0d4\",\"9566742be56e5253\",\"e4fc9a0bc5334568\"],\"x\":66,\"y\":148,\"w\":1072,\"h\":420.5},{\"id\":\"9566742be56e5253\",\"type\":\"group\",\"z\":\"1cf772ae2066495e\",\"g\":\"95114553b51edb0e\",\"name\":\"Fails\",\"style\":{\"label\":true},\"nodes\":[\"6f3ef30b39769654\",\"d5b30c5a1123d50e\",\"0a5eea257dc1fa82\",\"129e1f3418ce8fce\",\"a66882716c7e581f\"],\"x\":335,\"y\":174,\"w\":706,\"h\":162},{\"id\":\"e4fc9a0bc5334568\",\"type\":\"group\",\"z\":\"1cf772ae2066495e\",\"g\":\"95114553b51edb0e\",\"name\":\"Succeeds\",\"style\":{\"label\":true},\"nodes\":[\"f8cd8013dad6a7e2\",\"64b3488ed906c211\",\"9dd05af5ce6443a9\",\"b4f9e6b24c0651b3\",\"211ed735c0cfa73f\"],\"x\":334,\"y\":393,\"w\":778,\"h\":149.5},{\"id\":\"6f3ef30b39769654\",\"type\":\"split\",\"z\":\"1cf772ae2066495e\",\"g\":\"9566742be56e5253\",\"name\":\"\",\"splt\":\"\\\\n\",\"spltType\":\"str\",\"arraySplt\":1,\"arraySpltType\":\"len\",\"stream\":false,\"addname\":\"\",\"x\":411,\"y\":215,\"wires\":[[\"d5b30c5a1123d50e\"]]},{\"id\":\"d5b30c5a1123d50e\",\"type\":\"switch\",\"z\":\"1cf772ae2066495e\",\"g\":\"9566742be56e5253\",\"name\":\"is not null\",\"property\":\"payload\",\"propertyType\":\"msg\",\"rules\":[{\"t\":\"nnull\"}],\"checkall\":\"true\",\"repair\":false,\"outputs\":1,\"x\":511,\"y\":295,\"wires\":[[\"a66882716c7e581f\"]]},{\"id\":\"0a5eea257dc1fa82\",\"type\":\"join\",\"z\":\"1cf772ae2066495e\",\"g\":\"9566742be56e5253\",\"name\":\"\",\"mode\":\"auto\",\"build\":\"object\",\"property\":\"payload\",\"propertyType\":\"msg\",\"key\":\"topic\",\"joiner\":\"\\\\n\",\"joinerType\":\"str\",\"accumulate\":\"false\",\"timeout\":\"\",\"count\":\"\",\"reduceRight\":false,\"x\":760,\"y\":295,\"wires\":[[\"129e1f3418ce8fce\"]]},{\"id\":\"129e1f3418ce8fce\",\"type\":\"debug\",\"z\":\"1cf772ae2066495e\",\"g\":\"9566742be56e5253\",\"name\":\"no output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"payload\",\"targetType\":\"msg\",\"statusVal\":\"\",\"statusType\":\"auto\",\"x\":935,\"y\":295,\"wires\":[]},{\"id\":\"f8cd8013dad6a7e2\",\"type\":\"split\",\"z\":\"1cf772ae2066495e\",\"g\":\"e4fc9a0bc5334568\",\"name\":\"\",\"splt\":\"\\\\n\",\"spltType\":\"str\",\"arraySplt\":1,\"arraySpltType\":\"len\",\"stream\":false,\"addname\":\"\",\"x\":429,\"y\":434,\"wires\":[[\"64b3488ed906c211\"]]},{\"id\":\"64b3488ed906c211\",\"type\":\"switch\",\"z\":\"1cf772ae2066495e\",\"g\":\"e4fc9a0bc5334568\",\"name\":\"is not null \u0026amp; otherwise\",\"property\":\"payload\",\"propertyType\":\"msg\",\"rules\":[{\"t\":\"nnull\"},{\"t\":\"else\"}],\"checkall\":\"true\",\"repair\":false,\"outputs\":2,\"x\":460,\"y\":495.5,\"wires\":[[\"211ed735c0cfa73f\"],[\"9dd05af5ce6443a9\"]]},{\"id\":\"9dd05af5ce6443a9\",\"type\":\"join\",\"z\":\"1cf772ae2066495e\",\"g\":\"e4fc9a0bc5334568\",\"name\":\"\",\"mode\":\"auto\",\"build\":\"object\",\"property\":\"payload\",\"propertyType\":\"msg\",\"key\":\"topic\",\"joiner\":\"\\\\n\",\"joinerType\":\"str\",\"accumulate\":\"false\",\"timeout\":\"\",\"count\":\"\",\"reduceRight\":false,\"x\":854,\"y\":501.5,\"wires\":[[\"b4f9e6b24c0651b3\"]]},{\"id\":\"90aee4ed68c9b0d4\",\"type\":\"inject\",\"z\":\"1cf772ae2066495e\",\"g\":\"95114553b51edb0e\",\"name\":\"payload: [null,1,2]\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"[null,1,2]\",\"payloadType\":\"json\",\"x\":192,\"y\":330.5,\"wires\":[[\"f8cd8013dad6a7e2\",\"6f3ef30b39769654\"]]},{\"id\":\"b4f9e6b24c0651b3\",\"type\":\"debug\",\"z\":\"1cf772ae2066495e\",\"g\":\"e4fc9a0bc5334568\",\"name\":\"original arrary\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"payload\",\"targetType\":\"msg\",\"statusVal\":\"\",\"statusType\":\"auto\",\"x\":986,\"y\":434,\"wires\":[]},{\"id\":\"a66882716c7e581f\",\"type\":\"function\",\"z\":\"1cf772ae2066495e\",\"g\":\"9566742be56e5253\",\"name\":\"... do something ...\",\"func\":\"\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":643,\"y\":215,\"wires\":[[\"0a5eea257dc1fa82\"]]},{\"id\":\"211ed735c0cfa73f\",\"type\":\"function\",\"z\":\"1cf772ae2066495e\",\"g\":\"e4fc9a0bc5334568\",\"name\":\"... do something ...\",\"func\":\"\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":681,\"y\":434,\"wires\":[[\"9dd05af5ce6443a9\"]]}]\n```\n\nBecomes this:\n\n![img](https://raw.githubusercontent.com/gorenje/cdn.openmindmap.org/main/flows/1cf772ae2066495e/preview.png)\n\nFor more details, see this [blog page](https://blog.openmindmap.org/blog/backticks-in-markdown-and-node-red) with an example of embedding this into a [HTML page](https://blog.openmindmap.org/embed/example.html).\n\n\nSource code is maintained in Node-RED, the [flows.json](flows.json) contains the flow that containts the code.\n\n## Artifacts\n\n- [GitHub repo](https://github.com/gorenje/node-red-flowviewer-js)\n- [Flow that maintains this code](https://flowhub.org/f/3b1289d7ccf9cb0f)\n- [Article](https://blog.openmindmap.org/blog/backticks-in-markdown-and-node-red)\n- [JS library for browser](https://cdn.openmindmap.org/embed/flowviewer.js)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorenje%2Fnode-red-flowviewer-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgorenje%2Fnode-red-flowviewer-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorenje%2Fnode-red-flowviewer-js/lists"}