@gregoriusrippenstein/node-red-contrib-flow2uml
Advanced tools
Comparing version 0.0.6 to 0.0.7
@@ -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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Trivial Package
Supply chain riskPackages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.
Found 1 instance in 1 package
18570
5
2