New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@gregoriusrippenstein/node-red-contrib-flow2uml

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gregoriusrippenstein/node-red-contrib-flow2uml - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

plugins/flow2mermaid.html

22

nodes/flow2mermaid.js

@@ -1,18 +0,6 @@

module.exports = function(RED) {
function Flow2MermaidFunctionality(config) {
RED.nodes.createNode(this,config);
var node = this;
var cfg = config;
node.on('close', function() {
node.status({});
});
node.on("input", function(msg, send, done) {
send(msg);
done();
});
module.exports = function (RED) {
function ConfigFlow2MermaidFunctionality(config) {
RED.nodes.createNode(this, config)
}
RED.nodes.registerType("Flow2UML", Flow2MermaidFunctionality);
}
RED.nodes.registerType('Flow2MermaidCfg', ConfigFlow2MermaidFunctionality);
}
{
"name" : "@gregoriusrippenstein/node-red-contrib-flow2uml",
"version": "0.0.6",
"version": "0.0.7",
"dependencies": {
},
"description": "Convert Node-RED to Mermaid UML flowchart diagram.",
"keywords": [

@@ -12,4 +13,4 @@ "node-red", "uml", "mermaid"

"homepage": "https://github.com/gorenje/node-red-contrib-flow2uml#README.md",
"license": "SEE LICENSE IN https://github.com/gorenje/node-red-contrib-flow2uml/blob/main/LICENSE",
"author": "Gerrit Riessen <nodered@spreads-the.love> (https://spread-the.love)",
"license": "Don't do Evil. -> https://github.com/gorenje/node-red-contrib-flow2uml/blob/main/LICENSE",
"author": "Gerrit Riessen <gerrit@openmindmap.org>",
"engines": {

@@ -21,2 +22,5 @@ "node": ">=8"

"version": ">=2.0.0",
"plugins": {
"sidebar-plugin": "plugins/flow2mermaid.html"
},
"nodes": {

@@ -27,3 +31,2 @@ "flowtomermaid": "nodes/flow2mermaid.js"

"description": "Convert current flow tab to Mermaid flow diagram.",
"repository": {

@@ -30,0 +33,0 @@ "type": "git",

## Flow to UML (Mermaid flowchart)
Convert the current flow tab to a Mermaid flowchart diagram.
Convert the current flow tab to a Mermaid UML flowchart diagram.
**Warning**: will replace the contents the *info* panel of the node.
**Warning**: will replace the contents of the clipboard, aka pasteboard.
Also this is best used with Node-RED 3.1.x because that has inbuilt support for rendering [Mermaid](https://mermaid.js.org/) diagrams.
Also this is best used with Node-RED 3.1.x because that has inbuilt support for rendering [Mermaid](https://mermaid.js.org/) diagrams. The generated UML can then be pasted to the info box for the flow.
## Generating diagram
In the property panel, hit the generate button:
Either use the Action List drop down, selecting *Convert flow to UML*:
![img](https://cdn.openmindmap.org/content/1696066692869_Screen_Shot_2023-09-30_at_11.35.14.png)
![img](https://cdn.openmindmap.org/content/1697468701824_Screen_Shot_2023-10-16_at_17.04.58.png)
Save the changes by clicking done and then there should be an image in the info box:
Or using the sidebar, first select the *Flow to UML* menu point
![img](https://cdn.openmindmap.org/content/1696066701424_Screen_Shot_2023-09-30_at_11.37.53.png)
![img](https://cdn.openmindmap.org/content/1697469135942_Screen_Shot_2023-10-16_at_17.06.39.png)
## Discussion
Then select a drection - either TB - top to bottom or LR - left to right:
This is a purely editor-based node with no interaction with the Node-RED server. The diagram generated is based on the current flow in the editor not the flow that has been deployed. Therefore any changes made in the editor will be reflected in the diagram generated.
![img](https://cdn.openmindmap.org/content/1697468872117_Screen_Shot_2023-10-16_at_17.06.48.png)
## Mermaid Syntax
After that the generate button will copy the UML to the pasteboard:
Beaware that Node-RED supports v9.4.3 of Mermaid and that the the [live editor](https://mermaid.live), at time of writing, at 10.4.0 - there are differences.
![img](https://cdn.openmindmap.org/content/1697468819760_Screen_Shot_2023-10-16_at_17.06.54.png)
If there is a syntax error:
## Discussion
![img](https://cdn.openmindmap.org/content/1696066496021_Screen_Shot_2023-09-30_at_11.34.31.png)
This is a purely editor-based node with no interaction with the Node-RED server. The diagram generated is based on the current flow in the editor not the flow that has been deployed. Therefore any changes made in the editor will be reflected in the diagram generated.
Then you can edit the Mermaid code in the info tab:
## Mermaid Syntax
![img](https://cdn.openmindmap.org/content/1696066696690_Screen_Shot_2023-09-30_at_11.35.57.png)
Beaware that Node-RED supports v9.4.3 of Mermaid, the [Mermaid live editor](https://mermaid.live), at time of writing, stands at 10.4.0 - there are differences.
Save the changes and the info box will either show the image or not.
Also the Node-RED editor sometimes shows an Mermaid Syntax error that can be resolved by doing a reload - your mileage might vary.

@@ -37,0 +37,0 @@ ### Artifacts

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc