The three backticks notation in Markdown is heavily used by developers to share code snippets, configuration examples or other code-related information.
```
this is code
```
becomes this:
this is code
Backticks can also be given language specifications to do syntax highlighting:
```js
flowdata.forEach(function (obj) {
if (obj.type == "subflow") {
/* prefix subflow since this is the type of the node that uses this subflow - makes lookup simpler */
subflows["subflow:" + obj.id] = obj;
}
});
```
becomes this
flowdata.forEach(function (obj) {
if (obj.type == "subflow") {
/* prefix subflow since this is the type of the node that uses this subflow - makes lookup simpler */
subflows["subflow:" + obj.id] = obj;
}
});
See GitHub for more details on language specification with backticks. What GitHub also does is image replacement of backticks. This page demonstrates image replacement for Node-RED flows.json (when I write flows.json I mean the json representation of a Node-RED flow - be it one node or many modes), the following examples are all the same, first codeblock uses just backticks and the second (the image) is generated by using a language specification with the backticks, something like:
```noderedjson
<flows.json or flow snippet or just one node>
```
The language noderedjson codeblock is then replaced by a on-the-fly-frontend-only-generated (no server involved) SVG, i.e., an image of the flow.
Why did I do this?
To raise awareness of Node-RED. Having compared Jupyter to Node-RED, I realised that one thing Jupyter does is to have previews of their notebooks on GitHub (and everywhere else where notebooks are hosted). Doing some analogical thinking, I thought why does not Node-RED have this feature? As there was nothing, I decided to roll my own.
The following examples attempt to show what I mean. Goal is also to develop this library to the point where GitHub might be convinced to integrate it into its collection of image generating plugins. That would make the spread of Node-RED flow examples simpler (IMHO) since flows would be visualised to improve understandablility compared to a (sometimes very) long JSON string.
The library is not complete and there are many features still required. The codebase is maintained in Node-RED but eventually will be hosted on GitHub for easier collaboration.
Lots.
The flows.json (i.e., the json representation of a Node-RED flow) does not provide everything that one needs to display the flow as it would in the Node-RED editor. Labels can be functions meaning that labelling of nodes can be dynamic, something this plugin can not know. Node colours are hardcoded in the packages not in the flows.json, so this plugin has a list of hardcoded colours for knonwn nodes.
Node images are not included since, again, these are defined in the respective node packages and included by the editor at load-time but not stored in the flows.json, i.e., the json defintion of nodes.
Outputs and input decorations are slightly different from the Node-RED editor. When viewing a static image of a Node-RED and not having had any experience with Node-RED, one cannot be sure in which direction data flows. Each line is the flow of data but from where to where? Having used Node-RED, the answer is obvious: from left to right, i.e., the left side of a node is the input and the right side the output of data. But is this clear?
No, for someone who can not even imagine how “data flows” between nodes, the direction is unclear. So I decided to use triangles as indication for the direction of data flow. Input “decorators” point into the node to indicate that data is flowing into the node. The output decorators put away from the node to indicate data is flowing out of the node.
This will hopefully make it easier to understand what is meant by flow-based programming: lines should the data flow, nodes do the computation.
The basic language provided in the codeblock is noderedjson which attempts to be as close to the original editor design as possible. However options can be appended to the base language:
no-gridlines this removes the gridlines, while with-gridlines is provided for consistency
with-arrows this replaces the input decorations with arrows to indicate data flow direction (this is used on this page)
with-zoom makes the image zoomable and pannable. If the zoom gets a bit funky, then a double click on the image will reset it to the original sizing. Don’t use this option, see below for replacement.
no-images turns off the rendering of images on the nodes, this might be needed because of copyright issues. Default is to render flows with images. Only images for the core nodes have been included, third party icons and images are not included.
with-linklines shows the links between link in/out nodes in the flow. If both link in and link out nodes are included in the flow and are visual then a link line between them is also shown.
with-download-link will place a downlink at the bottom of the flow image. Clicking on the button and the flow data is downloaded to the flow.json file.
Naming of these options are with reference to the defaults, hence no-gridlines since the defaults are with gridlines, but with-arrows as the defaults have no arrows.
These options can be mixed and matched at will, for example, noderedjson-with-arrows-with-gridlines-with-zoom is the same as noderedjson-with-gridlines-with-zoom-with-arrows.
All examples in this page are with noderedjson-with-arrows except for the last two which are with noderedjson-with-arrows-with-zoom.
First the json string containing the flow:
[{"id":"548238136ca436ac","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow.html","links":[],"x":538,"y":482,"wires":[["6c47c59cbbbecdf5"]]},{"id":"6c47c59cbbbecdf5","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":734.7143707275391,"y":482,"wires":[["64c749a71e14498a"]]},{"id":"99a631acf3d6c5bf","type":"link out","z":"652104ea8724facc","name":"link out 80","mode":"return","links":[],"x":1580.0002040863037,"y":475.4285936355591,"wires":[]},{"id":"b360b1072d4d72fa","type":"switch","z":"652104ea8724facc","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1289.8573913574219,"y":481.8571538925171,"wires":[["99a631acf3d6c5bf"],[]]},{"id":"64c749a71e14498a","type":"template","z":"652104ea8724facc","name":"v1","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":482,"wires":[["b360b1072d4d72fa"]]},{"id":"f0de398e3cfa056a","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v2.html","links":[],"x":538,"y":541.5714330673218,"wires":[["b116c37cd891a5e7"]]},{"id":"b116c37cd891a5e7","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":541.5714330673218,"wires":[["861c435f7685cf55"]]},{"id":"861c435f7685cf55","type":"template","z":"652104ea8724facc","name":"v2","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":541.5714330673218,"wires":[["b360b1072d4d72fa"]]},{"id":"951cf6e2f214b95b","type":"template","z":"652104ea8724facc","name":"v3","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":597.2857732772827,"wires":[["b360b1072d4d72fa"]]},{"id":"7885fd1e6f944103","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v3.html","links":[],"x":538,"y":597.2857732772827,"wires":[["382f5f013b6f9a3b"]]},{"id":"382f5f013b6f9a3b","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":597.2857732772827,"wires":[["951cf6e2f214b95b"]]},{"id":"7b05f3f671073181","type":"template","z":"652104ea8724facc","name":"v4","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":662.2857732772827,"wires":[["b360b1072d4d72fa"]]},{"id":"3952279c3016c957","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v4.html","links":[],"x":538,"y":662.2857732772827,"wires":[["295d018b67f438b9"]]},{"id":"295d018b67f438b9","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":662.2857732772827,"wires":[["7b05f3f671073181"]]},{"id":"747018dc4b0adf33","type":"template","z":"652104ea8724facc","name":"v5","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":975.571418762207,"y":724.7143468856812,"wires":[["b360b1072d4d72fa"]]},{"id":"317130644c24a056","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v5.html","links":[],"x":543.1426277160645,"y":724.7143468856812,"wires":[["afca478f73a8601e"]]},{"id":"afca478f73a8601e","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":749.8569984436035,"y":724.7143468856812,"wires":[["747018dc4b0adf33"]]}]
This is the same codeblock but with language noderedjson:
[{"id":"548238136ca436ac","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow.html","links":[],"x":538,"y":482,"wires":[["6c47c59cbbbecdf5"]]},{"id":"6c47c59cbbbecdf5","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":734.7143707275391,"y":482,"wires":[["64c749a71e14498a"]]},{"id":"99a631acf3d6c5bf","type":"link out","z":"652104ea8724facc","name":"link out 80","mode":"return","links":[],"x":1580.0002040863037,"y":475.4285936355591,"wires":[]},{"id":"b360b1072d4d72fa","type":"switch","z":"652104ea8724facc","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1289.8573913574219,"y":481.8571538925171,"wires":[["99a631acf3d6c5bf"],[]]},{"id":"64c749a71e14498a","type":"template","z":"652104ea8724facc","name":"v1","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":482,"wires":[["b360b1072d4d72fa"]]},{"id":"f0de398e3cfa056a","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v2.html","links":[],"x":538,"y":541.5714330673218,"wires":[["b116c37cd891a5e7"]]},{"id":"b116c37cd891a5e7","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":541.5714330673218,"wires":[["861c435f7685cf55"]]},{"id":"861c435f7685cf55","type":"template","z":"652104ea8724facc","name":"v2","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":541.5714330673218,"wires":[["b360b1072d4d72fa"]]},{"id":"951cf6e2f214b95b","type":"template","z":"652104ea8724facc","name":"v3","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":597.2857732772827,"wires":[["b360b1072d4d72fa"]]},{"id":"7885fd1e6f944103","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v3.html","links":[],"x":538,"y":597.2857732772827,"wires":[["382f5f013b6f9a3b"]]},{"id":"382f5f013b6f9a3b","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":597.2857732772827,"wires":[["951cf6e2f214b95b"]]},{"id":"7b05f3f671073181","type":"template","z":"652104ea8724facc","name":"v4","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":662.2857732772827,"wires":[["b360b1072d4d72fa"]]},{"id":"3952279c3016c957","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v4.html","links":[],"x":538,"y":662.2857732772827,"wires":[["295d018b67f438b9"]]},{"id":"295d018b67f438b9","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":662.2857732772827,"wires":[["7b05f3f671073181"]]},{"id":"747018dc4b0adf33","type":"template","z":"652104ea8724facc","name":"v5","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":975.571418762207,"y":724.7143468856812,"wires":[["b360b1072d4d72fa"]]},{"id":"317130644c24a056","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v5.html","links":[],"x":543.1426277160645,"y":724.7143468856812,"wires":[["afca478f73a8601e"]]},{"id":"afca478f73a8601e","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":749.8569984436035,"y":724.7143468856812,"wires":[["747018dc4b0adf33"]]}]
That flow is part of the embeddation testing and shows how various page requires (http requests) are handled. Five different versions of this code.
This is the backup flow for flows! I use it to maintain backups of my Node-RED flows:
[{"id":"d598829cba783cad","type":"GetFlows","z":"f13d3b083d5cc429","name":"","flowVersion":"v1","useAuthentication":false,"apiUsername":"","apiUsernameType":"env","apiPassword":"","apiPasswordType":"env","x":349,"y":301,"wires":[["ddce7325bdba57d8"]]},{"id":"c507dd73478a26af","type":"inject","z":"f13d3b083d5cc429","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"7200","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":199,"y":181,"wires":[["d598829cba783cad"]]},{"id":"67b77f304303cb27","type":"http request","z":"f13d3b083d5cc429","name":"send off to backup server","method":"POST","ret":"txt","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":1119,"y":181,"wires":[[]]},{"id":"ddce7325bdba57d8","type":"change","z":"f13d3b083d5cc429","name":"setup payload for zip node","rules":[{"t":"set","p":"_p","pt":"msg","to":"[]","tot":"json"},{"t":"set","p":"_p[0]","pt":"msg","to":"{ \"filename\": \"openmindmap_flows.json\", \"payload\": \"\" }","tot":"json"},{"t":"set","p":"_p[0].payload","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"token","pt":"msg","to":"BACKUP_ZIP_TOKEN","tot":"env"},{"t":"set","p":"_p[1]","pt":"msg","to":"{ \"filename\": \"token.txt\", \"payload\": \"\" & token & \"\" }","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"_p","tot":"msg"},{"t":"set","p":"url","pt":"msg","to":"BACKUP_ENDPOINT","tot":"env"}],"action":"","property":"","from":"","to":"","reg":false,"x":549,"y":401,"wires":[["1f879c968f033a26"]]},{"id":"1f879c968f033a26","type":"zip","z":"f13d3b083d5cc429","name":"","mode":"compress","filename":"backup.zip","compressionlevel":"9","outasstring":false,"x":769,"y":401,"wires":[["53808fa58e1aa543"]]},{"id":"53808fa58e1aa543","type":"base64","z":"f13d3b083d5cc429","name":"","action":"","property":"payload","x":929,"y":301,"wires":[["67b77f304303cb27"]]}]
the visualised flow:
[{"id":"d598829cba783cad","type":"GetFlows","z":"f13d3b083d5cc429","name":"","flowVersion":"v1","useAuthentication":false,"apiUsername":"","apiUsernameType":"env","apiPassword":"","apiPasswordType":"env","x":349,"y":301,"wires":[["ddce7325bdba57d8"]]},{"id":"c507dd73478a26af","type":"inject","z":"f13d3b083d5cc429","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"7200","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":199,"y":181,"wires":[["d598829cba783cad"]]},{"id":"67b77f304303cb27","type":"http request","z":"f13d3b083d5cc429","name":"send off to backup server","method":"POST","ret":"txt","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":1119,"y":181,"wires":[[]]},{"id":"ddce7325bdba57d8","type":"change","z":"f13d3b083d5cc429","name":"setup payload for zip node","rules":[{"t":"set","p":"_p","pt":"msg","to":"[]","tot":"json"},{"t":"set","p":"_p[0]","pt":"msg","to":"{ \"filename\": \"openmindmap_flows.json\", \"payload\": \"\" }","tot":"json"},{"t":"set","p":"_p[0].payload","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"token","pt":"msg","to":"BACKUP_ZIP_TOKEN","tot":"env"},{"t":"set","p":"_p[1]","pt":"msg","to":"{ \"filename\": \"token.txt\", \"payload\": \"\" & token & \"\" }","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"_p","tot":"msg"},{"t":"set","p":"url","pt":"msg","to":"BACKUP_ENDPOINT","tot":"env"}],"action":"","property":"","from":"","to":"","reg":false,"x":549,"y":401,"wires":[["1f879c968f033a26"]]},{"id":"1f879c968f033a26","type":"zip","z":"f13d3b083d5cc429","name":"","mode":"compress","filename":"backup.zip","compressionlevel":"9","outasstring":false,"x":769,"y":401,"wires":[["53808fa58e1aa543"]]},{"id":"53808fa58e1aa543","type":"base64","z":"f13d3b083d5cc429","name":"","action":"","property":"payload","x":929,"y":301,"wires":[["67b77f304303cb27"]]}]
Groups can be used in Node-RED to cluster different nodes that work together, the plugin can visual groups aswell.
As json:
[{"id":"e2ec7bbe752d60b0","type":"BlogDetails","z":"184fd5793b8d906c","name":"Open Mind Map Blog Configuration","authorName":"Gregorius Rippenstein","authorEmail":"gregorius@rippenstein.art","authorUrl":"https://gregorius.rippenstein.art","blogUrl":"https://blog.openmindmap.org","blogPathPrefix":"/blog","blogTitle":"Open Mind Map Blog","blogSubtitle":"Global mind-map for a global world.","blogCopyrightOwner":"Open Mind-Map Org.","x":818,"y":906.5,"wires":[["85a8755de2d6ae5c"]]},{"id":"1956265f7f508d04","type":"group","z":"184fd5793b8d906c","name":"ensure correct domain","style":{"label":true,"fill":"#bfc7d7","fill-opacity":"0.71","color":"#000000"},"nodes":["26b099616f74f352","42795f82c29b8583","1f0ea79587166fdd","6f6d63b5fa995b5c","1d1325b68a7cac1e","cdaeb49728432c46"],"x":163,"y":136,"w":877,"h":189.5},{"id":"26b099616f74f352","type":"switch","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"check hostname","property":"req.hostname","propertyType":"msg","rules":[{"t":"eq","v":"blog.openmindmap.org","vt":"str"},{"t":"eq","v":"demo.openmindmap.org","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":533,"y":184.5,"wires":[["e2ec7bbe752d60b0"],["1f0ea79587166fdd"],["6f6d63b5fa995b5c"]]},{"id":"42795f82c29b8583","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/","method":"get","upload":false,"swaggerDoc":"","x":239,"y":184.5,"wires":[["26b099616f74f352"]]},{"id":"1f0ea79587166fdd","type":"http response","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"redirect if demo.omm.org","statusCode":"301","headers":{"Location":"/omm"},"x":887,"y":185.5,"wires":[]},{"id":"6f6d63b5fa995b5c","type":"http response","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"NOT FOUND everything else","statusCode":"404","headers":{},"x":894,"y":227.5,"wires":[]},{"id":"1d1325b68a7cac1e","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/blog/:name","method":"get","upload":false,"swaggerDoc":"","x":269,"y":232.5,"wires":[["26b099616f74f352"]]},{"id":"cdaeb49728432c46","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/:name","method":"get","upload":false,"swaggerDoc":"","x":259,"y":284.5,"wires":[["26b099616f74f352"]]},{"id":"95389d39f5c53d23","type":"group","z":"184fd5793b8d906c","name":"map path to blog content","style":{"label":true,"stroke":"#000000","color":"#000000"},"nodes":["85c463f82c547140","32bb06dfab9a9529","85a8755de2d6ae5c","7fa818203cac5402","71c533e01539c3d3","180d18e4931a5ace","0d6c29c07f300c15","f4781993f9dc4130","b41e2620ed591a2d","a4bf3e5ac7c74343","5d0edf716dc5c6b5"],"x":1182,"y":790.5,"w":2129,"h":264},{"id":"85c463f82c547140","type":"template","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"HTML Layout","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":3035,"y":1013.5,"wires":[["32bb06dfab9a9529"]]},{"id":"32bb06dfab9a9529","type":"http response","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"","statusCode":"200","headers":{},"x":3225,"y":932.5,"wires":[]},{"id":"85a8755de2d6ae5c","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"Path handling","property":"req.params.name","propertyType":"msg","rules":[{"t":"eq","v":"apple-touch-icon.png","vt":"str"},{"t":"eq","v":"favicon.ico","vt":"str"},{"t":"eq","v":"sitemap.xml","vt":"str"},{"t":"eq","v":"feed.xml","vt":"str"},{"t":"eq","v":"rss.xml","vt":"str"},{"t":"eq","v":"index","vt":"str"},{"t":"eq","v":"blog","vt":"str"},{"t":"nnull"},{"t":"else"}],"checkall":"false","repair":false,"outputs":9,"x":1288,"y":906.5,"wires":[[],[],[],[],[],["7fa818203cac5402"],["0d6c29c07f300c15"],["7fa818203cac5402"],["0d6c29c07f300c15"]]},{"id":"7fa818203cac5402","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"set page target: \"[blog] <name>\"","rules":[{"t":"set","p":"target","pt":"msg","to":"\"[blog] \" & msg.req.params.name","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1638,"y":886.5,"wires":[["71c533e01539c3d3"]]},{"id":"71c533e01539c3d3","type":"link call","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"generate page content","links":[],"linkType":"dynamic","timeout":"5","x":1941,"y":951.5,"wires":[["f4781993f9dc4130"]]},{"id":"180d18e4931a5ace","type":"markdown","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"Markdown to HTML","x":2794,"y":1013.5,"wires":[["85c463f82c547140"]]},{"id":"0d6c29c07f300c15","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"target: \"[blog] index\"","rules":[{"t":"set","p":"target","pt":"msg","to":"[blog] index","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1598,"y":951.5,"wires":[["71c533e01539c3d3"]]},{"id":"f4781993f9dc4130","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"ignore redirects","property":"statusCode","propertyType":"msg","rules":[{"t":"eq","v":"301","vt":"num"},{"t":"eq","v":"302","vt":"num"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":2152,"y":951.5,"wires":[[],[],["b41e2620ed591a2d"]]},{"id":"b41e2620ed591a2d","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"path extension is '.html'?","property":"page.path","propertyType":"msg","rules":[{"t":"regex","v":"\\.html$","vt":"str","case":true},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":2524,"y":831.5,"wires":[["32bb06dfab9a9529"],["a4bf3e5ac7c74343"]]},{"id":"a4bf3e5ac7c74343","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"is msg.htmlcontent set?","property":"htmlcontent","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":2526,"y":935.5,"wires":[["5d0edf716dc5c6b5"],["180d18e4931a5ace"]]},{"id":"5d0edf716dc5c6b5","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"htmlcontent","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":2863,"y":929.5,"wires":[["32bb06dfab9a9529"]]}]
as visualisation:
[{"id":"e2ec7bbe752d60b0","type":"BlogDetails","z":"184fd5793b8d906c","name":"Open Mind Map Blog Configuration","authorName":"Gregorius Rippenstein","authorEmail":"gregorius@rippenstein.art","authorUrl":"https://gregorius.rippenstein.art","blogUrl":"https://blog.openmindmap.org","blogPathPrefix":"/blog","blogTitle":"Open Mind Map Blog","blogSubtitle":"Global mind-map for a global world.","blogCopyrightOwner":"Open Mind-Map Org.","x":818,"y":906.5,"wires":[["85a8755de2d6ae5c"]]},{"id":"1956265f7f508d04","type":"group","z":"184fd5793b8d906c","name":"ensure correct domain","style":{"label":true,"fill":"#bfc7d7","fill-opacity":"0.71","color":"#000000"},"nodes":["26b099616f74f352","42795f82c29b8583","1f0ea79587166fdd","6f6d63b5fa995b5c","1d1325b68a7cac1e","cdaeb49728432c46"],"x":163,"y":136,"w":877,"h":189.5},{"id":"26b099616f74f352","type":"switch","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"check hostname","property":"req.hostname","propertyType":"msg","rules":[{"t":"eq","v":"blog.openmindmap.org","vt":"str"},{"t":"eq","v":"demo.openmindmap.org","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":533,"y":184.5,"wires":[["e2ec7bbe752d60b0"],["1f0ea79587166fdd"],["6f6d63b5fa995b5c"]]},{"id":"42795f82c29b8583","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/","method":"get","upload":false,"swaggerDoc":"","x":239,"y":184.5,"wires":[["26b099616f74f352"]]},{"id":"1f0ea79587166fdd","type":"http response","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"redirect if demo.omm.org","statusCode":"301","headers":{"Location":"/omm"},"x":887,"y":185.5,"wires":[]},{"id":"6f6d63b5fa995b5c","type":"http response","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"NOT FOUND everything else","statusCode":"404","headers":{},"x":894,"y":227.5,"wires":[]},{"id":"1d1325b68a7cac1e","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/blog/:name","method":"get","upload":false,"swaggerDoc":"","x":269,"y":232.5,"wires":[["26b099616f74f352"]]},{"id":"cdaeb49728432c46","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/:name","method":"get","upload":false,"swaggerDoc":"","x":259,"y":284.5,"wires":[["26b099616f74f352"]]},{"id":"95389d39f5c53d23","type":"group","z":"184fd5793b8d906c","name":"map path to blog content","style":{"label":true,"stroke":"#000000","color":"#000000"},"nodes":["85c463f82c547140","32bb06dfab9a9529","85a8755de2d6ae5c","7fa818203cac5402","71c533e01539c3d3","180d18e4931a5ace","0d6c29c07f300c15","f4781993f9dc4130","b41e2620ed591a2d","a4bf3e5ac7c74343","5d0edf716dc5c6b5"],"x":1182,"y":790.5,"w":2129,"h":264},{"id":"85c463f82c547140","type":"template","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"HTML Layout","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":3035,"y":1013.5,"wires":[["32bb06dfab9a9529"]]},{"id":"32bb06dfab9a9529","type":"http response","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"","statusCode":"200","headers":{},"x":3225,"y":932.5,"wires":[]},{"id":"85a8755de2d6ae5c","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"Path handling","property":"req.params.name","propertyType":"msg","rules":[{"t":"eq","v":"apple-touch-icon.png","vt":"str"},{"t":"eq","v":"favicon.ico","vt":"str"},{"t":"eq","v":"sitemap.xml","vt":"str"},{"t":"eq","v":"feed.xml","vt":"str"},{"t":"eq","v":"rss.xml","vt":"str"},{"t":"eq","v":"index","vt":"str"},{"t":"eq","v":"blog","vt":"str"},{"t":"nnull"},{"t":"else"}],"checkall":"false","repair":false,"outputs":9,"x":1288,"y":906.5,"wires":[[],[],[],[],[],["7fa818203cac5402"],["0d6c29c07f300c15"],["7fa818203cac5402"],["0d6c29c07f300c15"]]},{"id":"7fa818203cac5402","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"set page target: \"[blog] <name>\"","rules":[{"t":"set","p":"target","pt":"msg","to":"\"[blog] \" & msg.req.params.name","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1638,"y":886.5,"wires":[["71c533e01539c3d3"]]},{"id":"71c533e01539c3d3","type":"link call","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"generate page content","links":[],"linkType":"dynamic","timeout":"5","x":1941,"y":951.5,"wires":[["f4781993f9dc4130"]]},{"id":"180d18e4931a5ace","type":"markdown","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"Markdown to HTML","x":2794,"y":1013.5,"wires":[["85c463f82c547140"]]},{"id":"0d6c29c07f300c15","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"target: \"[blog] index\"","rules":[{"t":"set","p":"target","pt":"msg","to":"[blog] index","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1598,"y":951.5,"wires":[["71c533e01539c3d3"]]},{"id":"f4781993f9dc4130","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"ignore redirects","property":"statusCode","propertyType":"msg","rules":[{"t":"eq","v":"301","vt":"num"},{"t":"eq","v":"302","vt":"num"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":2152,"y":951.5,"wires":[[],[],["b41e2620ed591a2d"]]},{"id":"b41e2620ed591a2d","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"path extension is '.html'?","property":"page.path","propertyType":"msg","rules":[{"t":"regex","v":"\\.html$","vt":"str","case":true},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":2524,"y":831.5,"wires":[["32bb06dfab9a9529"],["a4bf3e5ac7c74343"]]},{"id":"a4bf3e5ac7c74343","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"is msg.htmlcontent set?","property":"htmlcontent","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":2526,"y":935.5,"wires":[["5d0edf716dc5c6b5"],["180d18e4931a5ace"]]},{"id":"5d0edf716dc5c6b5","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"htmlcontent","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":2863,"y":929.5,"wires":[["32bb06dfab9a9529"]]}]
This is the hostname filter on my blog, this blog having been created in Node-RED.
Nodes are generated where they are located in the flow editor, their json representation has coordinates that are based on a 5000px by 5000px editor page. Therefore this plugin moves everything that makes the flow to the top left hand corner so no scrolling is necessary.
[{"id":"523327924cdb577e","type":"link in","z":"3b1289d7ccf9cb0f","name":"[blog] codeblock-test","links":[],"x":317,"y":1265,"wires":[["4195651c394926ef"]]},{"id":"4195651c394926ef","type":"BlogPageInfo","z":"3b1289d7ccf9cb0f","name":"","image":"","summary":"CaN I replace codeblocks with images?","title":"Testingt he inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":433.71435546875,"y":1353,"wires":[["a5aca26d804cccd1"]]},{"id":"a5aca26d804cccd1","type":"template","z":"3b1289d7ccf9cb0f","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[{\"id\":\"39b83ec3d1b780d6\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow.html\",\"links\":[],\"x\":139.42858123779297,\"y\":118.28565311431885,\"wires\":[[\"2d3b78db024dd988\"]]},{\"id\":\"2d3b78db024dd988\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":336.14295196533203,\"y\":118.28565311431885,\"wires\":[[\"df6327f923a1ae3a\"]]},{\"id\":\"c9469bc8f43477f8\",\"type\":\"link out\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"link out 80\",\"mode\":\"return\",\"links\":[],\"x\":1181.4287853240967,\"y\":111.71424674987793,\"wires\":[]},{\"id\":\"8a027a1eec82ec7c\",\"type\":\"switch\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"has _linkSource - is this a link-call action\",\"property\":\"_linkSource\",\"propertyType\":\"msg\",\"rules\":[{\"t\":\"nnull\"},{\"t\":\"else\"}],\"checkall\":\"true\",\"repair\":false,\"outputs\":2,\"x\":891.2859725952148,\"y\":118.14280700683594,\"wires\":[[\"c9469bc8f43477f8\"],[]]},{\"id\":\"df6327f923a1ae3a\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v1\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n </head>\\n\\n <body>\\n <a href=\\\"https://demo.openmindmap.org/omm/#flow/6c8ce462533a1da4\\\">Original Flow</a>, <a href=\\\"https://demo.openmindmap.org/omm/#flow/3b1289d7ccf9cb0f/n/df6327f923a1ae3a/edit\\\">Codebase</a>. <a href=\\\"https://blog.openmindmap.org/blog/embedded-flow-v2.html\\\">Version 2 with text</a>.\\n <div id='svgcontainer' style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 30; left: 0; position: absolute;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair; touch-action: none;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n var flowId = \\\"6c8ce462533a1da4\\\";\\n \\n function getNode(n, v) {\\n var elm = document.createElementNS(\\\"http://www.w3.org/2000/svg\\\", n);\\n for (var p in v) { elm.setAttributeNS(null, p, v[p]); }\\n return elm;\\n }\\n $(function(){\\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n var nodes = {};\\n var wires = {};\\n\\n var svgObj = $('#flowNodes');\\n \\n flowdata.forEach( function(obj) {\\n if ( obj.z == flowId ) {\\n switch (obj.type) {\\n case \\\"junction\\\":\\n $(svgObj).append(getNode('rect', { x: obj.x, y: obj.y, rx: 2, ry: 2, fill: 'black', stroke: 'red', width: '10', height: '10', \\\"stroke-width\\\": 2}));\\n break;\\n default: \\n $(svgObj).append(getNode('rect', { x: obj.x, y: obj.y, rx: 5, ry: 5, fill: \\\"rgb(243, 181, 103)\\\", stroke: 'grey', width: '120', height: '30', \\\"stroke-width\\\": 2 }));\\n break;\\n }\\n nodes[obj.id] = obj;\\n } \\n });\\n\\n svgObj = $('#flowWires');\\n for ( var ndeId in nodes) {\\n var nde = nodes[ndeId];\\n\\n ((nde.wires || [[]])[0] || []).forEach( function(otherNodeId){\\n var otherNode = nodes[otherNodeId];\\n if ( otherNode ) {\\n $(svgObj).append(getNode('line', { \\n x1: nde.x + (nde.type != \\\"junction\\\" ? 120 : 5), \\n y1: nde.y + (nde.type == \\\"junction\\\" ? 5 : 15), \\n x2: otherNode.x + (otherNode.type == \\\"junction\\\" ? 5 : 0), \\n y2: otherNode.y + (otherNode.type == \\\"junction\\\" ? 5 : 15), \\n stroke: 'grey', \\n \\\"stroke-width\\\": 4 \\n }));\\n }\\n })\\n }\\n }\\n });\\n });\\n </script>\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":571.8573722839355,\"y\":118.28565311431885,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"f8739da5f7a011bd\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow-v2.html\",\"links\":[],\"x\":139.42858123779297,\"y\":177.85708618164062,\"wires\":[[\"8e4814da5150c7dc\"]]},{\"id\":\"8e4814da5150c7dc\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":346.14295196533203,\"y\":177.85708618164062,\"wires\":[[\"b9c96684fe8c6510\"]]},{\"id\":\"b9c96684fe8c6510\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v2\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n </head>\\n\\n <body>\\n <div id='svgcontainer' style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 0; left: 0; position: absolute;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair; touch-action: none;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <!-- these two groups ensure that the nodes are always above the wires, see the structure of the SVG in the editor. -->\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n var flowId = \\\"6c8ce462533a1da4\\\";\\n \\n function getNode(n, v) {\\n var elm = document.createElementNS(\\\"http://www.w3.org/2000/svg\\\", n);\\n for (var p in v) { elm.setAttributeNS(null, p, v[p]); }\\n return elm;\\n }\\n $(function(){\\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n var nodes = {};\\n var wires = {};\\n\\n var svgObj = $('#flowNodes');\\n \\n flowdata.forEach( function(obj) {\\n if ( obj.z == flowId ) {\\n switch (obj.type) {\\n case \\\"junction\\\":\\n \\n $(svgObj).append(getNode('rect', { x: obj.x, y: obj.y, rx: 2, ry: 2, fill: 'black', stroke: 'red', width: '10', height: '10', \\\"stroke-width\\\": 2}));\\n break;\\n\\n default: \\n\\n var grpText = document.createElementNS(\\\"http://www.w3.org/2000/svg\\\", 'g');\\n var grpTextId = \\\"grpTxt\\\" + Math.random().toString().substring(2);\\n\\n grpText.setAttributeNS(null, \\\"id\\\", grpTextId);\\n grpText.setAttributeNS(null, \\\"transform\\\", \\\"translate(38,20)\\\");\\n\\n var textElem = document.createElementNS(\\\"http://www.w3.org/2000/svg\\\", 'text');\\n\\n var elemTextId = \\\"elmTxt\\\" + Math.random().toString().substring(2);\\n textElem.setAttributeNS(null, \\\"id\\\", elemTextId);\\n textElem.textContent = obj.name || obj.info || obj.text || obj.type;\\n \\n grpText.appendChild( textElem )\\n\\n var grpId = \\\"grp\\\" + Math.random().toString().substring(2);\\n $(svgObj).append(getNode('g', { id: grpId, }));\\n var grpObj = $('#' + grpId);\\n\\n $(grpObj).append(grpText);\\n\\n var txtBBox = document.getElementById(elemTextId).getBBox();\\n var txtWidth = txtBBox.width;\\n var txtHeight = txtBBox.height;\\n var rectWidth = 120;\\n var rectHeight = 30;\\n\\n if ((txtWidth + 38) > (rectWidth-10) ) {\\n rectWidth = (txtWidth + 38) + 10;\\n obj._realX = (obj.x - (rectWidth - 120));\\n }\\n\\n if (txtHeight > rectHeight) {\\n rectHeight = txtHeight + 5;\\n }\\n\\n $(grpObj).prepend(getNode('rect', { rx: 5, ry: 5, fill: \\\"rgb(243, 181, 103)\\\", stroke: 'grey', width: rectWidth, height: rectHeight, \\\"stroke-width\\\": 2 }));\\n $(grpObj).attr(\\\"transform\\\", \\\"translate(\\\" + (obj._realX || obj.x) + \\\",\\\" + obj.y + \\\")\\\");\\n break;\\n }\\n nodes[obj.id] = obj;\\n } \\n });\\n\\n svgObj = $('#flowWires');\\n\\n for ( var ndeId in nodes) {\\n var nde = nodes[ndeId];\\n\\n ((nde.wires || [[]])[0] || []).forEach( function(otherNodeId){\\n var otherNode = nodes[otherNodeId];\\n if ( otherNode ) {\\n\\n var startX = nde.x + (nde.type == \\\"junction\\\" ? 5 : 120);\\n var startY = nde.y + (nde.type == \\\"junction\\\" ? 5 : 15); /* TODO: this magic 15 should be half the height of the rectangle */\\n var endX = (otherNode._realX || otherNode.x) + (otherNode.type == \\\"junction\\\" ? 5 : 0);\\n var endY = otherNode.y + (otherNode.type == \\\"junction\\\" ? 5 : 15);\\n\\n /*\\n $(svgObj).append(getNode('path', { \\n d: \\\"M \\\" + startX + \\\" \\\" + startY + \\\" C \\\",\\n stroke: 'grey',\\n \\\"stroke-width\\\": 4 \\n });\\n */\\n $(svgObj).append(getNode('line', { \\n x1: nde.x + (nde.type == \\\"junction\\\" ? 5 : 120), \\n y1: nde.y + (nde.type == \\\"junction\\\" ? 5 : 15), \\n x2: (otherNode._realX || otherNode.x) + (otherNode.type == \\\"junction\\\" ? 5 : 0), \\n y2: otherNode.y + (otherNode.type == \\\"junction\\\" ? 5 : 15), \\n stroke: 'grey', \\n \\\"stroke-width\\\": 4 \\n }));\\n }\\n })\\n }\\n }\\n });\\n });\\n </script>\\n\\n {{#page.reload}}\\n<script>\\n var socket = undefined;\\n\\nfunction initSocket() {\\n // Connection opened\\n socket = new WebSocket(\\\"wss://blog.openmindmap.org/cmds\\\");\\n\\n socket.onclose = function() {\\n initSocket();\\n };\\n\\n // Listen for messages\\n socket.addEventListener(\\\"message\\\", (event) => {\\n if ( event.data == \\\"reload\\\") {\\n window.location.reload();\\n }\\n });\\n};\\n\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", initSocket );\\n</script>\\n\\n{{/page.reload}}\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":571.8573722839355,\"y\":177.85708618164062,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"a23b3d9747beea6e\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v3\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n <script src=\\\"/embed/helpers.js\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n </head>\\n\\n <body>\\n <select id=\\\"flowSelector\\\"></select> == <a id=\\\"flowLinkToOriginal\\\" target=_blank href=\\\"\\\">Link to Original</a>\\n\\n <div id='svgcontainer' style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 50; left: 0; position: absolute;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair; touch-action: none;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <!-- Use group elems to ensure that layering of shapes is correct, i.e. nodes always over links -->\\n <g id='flowGroups'></g>\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n\\n\\n $(function(){\\n $('#flowSelector').on( 'change', onChangeSelector);\\n $('#flowLinkToOriginal').attr( 'href', \\\"https://demo.openmindmap.org/omm/#flow/\\\" + flowId);\\n \\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n flowData = flowdata;\\n fillFlowSelector( flowId, flowdata);\\n renderFlow(flowId, flowdata);\\n }\\n });\\n });\\n </script>\\n\\n{{ #page.reload }}\\n <!-- debug aid: reload page when I deploy Node-RED - don't need to explicitly reload any changes -->\\n<script>\\n var socket = undefined;\\n\\nfunction initSocket() {\\n // Connection opened\\n socket = new WebSocket(\\\"wss://blog.openmindmap.org/cmds\\\");\\n\\n socket.onclose = function() {\\n initSocket();\\n };\\n\\n // Listen for messages\\n socket.addEventListener(\\\"message\\\", (event) => {\\n if ( event.data == \\\"reload\\\") {\\n window.location.reload();\\n }\\n });\\n};\\n\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", initSocket );\\n</script>\\n{{ /page.reload }}\\n\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":571.8573722839355,\"y\":233.57142639160156,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"4333204273c7c806\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow-v3.html\",\"links\":[],\"x\":139.42858123779297,\"y\":233.57142639160156,\"wires\":[[\"2a7c6ae2a9995a51\"]]},{\"id\":\"2a7c6ae2a9995a51\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":346.14295196533203,\"y\":233.57142639160156,\"wires\":[[\"a23b3d9747beea6e\"]]},{\"id\":\"5adccb35363b1881\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v4\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"html\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n <script src=\\\"/embed/helpers-v4.js\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n </head>\\n\\n <body>\\n <select id=\\\"flowSelector\\\"></select> == <a id=\\\"flowLinkToOriginal\\\" target=_blank href=\\\"\\\">Link to Original</a>\\n\\n <div id='svgcontainer' \\n style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 50px; left: 10px; position: absolute; overflow: scroll; display: block;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <!-- Use group elems to ensure that layering of shapes is correct, i.e. nodes always over links -->\\n <g id='flowGroups'></g>\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n\\n\\n $(function(){\\n $('#flowSelector').on( 'change', onChangeSelector);\\n $('#flowLinkToOriginal').attr( 'href', \\\"https://demo.openmindmap.org/omm/#flow/\\\" + flowId);\\n \\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n flowData = flowdata;\\n fillFlowSelector( flowId, flowdata);\\n renderFlow(flowId, flowdata);\\n }\\n });\\n });\\n </script>\\n\\n {{ #page.reload }}\\n <!-- debug aid: reload page when I deploy Node-RED - don't need to explicitly reload any changes -->\\n <script>\\n var socket = undefined;\\n \\n function initSocket() {\\n // Connection opened\\n socket = new WebSocket(\\\"wss://blog.openmindmap.org/cmds\\\");\\n \\n socket.onclose = function() {\\n initSocket();\\n };\\n \\n // Listen for messages\\n socket.addEventListener(\\\"message\\\", (event) => {\\n if ( event.data == \\\"reload\\\") {\\n window.location.reload();\\n }\\n });\\n };\\n \\n document.addEventListener(\\\"DOMContentLoaded\\\", initSocket );\\n </script>\\n {{/ page.reload}}\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":571.8573722839355,\"y\":298.57142639160156,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"bb373e24e578d9d8\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow-v4.html\",\"links\":[],\"x\":139.42858123779297,\"y\":298.57142639160156,\"wires\":[[\"d96afef150addb88\"]]},{\"id\":\"d96afef150addb88\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":346.14295196533203,\"y\":298.57142639160156,\"wires\":[[\"5adccb35363b1881\"]]},{\"id\":\"510c57da02cb23e8\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v5\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n <script src=\\\"/embed/helpers-v5.js\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n <link rel=\\\"stylesheet\\\" href=\\\"/embed/helpers.css\\\">\\n </head>\\n\\n <body>\\n <select id=\\\"flowSelector\\\"></select> == <a id=\\\"flowLinkToOriginal\\\" target=_blank href=\\\"\\\">Link to Original</a>\\n\\n <div id='svgcontainer' \\n style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 50px; left: 10px; position: absolute; overflow: scroll; display: block;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <!-- Use group elems to ensure that layering of shapes is correct, i.e. nodes always over links -->\\n <g id='flowGroups'></g>\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n\\n\\n $(function(){\\n $('#flowSelector').on( 'change', onChangeSelector);\\n $('#flowLinkToOriginal').attr( 'href', \\\"https://demo.openmindmap.org/omm/#flow/\\\" + flowId);\\n \\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n flowData = flowdata;\\n fillFlowSelector( flowId, flowdata);\\n renderFlow(flowId, flowdata);\\n }\\n });\\n });\\n </script>\\n\\n\\n{{#page.reload}}\\n <!-- debug aid: reload page when I deploy Node-RED - don't need to explicitly reload any changes -->\\n<script>\\n var socket = undefined;\\n\\nfunction initSocket() {\\n // Connection opened\\n socket = new WebSocket(\\\"wss://blog.openmindmap.org/cmds\\\");\\n\\n socket.onclose = function() {\\n initSocket();\\n };\\n\\n // Listen for messages\\n socket.addEventListener(\\\"message\\\", (event) => {\\n if ( event.data == \\\"reload\\\") {\\n window.location.reload();\\n }\\n });\\n};\\n\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", initSocket );\\n</script>\\n{{/page.reload}}\\n\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":577,\"y\":361,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"f0b074190c1ab98f\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow-v5.html\",\"links\":[],\"x\":144.57120895385742,\"y\":361,\"wires\":[[\"43528dd3046696bf\"]]},{\"id\":\"43528dd3046696bf\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":351.2855796813965,\"y\":361,\"wires\":[[\"510c57da02cb23e8\"]]}]","output":"str","x":557,"y":1023,"wires":[["543a3c0420b92eff"]]},{"id":"543a3c0420b92eff","type":"template","z":"3b1289d7ccf9cb0f","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[{\"id\":\"d598829cba783cad\",\"type\":\"GetFlows\",\"z\":\"f13d3b083d5cc429\",\"name\":\"\",\"flowVersion\":\"v1\",\"useAuthentication\":false,\"apiUsername\":\"\",\"apiUsernameType\":\"env\",\"apiPassword\":\"\",\"apiPasswordType\":\"env\",\"x\":349,\"y\":301,\"wires\":[[\"ddce7325bdba57d8\"]]},{\"id\":\"c507dd73478a26af\",\"type\":\"inject\",\"z\":\"f13d3b083d5cc429\",\"name\":\"\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"7200\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":199,\"y\":181,\"wires\":[[\"d598829cba783cad\"]]},{\"id\":\"67b77f304303cb27\",\"type\":\"http request\",\"z\":\"f13d3b083d5cc429\",\"name\":\"send off to backup server\",\"method\":\"POST\",\"ret\":\"txt\",\"paytoqs\":\"ignore\",\"url\":\"\",\"tls\":\"\",\"persist\":false,\"proxy\":\"\",\"insecureHTTPParser\":false,\"authType\":\"\",\"senderr\":false,\"headers\":[],\"x\":1119,\"y\":181,\"wires\":[[]]},{\"id\":\"ddce7325bdba57d8\",\"type\":\"change\",\"z\":\"f13d3b083d5cc429\",\"name\":\"setup payload for zip node\",\"rules\":[{\"t\":\"set\",\"p\":\"_p\",\"pt\":\"msg\",\"to\":\"[]\",\"tot\":\"json\"},{\"t\":\"set\",\"p\":\"_p[0]\",\"pt\":\"msg\",\"to\":\"{ \\\"filename\\\": \\\"openmindmap_flows.json\\\", \\\"payload\\\": \\\"\\\" }\",\"tot\":\"json\"},{\"t\":\"set\",\"p\":\"_p[0].payload\",\"pt\":\"msg\",\"to\":\"payload\",\"tot\":\"msg\"},{\"t\":\"set\",\"p\":\"token\",\"pt\":\"msg\",\"to\":\"BACKUP_ZIP_TOKEN\",\"tot\":\"env\"},{\"t\":\"set\",\"p\":\"_p[1]\",\"pt\":\"msg\",\"to\":\"{ \\\"filename\\\": \\\"token.txt\\\", \\\"payload\\\": \\\"\\\" & token & \\\"\\\" }\",\"tot\":\"jsonata\"},{\"t\":\"set\",\"p\":\"payload\",\"pt\":\"msg\",\"to\":\"_p\",\"tot\":\"msg\"},{\"t\":\"set\",\"p\":\"url\",\"pt\":\"msg\",\"to\":\"BACKUP_ENDPOINT\",\"tot\":\"env\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":549,\"y\":401,\"wires\":[[\"1f879c968f033a26\"]]},{\"id\":\"1f879c968f033a26\",\"type\":\"zip\",\"z\":\"f13d3b083d5cc429\",\"name\":\"\",\"mode\":\"compress\",\"filename\":\"backup.zip\",\"compressionlevel\":\"9\",\"outasstring\":false,\"x\":769,\"y\":401,\"wires\":[[\"53808fa58e1aa543\"]]},{\"id\":\"53808fa58e1aa543\",\"type\":\"base64\",\"z\":\"f13d3b083d5cc429\",\"name\":\"\",\"action\":\"\",\"property\":\"payload\",\"x\":929,\"y\":301,\"wires\":[[\"67b77f304303cb27\"]]}]","output":"str","x":664,"y":1081,"wires":[["3a2a8775f9c823ea"]]},{"id":"3a2a8775f9c823ea","type":"template","z":"3b1289d7ccf9cb0f","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[{\"id\":\"ef8e132ea7cfb169\",\"type\":\"group\",\"z\":\"1f980ab215b3d38b\",\"name\":\"ensure correct domain\",\"style\":{\"label\":true,\"fill\":\"#bfc7d7\",\"fill-opacity\":\"0.71\",\"color\":\"#000000\"},\"nodes\":[\"74524fd544d06041\",\"e43251341bcee72a\",\"a2974608d980c146\",\"9d78a06220c7c8d8\",\"a43ab9aa8a80e60a\",\"b6e61b1f9f246701\"],\"x\":23,\"y\":103.5,\"w\":877,\"h\":189.5},{\"id\":\"74524fd544d06041\",\"type\":\"switch\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"check hostname\",\"property\":\"req.hostname\",\"propertyType\":\"msg\",\"rules\":[{\"t\":\"eq\",\"v\":\"blog.openmindmap.org\",\"vt\":\"str\"},{\"t\":\"eq\",\"v\":\"demo.openmindmap.org\",\"vt\":\"str\"},{\"t\":\"else\"}],\"checkall\":\"false\",\"repair\":false,\"outputs\":3,\"x\":393,\"y\":152,\"wires\":[[\"11368594c2effb54\"],[\"a2974608d980c146\"],[\"9d78a06220c7c8d8\"]]},{\"id\":\"e43251341bcee72a\",\"type\":\"http in\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"\",\"url\":\"/\",\"method\":\"get\",\"upload\":false,\"swaggerDoc\":\"\",\"x\":99,\"y\":152,\"wires\":[[\"74524fd544d06041\"]]},{\"id\":\"a2974608d980c146\",\"type\":\"http response\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"redirect if demo.omm.org\",\"statusCode\":\"301\",\"headers\":{\"Location\":\"/omm\"},\"x\":747,\"y\":153,\"wires\":[]},{\"id\":\"9d78a06220c7c8d8\",\"type\":\"http response\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"NOT FOUND everything else\",\"statusCode\":\"404\",\"headers\":{},\"x\":754,\"y\":195,\"wires\":[]},{\"id\":\"a43ab9aa8a80e60a\",\"type\":\"http in\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"\",\"url\":\"/blog/:name\",\"method\":\"get\",\"upload\":false,\"swaggerDoc\":\"\",\"x\":129,\"y\":200,\"wires\":[[\"74524fd544d06041\"]]},{\"id\":\"b6e61b1f9f246701\",\"type\":\"http in\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"\",\"url\":\"/:name\",\"method\":\"get\",\"upload\":false,\"swaggerDoc\":\"\",\"x\":119,\"y\":252,\"wires\":[[\"74524fd544d06041\"]]}]","output":"str","x":748,"y":1143,"wires":[["968121829ec13f89"]]},{"id":"968121829ec13f89","type":"template","z":"3b1289d7ccf9cb0f","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":840,"y":1200,"wires":[["af750fbb1cba639d"]]}]
image:
[{"id":"523327924cdb577e","type":"link in","z":"3b1289d7ccf9cb0f","name":"[blog] codeblock-test","links":[],"x":317,"y":1265,"wires":[["4195651c394926ef"]]},{"id":"4195651c394926ef","type":"BlogPageInfo","z":"3b1289d7ccf9cb0f","name":"","image":"","summary":"CaN I replace codeblocks with images?","title":"Testingt he inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":433.71435546875,"y":1353,"wires":[["a5aca26d804cccd1"]]},{"id":"a5aca26d804cccd1","type":"template","z":"3b1289d7ccf9cb0f","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[{\"id\":\"39b83ec3d1b780d6\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow.html\",\"links\":[],\"x\":139.42858123779297,\"y\":118.28565311431885,\"wires\":[[\"2d3b78db024dd988\"]]},{\"id\":\"2d3b78db024dd988\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":336.14295196533203,\"y\":118.28565311431885,\"wires\":[[\"df6327f923a1ae3a\"]]},{\"id\":\"c9469bc8f43477f8\",\"type\":\"link out\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"link out 80\",\"mode\":\"return\",\"links\":[],\"x\":1181.4287853240967,\"y\":111.71424674987793,\"wires\":[]},{\"id\":\"8a027a1eec82ec7c\",\"type\":\"switch\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"has _linkSource - is this a link-call action\",\"property\":\"_linkSource\",\"propertyType\":\"msg\",\"rules\":[{\"t\":\"nnull\"},{\"t\":\"else\"}],\"checkall\":\"true\",\"repair\":false,\"outputs\":2,\"x\":891.2859725952148,\"y\":118.14280700683594,\"wires\":[[\"c9469bc8f43477f8\"],[]]},{\"id\":\"df6327f923a1ae3a\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v1\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n </head>\\n\\n <body>\\n <a href=\\\"https://demo.openmindmap.org/omm/#flow/6c8ce462533a1da4\\\">Original Flow</a>, <a href=\\\"https://demo.openmindmap.org/omm/#flow/3b1289d7ccf9cb0f/n/df6327f923a1ae3a/edit\\\">Codebase</a>. <a href=\\\"https://blog.openmindmap.org/blog/embedded-flow-v2.html\\\">Version 2 with text</a>.\\n <div id='svgcontainer' style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 30; left: 0; position: absolute;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair; touch-action: none;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n var flowId = \\\"6c8ce462533a1da4\\\";\\n \\n function getNode(n, v) {\\n var elm = document.createElementNS(\\\"http://www.w3.org/2000/svg\\\", n);\\n for (var p in v) { elm.setAttributeNS(null, p, v[p]); }\\n return elm;\\n }\\n $(function(){\\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n var nodes = {};\\n var wires = {};\\n\\n var svgObj = $('#flowNodes');\\n \\n flowdata.forEach( function(obj) {\\n if ( obj.z == flowId ) {\\n switch (obj.type) {\\n case \\\"junction\\\":\\n $(svgObj).append(getNode('rect', { x: obj.x, y: obj.y, rx: 2, ry: 2, fill: 'black', stroke: 'red', width: '10', height: '10', \\\"stroke-width\\\": 2}));\\n break;\\n default: \\n $(svgObj).append(getNode('rect', { x: obj.x, y: obj.y, rx: 5, ry: 5, fill: \\\"rgb(243, 181, 103)\\\", stroke: 'grey', width: '120', height: '30', \\\"stroke-width\\\": 2 }));\\n break;\\n }\\n nodes[obj.id] = obj;\\n } \\n });\\n\\n svgObj = $('#flowWires');\\n for ( var ndeId in nodes) {\\n var nde = nodes[ndeId];\\n\\n ((nde.wires || [[]])[0] || []).forEach( function(otherNodeId){\\n var otherNode = nodes[otherNodeId];\\n if ( otherNode ) {\\n $(svgObj).append(getNode('line', { \\n x1: nde.x + (nde.type != \\\"junction\\\" ? 120 : 5), \\n y1: nde.y + (nde.type == \\\"junction\\\" ? 5 : 15), \\n x2: otherNode.x + (otherNode.type == \\\"junction\\\" ? 5 : 0), \\n y2: otherNode.y + (otherNode.type == \\\"junction\\\" ? 5 : 15), \\n stroke: 'grey', \\n \\\"stroke-width\\\": 4 \\n }));\\n }\\n })\\n }\\n }\\n });\\n });\\n </script>\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":571.8573722839355,\"y\":118.28565311431885,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"f8739da5f7a011bd\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow-v2.html\",\"links\":[],\"x\":139.42858123779297,\"y\":177.85708618164062,\"wires\":[[\"8e4814da5150c7dc\"]]},{\"id\":\"8e4814da5150c7dc\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":346.14295196533203,\"y\":177.85708618164062,\"wires\":[[\"b9c96684fe8c6510\"]]},{\"id\":\"b9c96684fe8c6510\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v2\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n </head>\\n\\n <body>\\n <div id='svgcontainer' style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 0; left: 0; position: absolute;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair; touch-action: none;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <!-- these two groups ensure that the nodes are always above the wires, see the structure of the SVG in the editor. -->\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n var flowId = \\\"6c8ce462533a1da4\\\";\\n \\n function getNode(n, v) {\\n var elm = document.createElementNS(\\\"http://www.w3.org/2000/svg\\\", n);\\n for (var p in v) { elm.setAttributeNS(null, p, v[p]); }\\n return elm;\\n }\\n $(function(){\\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n var nodes = {};\\n var wires = {};\\n\\n var svgObj = $('#flowNodes');\\n \\n flowdata.forEach( function(obj) {\\n if ( obj.z == flowId ) {\\n switch (obj.type) {\\n case \\\"junction\\\":\\n \\n $(svgObj).append(getNode('rect', { x: obj.x, y: obj.y, rx: 2, ry: 2, fill: 'black', stroke: 'red', width: '10', height: '10', \\\"stroke-width\\\": 2}));\\n break;\\n\\n default: \\n\\n var grpText = document.createElementNS(\\\"http://www.w3.org/2000/svg\\\", 'g');\\n var grpTextId = \\\"grpTxt\\\" + Math.random().toString().substring(2);\\n\\n grpText.setAttributeNS(null, \\\"id\\\", grpTextId);\\n grpText.setAttributeNS(null, \\\"transform\\\", \\\"translate(38,20)\\\");\\n\\n var textElem = document.createElementNS(\\\"http://www.w3.org/2000/svg\\\", 'text');\\n\\n var elemTextId = \\\"elmTxt\\\" + Math.random().toString().substring(2);\\n textElem.setAttributeNS(null, \\\"id\\\", elemTextId);\\n textElem.textContent = obj.name || obj.info || obj.text || obj.type;\\n \\n grpText.appendChild( textElem )\\n\\n var grpId = \\\"grp\\\" + Math.random().toString().substring(2);\\n $(svgObj).append(getNode('g', { id: grpId, }));\\n var grpObj = $('#' + grpId);\\n\\n $(grpObj).append(grpText);\\n\\n var txtBBox = document.getElementById(elemTextId).getBBox();\\n var txtWidth = txtBBox.width;\\n var txtHeight = txtBBox.height;\\n var rectWidth = 120;\\n var rectHeight = 30;\\n\\n if ((txtWidth + 38) > (rectWidth-10) ) {\\n rectWidth = (txtWidth + 38) + 10;\\n obj._realX = (obj.x - (rectWidth - 120));\\n }\\n\\n if (txtHeight > rectHeight) {\\n rectHeight = txtHeight + 5;\\n }\\n\\n $(grpObj).prepend(getNode('rect', { rx: 5, ry: 5, fill: \\\"rgb(243, 181, 103)\\\", stroke: 'grey', width: rectWidth, height: rectHeight, \\\"stroke-width\\\": 2 }));\\n $(grpObj).attr(\\\"transform\\\", \\\"translate(\\\" + (obj._realX || obj.x) + \\\",\\\" + obj.y + \\\")\\\");\\n break;\\n }\\n nodes[obj.id] = obj;\\n } \\n });\\n\\n svgObj = $('#flowWires');\\n\\n for ( var ndeId in nodes) {\\n var nde = nodes[ndeId];\\n\\n ((nde.wires || [[]])[0] || []).forEach( function(otherNodeId){\\n var otherNode = nodes[otherNodeId];\\n if ( otherNode ) {\\n\\n var startX = nde.x + (nde.type == \\\"junction\\\" ? 5 : 120);\\n var startY = nde.y + (nde.type == \\\"junction\\\" ? 5 : 15); /* TODO: this magic 15 should be half the height of the rectangle */\\n var endX = (otherNode._realX || otherNode.x) + (otherNode.type == \\\"junction\\\" ? 5 : 0);\\n var endY = otherNode.y + (otherNode.type == \\\"junction\\\" ? 5 : 15);\\n\\n /*\\n $(svgObj).append(getNode('path', { \\n d: \\\"M \\\" + startX + \\\" \\\" + startY + \\\" C \\\",\\n stroke: 'grey',\\n \\\"stroke-width\\\": 4 \\n });\\n */\\n $(svgObj).append(getNode('line', { \\n x1: nde.x + (nde.type == \\\"junction\\\" ? 5 : 120), \\n y1: nde.y + (nde.type == \\\"junction\\\" ? 5 : 15), \\n x2: (otherNode._realX || otherNode.x) + (otherNode.type == \\\"junction\\\" ? 5 : 0), \\n y2: otherNode.y + (otherNode.type == \\\"junction\\\" ? 5 : 15), \\n stroke: 'grey', \\n \\\"stroke-width\\\": 4 \\n }));\\n }\\n })\\n }\\n }\\n });\\n });\\n </script>\\n\\n {{#page.reload}}\\n<script>\\n var socket = undefined;\\n\\nfunction initSocket() {\\n // Connection opened\\n socket = new WebSocket(\\\"wss://blog.openmindmap.org/cmds\\\");\\n\\n socket.onclose = function() {\\n initSocket();\\n };\\n\\n // Listen for messages\\n socket.addEventListener(\\\"message\\\", (event) => {\\n if ( event.data == \\\"reload\\\") {\\n window.location.reload();\\n }\\n });\\n};\\n\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", initSocket );\\n</script>\\n\\n{{/page.reload}}\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":571.8573722839355,\"y\":177.85708618164062,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"a23b3d9747beea6e\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v3\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n <script src=\\\"/embed/helpers.js\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n </head>\\n\\n <body>\\n <select id=\\\"flowSelector\\\"></select> == <a id=\\\"flowLinkToOriginal\\\" target=_blank href=\\\"\\\">Link to Original</a>\\n\\n <div id='svgcontainer' style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 50; left: 0; position: absolute;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair; touch-action: none;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <!-- Use group elems to ensure that layering of shapes is correct, i.e. nodes always over links -->\\n <g id='flowGroups'></g>\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n\\n\\n $(function(){\\n $('#flowSelector').on( 'change', onChangeSelector);\\n $('#flowLinkToOriginal').attr( 'href', \\\"https://demo.openmindmap.org/omm/#flow/\\\" + flowId);\\n \\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n flowData = flowdata;\\n fillFlowSelector( flowId, flowdata);\\n renderFlow(flowId, flowdata);\\n }\\n });\\n });\\n </script>\\n\\n{{ #page.reload }}\\n <!-- debug aid: reload page when I deploy Node-RED - don't need to explicitly reload any changes -->\\n<script>\\n var socket = undefined;\\n\\nfunction initSocket() {\\n // Connection opened\\n socket = new WebSocket(\\\"wss://blog.openmindmap.org/cmds\\\");\\n\\n socket.onclose = function() {\\n initSocket();\\n };\\n\\n // Listen for messages\\n socket.addEventListener(\\\"message\\\", (event) => {\\n if ( event.data == \\\"reload\\\") {\\n window.location.reload();\\n }\\n });\\n};\\n\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", initSocket );\\n</script>\\n{{ /page.reload }}\\n\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":571.8573722839355,\"y\":233.57142639160156,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"4333204273c7c806\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow-v3.html\",\"links\":[],\"x\":139.42858123779297,\"y\":233.57142639160156,\"wires\":[[\"2a7c6ae2a9995a51\"]]},{\"id\":\"2a7c6ae2a9995a51\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":346.14295196533203,\"y\":233.57142639160156,\"wires\":[[\"a23b3d9747beea6e\"]]},{\"id\":\"5adccb35363b1881\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v4\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"html\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n <script src=\\\"/embed/helpers-v4.js\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n </head>\\n\\n <body>\\n <select id=\\\"flowSelector\\\"></select> == <a id=\\\"flowLinkToOriginal\\\" target=_blank href=\\\"\\\">Link to Original</a>\\n\\n <div id='svgcontainer' \\n style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 50px; left: 10px; position: absolute; overflow: scroll; display: block;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <!-- Use group elems to ensure that layering of shapes is correct, i.e. nodes always over links -->\\n <g id='flowGroups'></g>\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n\\n\\n $(function(){\\n $('#flowSelector').on( 'change', onChangeSelector);\\n $('#flowLinkToOriginal').attr( 'href', \\\"https://demo.openmindmap.org/omm/#flow/\\\" + flowId);\\n \\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n flowData = flowdata;\\n fillFlowSelector( flowId, flowdata);\\n renderFlow(flowId, flowdata);\\n }\\n });\\n });\\n </script>\\n\\n {{ #page.reload }}\\n <!-- debug aid: reload page when I deploy Node-RED - don't need to explicitly reload any changes -->\\n <script>\\n var socket = undefined;\\n \\n function initSocket() {\\n // Connection opened\\n socket = new WebSocket(\\\"wss://blog.openmindmap.org/cmds\\\");\\n \\n socket.onclose = function() {\\n initSocket();\\n };\\n \\n // Listen for messages\\n socket.addEventListener(\\\"message\\\", (event) => {\\n if ( event.data == \\\"reload\\\") {\\n window.location.reload();\\n }\\n });\\n };\\n \\n document.addEventListener(\\\"DOMContentLoaded\\\", initSocket );\\n </script>\\n {{/ page.reload}}\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":571.8573722839355,\"y\":298.57142639160156,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"bb373e24e578d9d8\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow-v4.html\",\"links\":[],\"x\":139.42858123779297,\"y\":298.57142639160156,\"wires\":[[\"d96afef150addb88\"]]},{\"id\":\"d96afef150addb88\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":346.14295196533203,\"y\":298.57142639160156,\"wires\":[[\"5adccb35363b1881\"]]},{\"id\":\"510c57da02cb23e8\",\"type\":\"template\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"v5\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n\\n <title>Flow Embeddation</title>\\n\\n <link rel=\\\"alternate\\\" type=\\\"application/rss+xml\\\" href=\\\"/feed.xml\\\" title=\\\"Subscribe to Blog Open Mind Map Org\\\">\\n <link rel=\\\"sitemap\\\" type=\\\"application/xml\\\" title=\\\"Sitemap\\\" href=\\\"/sitemap.xml\\\">\\n\\n <link rel=\\\"apple-touch-icon\\\" sizes=\\\"180x180\\\" href=\\\"/f/i/apple-touch-icon.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"32x32\\\" href=\\\"/f/i/favicon-32x32.png\\\">\\n <link rel=\\\"icon\\\" type=\\\"image/png\\\" sizes=\\\"16x16\\\" href=\\\"/f/i/favicon-16x16.png\\\">\\n <link rel=\\\"manifest\\\" href=\\\"/f/site.webmanifest\\\">\\n\\n <script src=\\\"/content/jquery-3.7.0.min.js\\\" integrity=\\\"sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n <script src=\\\"/embed/helpers-v5.js\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"></script>\\n <link rel=\\\"stylesheet\\\" href=\\\"/embed/helpers.css\\\">\\n </head>\\n\\n <body>\\n <select id=\\\"flowSelector\\\"></select> == <a id=\\\"flowLinkToOriginal\\\" target=_blank href=\\\"\\\">Link to Original</a>\\n\\n <div id='svgcontainer' \\n style=\\\"transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 50px; left: 10px; position: absolute; overflow: scroll; display: block;\\\">\\n <svg id=\\\"svgelem\\\" width=\\\"5000\\\" height=\\\"5000\\\" viewBox=\\\"0 0 5000 5000\\\" pointer-events=\\\"all\\\" style=\\\"cursor: crosshair;\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n <!-- Use group elems to ensure that layering of shapes is correct, i.e. nodes always over links -->\\n <g id='flowGroups'></g>\\n <g id='flowWires'></g>\\n <g id='flowNodes'></g>\\n </svg>\\n </div>\\n </body>\\n\\n\\n <script>\\n\\n\\n $(function(){\\n $('#flowSelector').on( 'change', onChangeSelector);\\n $('#flowLinkToOriginal').attr( 'href', \\\"https://demo.openmindmap.org/omm/#flow/\\\" + flowId);\\n \\n $.ajax({\\n dataType: \\\"json\\\",\\n url: \\\"https://demo.openmindmap.org/omm/flows\\\",\\n method: 'get',\\n success: function(flowdata) { \\n flowData = flowdata;\\n fillFlowSelector( flowId, flowdata);\\n renderFlow(flowId, flowdata);\\n }\\n });\\n });\\n </script>\\n\\n\\n{{#page.reload}}\\n <!-- debug aid: reload page when I deploy Node-RED - don't need to explicitly reload any changes -->\\n<script>\\n var socket = undefined;\\n\\nfunction initSocket() {\\n // Connection opened\\n socket = new WebSocket(\\\"wss://blog.openmindmap.org/cmds\\\");\\n\\n socket.onclose = function() {\\n initSocket();\\n };\\n\\n // Listen for messages\\n socket.addEventListener(\\\"message\\\", (event) => {\\n if ( event.data == \\\"reload\\\") {\\n window.location.reload();\\n }\\n });\\n};\\n\\ndocument.addEventListener(\\\"DOMContentLoaded\\\", initSocket );\\n</script>\\n{{/page.reload}}\\n\\n</html>\\n\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":577,\"y\":361,\"wires\":[[\"8a027a1eec82ec7c\"]]},{\"id\":\"f0b074190c1ab98f\",\"type\":\"link in\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"[blog] embedded-flow-v5.html\",\"links\":[],\"x\":144.57120895385742,\"y\":361,\"wires\":[[\"43528dd3046696bf\"]]},{\"id\":\"43528dd3046696bf\",\"type\":\"BlogPageInfo\",\"z\":\"3b1289d7ccf9cb0f\",\"name\":\"\",\"image\":\"\",\"summary\":\"Can I generate html directly without using markdown markup?\",\"title\":\"This is a test of something new\",\"publishedAt\":\"2023-06-25T11:22\",\"updatedAt\":\"2023-06-25T11:22\",\"incRss\":false,\"incSitemap\":false,\"incIndex\":false,\"shrLinkedIn\":false,\"reloadOnEdit\":false,\"redirectToNode\":false,\"redirectNodeId\":\"status-404\",\"redirectStatusCode\":\"301\",\"x\":351.2855796813965,\"y\":361,\"wires\":[[\"510c57da02cb23e8\"]]}]","output":"str","x":557,"y":1023,"wires":[["543a3c0420b92eff"]]},{"id":"543a3c0420b92eff","type":"template","z":"3b1289d7ccf9cb0f","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[{\"id\":\"d598829cba783cad\",\"type\":\"GetFlows\",\"z\":\"f13d3b083d5cc429\",\"name\":\"\",\"flowVersion\":\"v1\",\"useAuthentication\":false,\"apiUsername\":\"\",\"apiUsernameType\":\"env\",\"apiPassword\":\"\",\"apiPasswordType\":\"env\",\"x\":349,\"y\":301,\"wires\":[[\"ddce7325bdba57d8\"]]},{\"id\":\"c507dd73478a26af\",\"type\":\"inject\",\"z\":\"f13d3b083d5cc429\",\"name\":\"\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"7200\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":199,\"y\":181,\"wires\":[[\"d598829cba783cad\"]]},{\"id\":\"67b77f304303cb27\",\"type\":\"http request\",\"z\":\"f13d3b083d5cc429\",\"name\":\"send off to backup server\",\"method\":\"POST\",\"ret\":\"txt\",\"paytoqs\":\"ignore\",\"url\":\"\",\"tls\":\"\",\"persist\":false,\"proxy\":\"\",\"insecureHTTPParser\":false,\"authType\":\"\",\"senderr\":false,\"headers\":[],\"x\":1119,\"y\":181,\"wires\":[[]]},{\"id\":\"ddce7325bdba57d8\",\"type\":\"change\",\"z\":\"f13d3b083d5cc429\",\"name\":\"setup payload for zip node\",\"rules\":[{\"t\":\"set\",\"p\":\"_p\",\"pt\":\"msg\",\"to\":\"[]\",\"tot\":\"json\"},{\"t\":\"set\",\"p\":\"_p[0]\",\"pt\":\"msg\",\"to\":\"{ \\\"filename\\\": \\\"openmindmap_flows.json\\\", \\\"payload\\\": \\\"\\\" }\",\"tot\":\"json\"},{\"t\":\"set\",\"p\":\"_p[0].payload\",\"pt\":\"msg\",\"to\":\"payload\",\"tot\":\"msg\"},{\"t\":\"set\",\"p\":\"token\",\"pt\":\"msg\",\"to\":\"BACKUP_ZIP_TOKEN\",\"tot\":\"env\"},{\"t\":\"set\",\"p\":\"_p[1]\",\"pt\":\"msg\",\"to\":\"{ \\\"filename\\\": \\\"token.txt\\\", \\\"payload\\\": \\\"\\\" & token & \\\"\\\" }\",\"tot\":\"jsonata\"},{\"t\":\"set\",\"p\":\"payload\",\"pt\":\"msg\",\"to\":\"_p\",\"tot\":\"msg\"},{\"t\":\"set\",\"p\":\"url\",\"pt\":\"msg\",\"to\":\"BACKUP_ENDPOINT\",\"tot\":\"env\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":549,\"y\":401,\"wires\":[[\"1f879c968f033a26\"]]},{\"id\":\"1f879c968f033a26\",\"type\":\"zip\",\"z\":\"f13d3b083d5cc429\",\"name\":\"\",\"mode\":\"compress\",\"filename\":\"backup.zip\",\"compressionlevel\":\"9\",\"outasstring\":false,\"x\":769,\"y\":401,\"wires\":[[\"53808fa58e1aa543\"]]},{\"id\":\"53808fa58e1aa543\",\"type\":\"base64\",\"z\":\"f13d3b083d5cc429\",\"name\":\"\",\"action\":\"\",\"property\":\"payload\",\"x\":929,\"y\":301,\"wires\":[[\"67b77f304303cb27\"]]}]","output":"str","x":664,"y":1081,"wires":[["3a2a8775f9c823ea"]]},{"id":"3a2a8775f9c823ea","type":"template","z":"3b1289d7ccf9cb0f","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[{\"id\":\"ef8e132ea7cfb169\",\"type\":\"group\",\"z\":\"1f980ab215b3d38b\",\"name\":\"ensure correct domain\",\"style\":{\"label\":true,\"fill\":\"#bfc7d7\",\"fill-opacity\":\"0.71\",\"color\":\"#000000\"},\"nodes\":[\"74524fd544d06041\",\"e43251341bcee72a\",\"a2974608d980c146\",\"9d78a06220c7c8d8\",\"a43ab9aa8a80e60a\",\"b6e61b1f9f246701\"],\"x\":23,\"y\":103.5,\"w\":877,\"h\":189.5},{\"id\":\"74524fd544d06041\",\"type\":\"switch\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"check hostname\",\"property\":\"req.hostname\",\"propertyType\":\"msg\",\"rules\":[{\"t\":\"eq\",\"v\":\"blog.openmindmap.org\",\"vt\":\"str\"},{\"t\":\"eq\",\"v\":\"demo.openmindmap.org\",\"vt\":\"str\"},{\"t\":\"else\"}],\"checkall\":\"false\",\"repair\":false,\"outputs\":3,\"x\":393,\"y\":152,\"wires\":[[\"11368594c2effb54\"],[\"a2974608d980c146\"],[\"9d78a06220c7c8d8\"]]},{\"id\":\"e43251341bcee72a\",\"type\":\"http in\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"\",\"url\":\"/\",\"method\":\"get\",\"upload\":false,\"swaggerDoc\":\"\",\"x\":99,\"y\":152,\"wires\":[[\"74524fd544d06041\"]]},{\"id\":\"a2974608d980c146\",\"type\":\"http response\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"redirect if demo.omm.org\",\"statusCode\":\"301\",\"headers\":{\"Location\":\"/omm\"},\"x\":747,\"y\":153,\"wires\":[]},{\"id\":\"9d78a06220c7c8d8\",\"type\":\"http response\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"NOT FOUND everything else\",\"statusCode\":\"404\",\"headers\":{},\"x\":754,\"y\":195,\"wires\":[]},{\"id\":\"a43ab9aa8a80e60a\",\"type\":\"http in\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"\",\"url\":\"/blog/:name\",\"method\":\"get\",\"upload\":false,\"swaggerDoc\":\"\",\"x\":129,\"y\":200,\"wires\":[[\"74524fd544d06041\"]]},{\"id\":\"b6e61b1f9f246701\",\"type\":\"http in\",\"z\":\"1f980ab215b3d38b\",\"g\":\"ef8e132ea7cfb169\",\"name\":\"\",\"url\":\"/:name\",\"method\":\"get\",\"upload\":false,\"swaggerDoc\":\"\",\"x\":119,\"y\":252,\"wires\":[[\"74524fd544d06041\"]]}]","output":"str","x":748,"y":1143,"wires":[["968121829ec13f89"]]},{"id":"968121829ec13f89","type":"template","z":"3b1289d7ccf9cb0f","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":840,"y":1200,"wires":[["af750fbb1cba639d"]]}]
This is the flow that generates this page.
[{"id":"e3e278445b7bcb21","type":"subflow","name":"BlogPageEndsHere","info":"","category":"","in":[{"x":132,"y":215,"wires":[{"id":"b2f270b15349b67c"}]}],"out":[],"env":[],"meta":{},"color":"#ddeeff","icon":"font-awesome/fa-hand-stop-o"},{"id":"627f98bbc0ea4f8b","type":"link out","z":"e3e278445b7bcb21","name":"link out 77","mode":"return","links":[],"x":1328,"y":306,"wires":[]},{"id":"408189fb7a17ba8b","type":"switch","z":"e3e278445b7bcb21","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1002,"y":403,"wires":[["627f98bbc0ea4f8b"],[]]},{"id":"2a2cc4ef4e7704b4","type":"template","z":"e3e278445b7bcb21","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":545,"y":632,"wires":[["408189fb7a17ba8b"]]},{"id":"693c46a206c026a4","type":"change","z":"e3e278445b7bcb21","name":"","rules":[{"t":"set","p":"template","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":474,"y":510,"wires":[["2a2cc4ef4e7704b4"]]},{"id":"b2f270b15349b67c","type":"switch","z":"e3e278445b7bcb21","name":"","property":"page.noderedjson","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":374,"y":408,"wires":[["408189fb7a17ba8b"],["693c46a206c026a4"]]},{"id":"f161221e2ee84846","type":"BlogPageInfo","z":"e88020583c022170","name":"","image":"1687952972847_Screen_Shot_2023-06-28_at_13.48.43.png","summary":"Codeblocks are one thing but images are further a thousand Json files. Show me your flow!","title":"Replacing Node-RED flow codeblocks with flow images.","publishedAt":"2023-06-28T11:22","updatedAt":"2023-06-28T11:22","incRss":true,"incSitemap":true,"incIndex":true,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":374.71435546875,"y":1339,"wires":[["49c3561cfc3bf8b3"]]},{"id":"e0bcd8d7b8245c21","type":"link in","z":"e88020583c022170","name":"[blog] backticks-in-markdown-and-node-red","links":[],"x":204,"y":1389,"wires":[["f161221e2ee84846"]]},{"id":"49c3561cfc3bf8b3","type":"template","z":"e88020583c022170","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":660,"y":1425,"wires":[["724cc1e0b9b56983"]]},{"id":"f9ea3058dc703eee","type":"BlogPageInfo","z":"e88020583c022170","name":"","image":"","summary":"Can I replace codeblocks of flows.json with images?","title":"Testing the inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71435546875,"y":1478,"wires":[["49c3561cfc3bf8b3"]]},{"id":"724cc1e0b9b56983","type":"template","z":"e88020583c022170","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":857,"y":1370,"wires":[["d8b85c4b0a441b4d"]]},{"id":"8b702bc007cf0e3e","type":"link in","z":"e88020583c022170","name":"[blog] codeblock-test","links":[],"x":204,"y":1424,"wires":[["f9ea3058dc703eee"]]},{"id":"d8b85c4b0a441b4d","type":"template","z":"e88020583c022170","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1029,"y":1433,"wires":[["23f9f3582f3172b6"]]},{"id":"23f9f3582f3172b6","type":"template","z":"e88020583c022170","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1235,"y":1378,"wires":[["22e594991d0092af"]]},{"id":"22e594991d0092af","type":"template","z":"e88020583c022170","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1411,"y":1443,"wires":[["8ffa9d87efff1d51"]]},{"id":"8ffa9d87efff1d51","type":"template","z":"e88020583c022170","name":"flowexample6","field":"flowexample6","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1592,"y":1385,"wires":[["7c3cbb557ff5b93d"]]},{"id":"7c3cbb557ff5b93d","type":"template","z":"e88020583c022170","name":"flowexample7","field":"flowexample7","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1740,"y":1443,"wires":[["d9667d3144e93adb"]]},{"id":"d9667d3144e93adb","type":"template","z":"e88020583c022170","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":1092,"y":1737,"wires":[["d3f10882a0773e9b"]]},{"id":"d3f10882a0773e9b","type":"subflow:e3e278445b7bcb21","z":"e88020583c022170","name":"","x":1089,"y":1797,"wires":[]}]
Visualised:
[{"id":"e3e278445b7bcb21","type":"subflow","name":"BlogPageEndsHere","info":"","category":"","in":[{"x":132,"y":215,"wires":[{"id":"b2f270b15349b67c"}]}],"out":[],"env":[],"meta":{},"color":"#ddeeff","icon":"font-awesome/fa-hand-stop-o"},{"id":"627f98bbc0ea4f8b","type":"link out","z":"e3e278445b7bcb21","name":"link out 77","mode":"return","links":[],"x":1328,"y":306,"wires":[]},{"id":"408189fb7a17ba8b","type":"switch","z":"e3e278445b7bcb21","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1002,"y":403,"wires":[["627f98bbc0ea4f8b"],[]]},{"id":"2a2cc4ef4e7704b4","type":"template","z":"e3e278445b7bcb21","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":545,"y":632,"wires":[["408189fb7a17ba8b"]]},{"id":"693c46a206c026a4","type":"change","z":"e3e278445b7bcb21","name":"","rules":[{"t":"set","p":"template","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":474,"y":510,"wires":[["2a2cc4ef4e7704b4"]]},{"id":"b2f270b15349b67c","type":"switch","z":"e3e278445b7bcb21","name":"","property":"page.noderedjson","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":374,"y":408,"wires":[["408189fb7a17ba8b"],["693c46a206c026a4"]]},{"id":"f161221e2ee84846","type":"BlogPageInfo","z":"e88020583c022170","name":"","image":"1687952972847_Screen_Shot_2023-06-28_at_13.48.43.png","summary":"Codeblocks are one thing but images are further a thousand Json files. Show me your flow!","title":"Replacing Node-RED flow codeblocks with flow images.","publishedAt":"2023-06-28T11:22","updatedAt":"2023-06-28T11:22","incRss":true,"incSitemap":true,"incIndex":true,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":374.71435546875,"y":1339,"wires":[["49c3561cfc3bf8b3"]]},{"id":"e0bcd8d7b8245c21","type":"link in","z":"e88020583c022170","name":"[blog] backticks-in-markdown-and-node-red","links":[],"x":204,"y":1389,"wires":[["f161221e2ee84846"]]},{"id":"49c3561cfc3bf8b3","type":"template","z":"e88020583c022170","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":660,"y":1425,"wires":[["724cc1e0b9b56983"]]},{"id":"f9ea3058dc703eee","type":"BlogPageInfo","z":"e88020583c022170","name":"","image":"","summary":"Can I replace codeblocks of flows.json with images?","title":"Testing the inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71435546875,"y":1478,"wires":[["49c3561cfc3bf8b3"]]},{"id":"724cc1e0b9b56983","type":"template","z":"e88020583c022170","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":857,"y":1370,"wires":[["d8b85c4b0a441b4d"]]},{"id":"8b702bc007cf0e3e","type":"link in","z":"e88020583c022170","name":"[blog] codeblock-test","links":[],"x":204,"y":1424,"wires":[["f9ea3058dc703eee"]]},{"id":"d8b85c4b0a441b4d","type":"template","z":"e88020583c022170","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1029,"y":1433,"wires":[["23f9f3582f3172b6"]]},{"id":"23f9f3582f3172b6","type":"template","z":"e88020583c022170","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1235,"y":1378,"wires":[["22e594991d0092af"]]},{"id":"22e594991d0092af","type":"template","z":"e88020583c022170","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1411,"y":1443,"wires":[["8ffa9d87efff1d51"]]},{"id":"8ffa9d87efff1d51","type":"template","z":"e88020583c022170","name":"flowexample6","field":"flowexample6","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1592,"y":1385,"wires":[["7c3cbb557ff5b93d"]]},{"id":"7c3cbb557ff5b93d","type":"template","z":"e88020583c022170","name":"flowexample7","field":"flowexample7","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1740,"y":1443,"wires":[["d9667d3144e93adb"]]},{"id":"d9667d3144e93adb","type":"template","z":"e88020583c022170","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":1092,"y":1737,"wires":[["d3f10882a0773e9b"]]},{"id":"d3f10882a0773e9b","type":"subflow:e3e278445b7bcb21","z":"e88020583c022170","name":"","x":1089,"y":1797,"wires":[]}]
For more examples, there is also a testing page. Select the flow to be viewed using the dropdown.
This is the example 5 but how not to do it.
[{"id":"e3e278445b7bcb21","type":"subflow","name":"BlogPageEndsHere","info":"","category":"","in":[{"x":132,"y":215,"wires":[{"id":"b2f270b15349b67c"}]}],"out":[],"env":[],"meta":{},"color":"#ddeeff","icon":"font-awesome/fa-hand-stop-o"},{"id":"627f98bbc0ea4f8b","type":"link out","z":"e3e278445b7bcb21","name":"link out 77","mode":"return","links":[],"x":1328,"y":306,"wires":[]},{"id":"408189fb7a17ba8b","type":"switch","z":"e3e278445b7bcb21","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1002,"y":403,"wires":[["627f98bbc0ea4f8b"],[]]},{"id":"2a2cc4ef4e7704b4","type":"template","z":"e3e278445b7bcb21","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":545,"y":632,"wires":[["408189fb7a17ba8b"]]},{"id":"693c46a206c026a4","type":"change","z":"e3e278445b7bcb21","name":"","rules":[{"t":"set","p":"template","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":474,"y":510,"wires":[["2a2cc4ef4e7704b4"]]},{"id":"b2f270b15349b67c","type":"switch","z":"e3e278445b7bcb21","name":"","property":"page.noderedjson","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":374,"y":408,"wires":[["408189fb7a17ba8b"],["693c46a206c026a4"]]},{"id":"82a04eeec5d1ec39","type":"link in","z":"04fab8edd0e8f2df","name":"[blog] backticks-in-markdown-and-node-red","links":[],"x":434,"y":292,"wires":[["cc439de6514717e7"]]},{"id":"cc439de6514717e7","type":"BlogPageInfo","z":"04fab8edd0e8f2df","name":"","image":"1687952972847_Screen_Shot_2023-06-28_at_13.48.43.png","summary":"Codeblocks are one thing but images are further a thousand Json files. Show me your flow!","title":"Replacing Node-RED flow codeblocks with flow images.","publishedAt":"2023-06-28T11:22","updatedAt":"2023-06-28T11:22","incRss":true,"incSitemap":true,"incIndex":true,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1075.71435546875,"y":448,"wires":[["be61a774e4c6d75e"]]},{"id":"be61a774e4c6d75e","type":"template","z":"04fab8edd0e8f2df","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":998,"y":563,"wires":[["db01f2dab4fa12ab"]]},{"id":"ac8306319a302f0c","type":"BlogPageInfo","z":"04fab8edd0e8f2df","name":"","image":"","summary":"Can I replace codeblocks of flows.json with images?","title":"Testing the inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1077.71435546875,"y":544,"wires":[["be61a774e4c6d75e"]]},{"id":"db01f2dab4fa12ab","type":"template","z":"04fab8edd0e8f2df","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":991,"y":467,"wires":[["440887f5bfa191c9"]]},{"id":"24767f8be515eebe","type":"link in","z":"04fab8edd0e8f2df","name":"[blog] codeblock-test","links":[],"x":432,"y":336,"wires":[["ac8306319a302f0c"]]},{"id":"440887f5bfa191c9","type":"template","z":"04fab8edd0e8f2df","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1218,"y":534,"wires":[["03989336aea86433"]]},{"id":"03989336aea86433","type":"template","z":"04fab8edd0e8f2df","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1151,"y":491,"wires":[["01dae03d9ec9694f"]]},{"id":"01dae03d9ec9694f","type":"template","z":"04fab8edd0e8f2df","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1043,"y":507,"wires":[["33bfba9a9fcd9e58"]]},{"id":"33bfba9a9fcd9e58","type":"template","z":"04fab8edd0e8f2df","name":"flowexample6","field":"flowexample6","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1205,"y":472,"wires":[["930cf2c0b7cbc504"]]},{"id":"930cf2c0b7cbc504","type":"template","z":"04fab8edd0e8f2df","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":1158,"y":550,"wires":[["e6cc075cbd12d4ef"]]},{"id":"e6cc075cbd12d4ef","type":"subflow:e3e278445b7bcb21","z":"04fab8edd0e8f2df","name":"","x":1645,"y":425,"wires":[]}]
Visualised:
[{"id":"e3e278445b7bcb21","type":"subflow","name":"BlogPageEndsHere","info":"","category":"","in":[{"x":132,"y":215,"wires":[{"id":"b2f270b15349b67c"}]}],"out":[],"env":[],"meta":{},"color":"#ddeeff","icon":"font-awesome/fa-hand-stop-o"},{"id":"627f98bbc0ea4f8b","type":"link out","z":"e3e278445b7bcb21","name":"link out 77","mode":"return","links":[],"x":1328,"y":306,"wires":[]},{"id":"408189fb7a17ba8b","type":"switch","z":"e3e278445b7bcb21","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1002,"y":403,"wires":[["627f98bbc0ea4f8b"],[]]},{"id":"2a2cc4ef4e7704b4","type":"template","z":"e3e278445b7bcb21","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":545,"y":632,"wires":[["408189fb7a17ba8b"]]},{"id":"693c46a206c026a4","type":"change","z":"e3e278445b7bcb21","name":"","rules":[{"t":"set","p":"template","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":474,"y":510,"wires":[["2a2cc4ef4e7704b4"]]},{"id":"b2f270b15349b67c","type":"switch","z":"e3e278445b7bcb21","name":"","property":"page.noderedjson","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":374,"y":408,"wires":[["408189fb7a17ba8b"],["693c46a206c026a4"]]},{"id":"82a04eeec5d1ec39","type":"link in","z":"04fab8edd0e8f2df","name":"[blog] backticks-in-markdown-and-node-red","links":[],"x":434,"y":292,"wires":[["cc439de6514717e7"]]},{"id":"cc439de6514717e7","type":"BlogPageInfo","z":"04fab8edd0e8f2df","name":"","image":"1687952972847_Screen_Shot_2023-06-28_at_13.48.43.png","summary":"Codeblocks are one thing but images are further a thousand Json files. Show me your flow!","title":"Replacing Node-RED flow codeblocks with flow images.","publishedAt":"2023-06-28T11:22","updatedAt":"2023-06-28T11:22","incRss":true,"incSitemap":true,"incIndex":true,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1075.71435546875,"y":448,"wires":[["be61a774e4c6d75e"]]},{"id":"be61a774e4c6d75e","type":"template","z":"04fab8edd0e8f2df","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":998,"y":563,"wires":[["db01f2dab4fa12ab"]]},{"id":"ac8306319a302f0c","type":"BlogPageInfo","z":"04fab8edd0e8f2df","name":"","image":"","summary":"Can I replace codeblocks of flows.json with images?","title":"Testing the inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1077.71435546875,"y":544,"wires":[["be61a774e4c6d75e"]]},{"id":"db01f2dab4fa12ab","type":"template","z":"04fab8edd0e8f2df","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":991,"y":467,"wires":[["440887f5bfa191c9"]]},{"id":"24767f8be515eebe","type":"link in","z":"04fab8edd0e8f2df","name":"[blog] codeblock-test","links":[],"x":432,"y":336,"wires":[["ac8306319a302f0c"]]},{"id":"440887f5bfa191c9","type":"template","z":"04fab8edd0e8f2df","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1218,"y":534,"wires":[["03989336aea86433"]]},{"id":"03989336aea86433","type":"template","z":"04fab8edd0e8f2df","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1151,"y":491,"wires":[["01dae03d9ec9694f"]]},{"id":"01dae03d9ec9694f","type":"template","z":"04fab8edd0e8f2df","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1043,"y":507,"wires":[["33bfba9a9fcd9e58"]]},{"id":"33bfba9a9fcd9e58","type":"template","z":"04fab8edd0e8f2df","name":"flowexample6","field":"flowexample6","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1205,"y":472,"wires":[["930cf2c0b7cbc504"]]},{"id":"930cf2c0b7cbc504","type":"template","z":"04fab8edd0e8f2df","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":1158,"y":550,"wires":[["e6cc075cbd12d4ef"]]},{"id":"e6cc075cbd12d4ef","type":"subflow:e3e278445b7bcb21","z":"04fab8edd0e8f2df","name":"","x":1645,"y":425,"wires":[]}]
[{"id":"e327754ca3e8bc71","type":"link out","z":"9c4c290bdd06d11d","name":"link out 84","mode":"link","links":["1f4e2a6d2636ab7e"],"x":782,"y":2197,"wires":[]},{"id":"1f4e2a6d2636ab7e","type":"link in","z":"9c4c290bdd06d11d","name":"link in 1","links":["e327754ca3e8bc71"],"x":1112,"y":2084,"wires":[["44ae31d84b57d1b3"]]},{"id":"44ae31d84b57d1b3","type":"debug","z":"9c4c290bdd06d11d","name":"debug 18","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1392,"y":2085,"wires":[]},{"id":"834a5e401e497f56","type":"inject","z":"9c4c290bdd06d11d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":591,"y":2197,"wires":[["e327754ca3e8bc71"]]}]
Visualised:
[{"id":"e327754ca3e8bc71","type":"link out","z":"9c4c290bdd06d11d","name":"link out 84","mode":"link","links":["1f4e2a6d2636ab7e"],"x":782,"y":2197,"wires":[]},{"id":"1f4e2a6d2636ab7e","type":"link in","z":"9c4c290bdd06d11d","name":"link in 1","links":["e327754ca3e8bc71"],"x":1112,"y":2084,"wires":[["44ae31d84b57d1b3"]]},{"id":"44ae31d84b57d1b3","type":"debug","z":"9c4c290bdd06d11d","name":"debug 18","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1392,"y":2085,"wires":[]},{"id":"834a5e401e497f56","type":"inject","z":"9c4c290bdd06d11d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":591,"y":2197,"wires":[["e327754ca3e8bc71"]]}]
The markdown code that generated this page or view page source to see the original before the images are rendered into the page.
The entire codebase is contained in an Node-RED instance which isn’t the best way to encourage collaboration. The code is licensed under the json.org license with an additional curse for evil-doers.
If you want to add this your page, add the following in the head tag (in the HTML template into which the Markdown is rendered):
<script src="https://blog.openmindmap.org/content/jquery-3.7.0.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://blog.openmindmap.org/embed/flowviewer.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://blog.openmindmap.org/embed/flowviewer.css">
and somewhere at the bottom of your pages body tag:
<script>
$(function(){
replaceCodeBlocksWithNodeRedFlowImages();
});
</script>
All those details are liable to change but I will attempt to keep the various versions online.
This is the source for this page.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node-RED Flow plugin html example</title>
<script src="https://unpkg.com/d3/dist/d3.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.openmindmap.org/embed/flowviewer.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.openmindmap.org/embed/flowviewer.css">
</head>
<body>
<h3>Example 1: Classic <code>noderedjson</code> language</h3>
<pre><code class="language-noderedjson">[{"id":"548238136ca436ac","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow.html","links":[],"x":538,"y":482,"wires":[["6c47c59cbbbecdf5"]]},{"id":"6c47c59cbbbecdf5","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":734.7143707275391,"y":482,"wires":[["64c749a71e14498a"]]},{"id":"99a631acf3d6c5bf","type":"link out","z":"652104ea8724facc","name":"link out 80","mode":"return","links":[],"x":1580.0002040863037,"y":475.4285936355591,"wires":[]},{"id":"b360b1072d4d72fa","type":"switch","z":"652104ea8724facc","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1289.8573913574219,"y":481.8571538925171,"wires":[["99a631acf3d6c5bf"],[]]},{"id":"64c749a71e14498a","type":"template","z":"652104ea8724facc","name":"v1","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":482,"wires":[["b360b1072d4d72fa"]]},{"id":"f0de398e3cfa056a","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v2.html","links":[],"x":538,"y":541.5714330673218,"wires":[["b116c37cd891a5e7"]]},{"id":"b116c37cd891a5e7","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":541.5714330673218,"wires":[["861c435f7685cf55"]]},{"id":"861c435f7685cf55","type":"template","z":"652104ea8724facc","name":"v2","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":541.5714330673218,"wires":[["b360b1072d4d72fa"]]},{"id":"951cf6e2f214b95b","type":"template","z":"652104ea8724facc","name":"v3","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":597.2857732772827,"wires":[["b360b1072d4d72fa"]]},{"id":"7885fd1e6f944103","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v3.html","links":[],"x":538,"y":597.2857732772827,"wires":[["382f5f013b6f9a3b"]]},{"id":"382f5f013b6f9a3b","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":597.2857732772827,"wires":[["951cf6e2f214b95b"]]},{"id":"7b05f3f671073181","type":"template","z":"652104ea8724facc","name":"v4","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"","output":"str","x":970.4287910461426,"y":662.2857732772827,"wires":[["b360b1072d4d72fa"]]},{"id":"3952279c3016c957","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v4.html","links":[],"x":538,"y":662.2857732772827,"wires":[["295d018b67f438b9"]]},{"id":"295d018b67f438b9","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":744.7143707275391,"y":662.2857732772827,"wires":[["7b05f3f671073181"]]},{"id":"747018dc4b0adf33","type":"template","z":"652104ea8724facc","name":"v5","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":975.571418762207,"y":724.7143468856812,"wires":[["b360b1072d4d72fa"]]},{"id":"317130644c24a056","type":"link in","z":"652104ea8724facc","name":"[blog] embedded-flow-v5.html","links":[],"x":543.1426277160645,"y":724.7143468856812,"wires":[["afca478f73a8601e"]]},{"id":"afca478f73a8601e","type":"BlogPageInfo","z":"652104ea8724facc","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":749.8569984436035,"y":724.7143468856812,"wires":[["747018dc4b0adf33"]]}]
</code></pre>
<hr>
<h3>Example 2: Language <code>noderedjson-with-arrows</code></h3>
<p>Arrows only on the inputs, outputs remain rectangles.</p>
<pre><code class="language-noderedjson-with-arrows">[{"id":"d598829cba783cad","type":"GetFlows","z":"f13d3b083d5cc429","name":"","flowVersion":"v1","useAuthentication":false,"apiUsername":"","apiUsernameType":"env","apiPassword":"","apiPasswordType":"env","x":349,"y":301,"wires":[["ddce7325bdba57d8"]]},{"id":"c507dd73478a26af","type":"inject","z":"f13d3b083d5cc429","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"7200","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":199,"y":181,"wires":[["d598829cba783cad"]]},{"id":"67b77f304303cb27","type":"http request","z":"f13d3b083d5cc429","name":"send off to backup server","method":"POST","ret":"txt","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":1119,"y":181,"wires":[[]]},{"id":"ddce7325bdba57d8","type":"change","z":"f13d3b083d5cc429","name":"setup payload for zip node","rules":[{"t":"set","p":"_p","pt":"msg","to":"[]","tot":"json"},{"t":"set","p":"_p[0]","pt":"msg","to":"{ \"filename\": \"openmindmap_flows.json\", \"payload\": \"\" }","tot":"json"},{"t":"set","p":"_p[0].payload","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"token","pt":"msg","to":"BACKUP_ZIP_TOKEN","tot":"env"},{"t":"set","p":"_p[1]","pt":"msg","to":"{ \"filename\": \"token.txt\", \"payload\": \"\" & token & \"\" }","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"_p","tot":"msg"},{"t":"set","p":"url","pt":"msg","to":"BACKUP_ENDPOINT","tot":"env"}],"action":"","property":"","from":"","to":"","reg":false,"x":549,"y":401,"wires":[["1f879c968f033a26"]]},{"id":"1f879c968f033a26","type":"zip","z":"f13d3b083d5cc429","name":"","mode":"compress","filename":"backup.zip","compressionlevel":"9","outasstring":false,"x":769,"y":401,"wires":[["53808fa58e1aa543"]]},{"id":"53808fa58e1aa543","type":"base64","z":"f13d3b083d5cc429","name":"","action":"","property":"payload","x":929,"y":301,"wires":[["67b77f304303cb27"]]}]
</code></pre>
<hr>
<h3>Example 3: Language <code>noderedjson-no-gridlines</code></h3>
<pre><code class="language-noderedjson-no-gridlines">[{"id":"e2ec7bbe752d60b0","type":"BlogDetails","z":"184fd5793b8d906c","name":"Open Mind Map Blog Configuration","authorName":"Gregorius Rippenstein","authorEmail":"gregorius@rippenstein.art","authorUrl":"https://gregorius.rippenstein.art","blogUrl":"https://blog.openmindmap.org","blogPathPrefix":"/blog","blogTitle":"Open Mind Map Blog","blogSubtitle":"Global mind-map for a global world.","blogCopyrightOwner":"Open Mind-Map Org.","x":818,"y":906.5,"wires":[["85a8755de2d6ae5c"]]},{"id":"1956265f7f508d04","type":"group","z":"184fd5793b8d906c","name":"ensure correct domain","style":{"label":true,"fill":"#bfc7d7","fill-opacity":"0.71","color":"#000000"},"nodes":["26b099616f74f352","42795f82c29b8583","1f0ea79587166fdd","6f6d63b5fa995b5c","1d1325b68a7cac1e","cdaeb49728432c46"],"x":163,"y":136,"w":877,"h":189.5},{"id":"26b099616f74f352","type":"switch","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"check hostname","property":"req.hostname","propertyType":"msg","rules":[{"t":"eq","v":"blog.openmindmap.org","vt":"str"},{"t":"eq","v":"demo.openmindmap.org","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":533,"y":184.5,"wires":[["e2ec7bbe752d60b0"],["1f0ea79587166fdd"],["6f6d63b5fa995b5c"]]},{"id":"42795f82c29b8583","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/","method":"get","upload":false,"swaggerDoc":"","x":239,"y":184.5,"wires":[["26b099616f74f352"]]},{"id":"1f0ea79587166fdd","type":"http response","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"redirect if demo.omm.org","statusCode":"301","headers":{"Location":"/omm"},"x":887,"y":185.5,"wires":[]},{"id":"6f6d63b5fa995b5c","type":"http response","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"NOT FOUND everything else","statusCode":"404","headers":{},"x":894,"y":227.5,"wires":[]},{"id":"1d1325b68a7cac1e","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/blog/:name","method":"get","upload":false,"swaggerDoc":"","x":269,"y":232.5,"wires":[["26b099616f74f352"]]},{"id":"cdaeb49728432c46","type":"http in","z":"184fd5793b8d906c","g":"1956265f7f508d04","name":"","url":"/:name","method":"get","upload":false,"swaggerDoc":"","x":259,"y":284.5,"wires":[["26b099616f74f352"]]},{"id":"95389d39f5c53d23","type":"group","z":"184fd5793b8d906c","name":"map path to blog content","style":{"label":true,"stroke":"#000000","color":"#000000"},"nodes":["85c463f82c547140","32bb06dfab9a9529","85a8755de2d6ae5c","7fa818203cac5402","71c533e01539c3d3","180d18e4931a5ace","0d6c29c07f300c15","f4781993f9dc4130","b41e2620ed591a2d","a4bf3e5ac7c74343","5d0edf716dc5c6b5"],"x":1182,"y":790.5,"w":2129,"h":264},{"id":"85c463f82c547140","type":"template","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"HTML Layout","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":3035,"y":1013.5,"wires":[["32bb06dfab9a9529"]]},{"id":"32bb06dfab9a9529","type":"http response","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"","statusCode":"200","headers":{},"x":3225,"y":932.5,"wires":[]},{"id":"85a8755de2d6ae5c","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"Path handling","property":"req.params.name","propertyType":"msg","rules":[{"t":"eq","v":"apple-touch-icon.png","vt":"str"},{"t":"eq","v":"favicon.ico","vt":"str"},{"t":"eq","v":"sitemap.xml","vt":"str"},{"t":"eq","v":"feed.xml","vt":"str"},{"t":"eq","v":"rss.xml","vt":"str"},{"t":"eq","v":"index","vt":"str"},{"t":"eq","v":"blog","vt":"str"},{"t":"nnull"},{"t":"else"}],"checkall":"false","repair":false,"outputs":9,"x":1288,"y":906.5,"wires":[[],[],[],[],[],["7fa818203cac5402"],["0d6c29c07f300c15"],["7fa818203cac5402"],["0d6c29c07f300c15"]]},{"id":"7fa818203cac5402","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"set page target: \"[blog] <name>\"","rules":[{"t":"set","p":"target","pt":"msg","to":"\"[blog] \" & msg.req.params.name","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1638,"y":886.5,"wires":[["71c533e01539c3d3"]]},{"id":"71c533e01539c3d3","type":"link call","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"generate page content","links":[],"linkType":"dynamic","timeout":"5","x":1941,"y":951.5,"wires":[["f4781993f9dc4130"]]},{"id":"180d18e4931a5ace","type":"markdown","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"Markdown to HTML","x":2794,"y":1013.5,"wires":[["85c463f82c547140"]]},{"id":"0d6c29c07f300c15","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"target: \"[blog] index\"","rules":[{"t":"set","p":"target","pt":"msg","to":"[blog] index","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1598,"y":951.5,"wires":[["71c533e01539c3d3"]]},{"id":"f4781993f9dc4130","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"ignore redirects","property":"statusCode","propertyType":"msg","rules":[{"t":"eq","v":"301","vt":"num"},{"t":"eq","v":"302","vt":"num"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":2152,"y":951.5,"wires":[[],[],["b41e2620ed591a2d"]]},{"id":"b41e2620ed591a2d","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"path extension is '.html'?","property":"page.path","propertyType":"msg","rules":[{"t":"regex","v":"\\.html$","vt":"str","case":true},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":2524,"y":831.5,"wires":[["32bb06dfab9a9529"],["a4bf3e5ac7c74343"]]},{"id":"a4bf3e5ac7c74343","type":"switch","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"is msg.htmlcontent set?","property":"htmlcontent","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":2526,"y":935.5,"wires":[["5d0edf716dc5c6b5"],["180d18e4931a5ace"]]},{"id":"5d0edf716dc5c6b5","type":"change","z":"184fd5793b8d906c","g":"95389d39f5c53d23","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"htmlcontent","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":2863,"y":929.5,"wires":[["32bb06dfab9a9529"]]}]
</code></pre>
<hr>
<h3>Example 4: The Xmas tree with <code>noderedjson-no-gridlines-with-arrows</code></h3>
<pre><code class="language-noderedjson-no-gridlines-with-arrows">[{"id":"ae0d5b956a3f28e6","type":"BlogPageInfo","z":"4c24fa4e7dcf38ec","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":false,"reloadOnEdit":true,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1049,"y":559,"wires":[["2d22995c9f1f1b29"]]},{"id":"cbce591869d45063","type":"link in","z":"4c24fa4e7dcf38ec","name":"[blog] embedded-flow-v10.html","links":[],"x":1146.28564453125,"y":641,"wires":[["ae0d5b956a3f28e6"]]},{"id":"2d22995c9f1f1b29","type":"template","z":"4c24fa4e7dcf38ec","name":"v10","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1298.71435546875,"y":609,"wires":[["abac4f329e6a820d"]]},{"id":"abac4f329e6a820d","type":"switch","z":"4c24fa4e7dcf38ec","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":553.0003051757812,"y":816.142822265625,"wires":[["09b45bafaa67147a"],[]]},{"id":"503aa7f4da56542d","type":"template","z":"4c24fa4e7dcf38ec","name":"v11","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":578.7144203186035,"y":728,"wires":[["abac4f329e6a820d"]]},{"id":"09b45bafaa67147a","type":"link out","z":"4c24fa4e7dcf38ec","name":"link out 82","mode":"return","links":[],"x":1136.14306640625,"y":818.7142333984375,"wires":[]},{"id":"cd925fa7a351451a","type":"markdown","z":"4c24fa4e7dcf38ec","name":"","x":772.7144203186035,"y":594,"wires":[["503aa7f4da56542d"]]},{"id":"8d7a34aac2739180","type":"template","z":"4c24fa4e7dcf38ec","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":965.7144203186035,"y":405,"wires":[["cd925fa7a351451a"]]},{"id":"c639b3e6dd4092a2","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample7","field":"flowexample7","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1185.7144203186035,"y":156,"wires":[["8d7a34aac2739180"]]},{"id":"40562872bcf9e779","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample6","field":"flowexample6","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1424.7144203186035,"y":402,"wires":[["c639b3e6dd4092a2"]]},{"id":"23dc5d86e4ae09f7","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1633.7144203186035,"y":606,"wires":[["40562872bcf9e779"]]},{"id":"309d9661aa3ca436","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1814.7144203186035,"y":804,"wires":[["23dc5d86e4ae09f7"]]},{"id":"88644f9859d30ff0","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1346.7144203186035,"y":811,"wires":[["309d9661aa3ca436"]]},{"id":"18c0c665820d9a21","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1115.7144775390625,"y":952,"wires":[["88644f9859d30ff0"]]},{"id":"8cd8ed44f82b06bf","type":"template","z":"4c24fa4e7dcf38ec","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":894.71435546875,"y":819,"wires":[["18c0c665820d9a21"]]},{"id":"2294edbbc0bcfa16","type":"BlogPageInfo","z":"4c24fa4e7dcf38ec","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":false,"reloadOnEdit":true,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1371,"y":559,"wires":[["8cd8ed44f82b06bf"]]},{"id":"48e808c24ffc7e1d","type":"link in","z":"4c24fa4e7dcf38ec","name":"[blog] embedded-flow-v11.html","links":[],"x":1122.28564453125,"y":484,"wires":[["2294edbbc0bcfa16"]]}]
</code></pre>
<hr>
<h3>Example 5: Language: <code>noderedjson-no-images</code></h3>
<pre><code class="language-noderedjson-no-images">[{"id":"e3e278445b7bcb21","type":"subflow","name":"BlogPageEndsHere","info":"","category":"","in":[{"x":132,"y":215,"wires":[{"id":"b2f270b15349b67c"}]}],"out":[],"env":[],"meta":{},"color":"#ddeeff","icon":"font-awesome/fa-hand-stop-o"},{"id":"627f98bbc0ea4f8b","type":"link out","z":"e3e278445b7bcb21","name":"link out 77","mode":"return","links":[],"x":1328,"y":306,"wires":[]},{"id":"408189fb7a17ba8b","type":"switch","z":"e3e278445b7bcb21","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1002,"y":403,"wires":[["627f98bbc0ea4f8b"],[]]},{"id":"2a2cc4ef4e7704b4","type":"template","z":"e3e278445b7bcb21","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":545,"y":632,"wires":[["408189fb7a17ba8b"]]},{"id":"693c46a206c026a4","type":"change","z":"e3e278445b7bcb21","name":"","rules":[{"t":"set","p":"template","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":474,"y":510,"wires":[["2a2cc4ef4e7704b4"]]},{"id":"b2f270b15349b67c","type":"switch","z":"e3e278445b7bcb21","name":"","property":"page.noderedjson","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":374,"y":408,"wires":[["408189fb7a17ba8b"],["693c46a206c026a4"]]},{"id":"f161221e2ee84846","type":"BlogPageInfo","z":"e88020583c022170","name":"","image":"1687952972847_Screen_Shot_2023-06-28_at_13.48.43.png","summary":"Codeblocks are one thing but images are further a thousand Json files. Show me your flow!","title":"Replacing Node-RED flow codeblocks with flow images.","publishedAt":"2023-06-28T11:22","updatedAt":"2023-06-28T11:22","incRss":true,"incSitemap":true,"incIndex":true,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":374.71435546875,"y":1339,"wires":[["49c3561cfc3bf8b3"]]},{"id":"e0bcd8d7b8245c21","type":"link in","z":"e88020583c022170","name":"[blog] backticks-in-markdown-and-node-red","links":[],"x":204,"y":1389,"wires":[["f161221e2ee84846"]]},{"id":"49c3561cfc3bf8b3","type":"template","z":"e88020583c022170","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":660,"y":1425,"wires":[["724cc1e0b9b56983"]]},{"id":"f9ea3058dc703eee","type":"BlogPageInfo","z":"e88020583c022170","name":"","image":"","summary":"Can I replace codeblocks of flows.json with images?","title":"Testing the inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71435546875,"y":1478,"wires":[["49c3561cfc3bf8b3"]]},{"id":"724cc1e0b9b56983","type":"template","z":"e88020583c022170","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":857,"y":1370,"wires":[["d8b85c4b0a441b4d"]]},{"id":"8b702bc007cf0e3e","type":"link in","z":"e88020583c022170","name":"[blog] codeblock-test","links":[],"x":204,"y":1424,"wires":[["f9ea3058dc703eee"]]},{"id":"d8b85c4b0a441b4d","type":"template","z":"e88020583c022170","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1029,"y":1433,"wires":[["23f9f3582f3172b6"]]},{"id":"23f9f3582f3172b6","type":"template","z":"e88020583c022170","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1235,"y":1378,"wires":[["22e594991d0092af"]]},{"id":"22e594991d0092af","type":"template","z":"e88020583c022170","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1411,"y":1443,"wires":[["8ffa9d87efff1d51"]]},{"id":"8ffa9d87efff1d51","type":"template","z":"e88020583c022170","name":"flowexample6","field":"flowexample6","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1592,"y":1385,"wires":[["7c3cbb557ff5b93d"]]},{"id":"7c3cbb557ff5b93d","type":"template","z":"e88020583c022170","name":"flowexample7","field":"flowexample7","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1740,"y":1443,"wires":[["d9667d3144e93adb"]]},{"id":"d9667d3144e93adb","type":"template","z":"e88020583c022170","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":1092,"y":1737,"wires":[["d3f10882a0773e9b"]]},{"id":"d3f10882a0773e9b","type":"subflow:e3e278445b7bcb21","z":"e88020583c022170","name":"","x":1089,"y":1797,"wires":[]}]
</code></pre>
<hr>
<h3>Example 6: Language: <code>noderedjson-no-images-with-arrows-no-gridlines</code></h3>
<pre><code class="language-noderedjson-no-images-with-arrows-no-gridlines">[{"id":"3287a0ac2d2a237b","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow.html","links":[],"x":197,"y":107,"wires":[["0771f05ddd5c7e3e"]]},{"id":"0771f05ddd5c7e3e","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":393.71437072753906,"y":107,"wires":[["f9b99c65087dc03e"]]},{"id":"996205845bf2ce3f","type":"link out","z":"fa990486a351d7f4","name":"link out 80","mode":"return","links":[],"x":1239.0002040863037,"y":100.42859363555908,"wires":[]},{"id":"714495cf05a320bf","type":"switch","z":"fa990486a351d7f4","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":948.8573913574219,"y":106.85715389251709,"wires":[["996205845bf2ce3f"],[]]},{"id":"f9b99c65087dc03e","type":"template","z":"fa990486a351d7f4","name":"v1","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":629.4287910461426,"y":107,"wires":[["714495cf05a320bf"]]},{"id":"b6b29c169ced0dc4","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v2.html","links":[],"x":197,"y":166.57143306732178,"wires":[["755725b937fd9621"]]},{"id":"755725b937fd9621","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71437072753906,"y":166.57143306732178,"wires":[["eb04b257022ae729"]]},{"id":"eb04b257022ae729","type":"template","z":"fa990486a351d7f4","name":"v2","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":629.4287910461426,"y":166.57143306732178,"wires":[["714495cf05a320bf"]]},{"id":"b03d9f123a9903ca","type":"template","z":"fa990486a351d7f4","name":"v3","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":629.4287910461426,"y":222.28577327728271,"wires":[["714495cf05a320bf"]]},{"id":"f660e24f4f9d210d","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v3.html","links":[],"x":197,"y":222.28577327728271,"wires":[["ae8f25da7d7893fc"]]},{"id":"ae8f25da7d7893fc","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71437072753906,"y":222.28577327728271,"wires":[["b03d9f123a9903ca"]]},{"id":"f0cec8e4f35dbc99","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers.js","method":"get","upload":false,"swaggerDoc":"","x":533.571418762207,"y":877.7143468856812,"wires":[["dd80e50a71271b27"]]},{"id":"d5631179afc237dc","type":"http response","z":"fa990486a351d7f4","name":"js","statusCode":"","headers":{"content-type":"application/javascript; charset=utf-8"},"x":1879.571418762207,"y":878.7143468856812,"wires":[]},{"id":"dd80e50a71271b27","type":"template","z":"fa990486a351d7f4","name":"","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1703.571418762207,"y":878.7143468856812,"wires":[["d5631179afc237dc"]]},{"id":"ac22dd3a10ca8a7a","type":"template","z":"fa990486a351d7f4","name":"complete js content","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1555.571418762207,"y":1097.7143468856812,"wires":[["d5631179afc237dc"]]},{"id":"e1e9d52f873f0f5b","type":"template","z":"fa990486a351d7f4","name":"jsColoursByType","field":"jsColoursByType","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":855.571418762207,"y":941.7143468856812,"wires":[["36cee437c1931ff7"]]},{"id":"f9a2c229e54e7c1a","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v4.js","method":"get","upload":false,"swaggerDoc":"","x":543.571418762207,"y":942.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"36cee437c1931ff7","type":"template","z":"fa990486a351d7f4","name":"jsUtilsGetNodeSelector","field":"jsUtilsGetNodeSelector","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":875.571418762207,"y":981.7143468856812,"wires":[["b101d34ec03a821c"]]},{"id":"b101d34ec03a821c","type":"template","z":"fa990486a351d7f4","name":"jsGenerateLinkPath","field":"jsGenerateLinkPath","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":855.571418762207,"y":1021.7143468856812,"wires":[["75fb6789236f48df"]]},{"id":"d6db970006d87875","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v4","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1269.571418762207,"y":1048.7143468856812,"wires":[["ac22dd3a10ca8a7a"]]},{"id":"66af842428cf1829","type":"template","z":"fa990486a351d7f4","name":"v4","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"","output":"str","x":629.4287910461426,"y":287.2857732772827,"wires":[["714495cf05a320bf"]]},{"id":"859109e5f2acb4e2","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v4.html","links":[],"x":197,"y":287.2857732772827,"wires":[["b3b58ff6a8dede2a"]]},{"id":"b3b58ff6a8dede2a","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71437072753906,"y":287.2857732772827,"wires":[["66af842428cf1829"]]},{"id":"75fb6789236f48df","type":"template","z":"fa990486a351d7f4","name":"jsLabelUtils","field":"jsLabelUtils","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":834.571418762207,"y":1063.7143468856812,"wires":[["ee74e71603896290"]]},{"id":"f68eb4ac92f2416b","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v5.js","method":"get","upload":false,"swaggerDoc":"","x":543.571418762207,"y":1000.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"ee74e71603896290","type":"switch","z":"fa990486a351d7f4","name":"","property":"req.route.path","propertyType":"msg","rules":[{"t":"regex","v":"v4\\.js$","vt":"str","case":false},{"t":"regex","v":"v5\\.js$","vt":"str","case":false},{"t":"regex","v":"v6\\.js$","vt":"str","case":false},{"t":"regex","v":"v7\\.js$","vt":"str","case":false},{"t":"regex","v":"v8\\.js$","vt":"str","case":false},{"t":"regex","v":"v9\\.js$","vt":"str","case":false}],"checkall":"false","repair":false,"outputs":6,"x":1029.571418762207,"y":1127.7143468856812,"wires":[["d6db970006d87875"],["f6adde966139457a"],["4e28f7e5936ef6d7"],["6088b6915f67e507"],["abd4a979676a9088"],["6088b6915f67e507"]]},{"id":"092c9e55a4787172","type":"template","z":"fa990486a351d7f4","name":"v5","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":634.571418762207,"y":349.71434688568115,"wires":[["714495cf05a320bf"]]},{"id":"f360b35c4b1460d8","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v5.html","links":[],"x":202.14262771606445,"y":349.71434688568115,"wires":[["af62934ece609c34"]]},{"id":"af62934ece609c34","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":408.8569984436035,"y":349.71434688568115,"wires":[["092c9e55a4787172"]]},{"id":"f6adde966139457a","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v5","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1270.571418762207,"y":1099.7143468856812,"wires":[["ac22dd3a10ca8a7a"]]},{"id":"7be8ff2bc6dfd549","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers.css","method":"get","upload":false,"swaggerDoc":"","x":543.571418762207,"y":812.7143468856812,"wires":[["16ec47cfaf4f5426"]]},{"id":"ad579a790a31d908","type":"http response","z":"fa990486a351d7f4","name":"css","statusCode":"200","headers":{"content-type":"text/css"},"x":1044.571418762207,"y":812.7143468856812,"wires":[]},{"id":"16ec47cfaf4f5426","type":"template","z":"fa990486a351d7f4","name":"basic styling","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":"","output":"str","x":840.571418762207,"y":812.7143468856812,"wires":[["ad579a790a31d908"]]},{"id":"4f0b969b37876989","type":"link in","z":"fa990486a351d7f4","name":"[blog] codeblock-test","links":[],"x":266.57141876220703,"y":1639.7143468856812,"wires":[["ea637b2ce7e48ce9"]]},{"id":"ea637b2ce7e48ce9","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I replace codeblocks of flows.json with images?","title":"Testing the inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":509.28577423095703,"y":1639.7143468856812,"wires":[["097d04d398ea4c66"]]},{"id":"a943b1f59b6f617b","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v6.js","method":"get","upload":false,"swaggerDoc":"","x":544.571418762207,"y":1071.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"4e28f7e5936ef6d7","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v6","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1271.571418762207,"y":1160.7143468856812,"wires":[["c37952730d57c5a4"]]},{"id":"c37952730d57c5a4","type":"template","z":"fa990486a351d7f4","name":"complete js content","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1563.571418762207,"y":1214.7143468856812,"wires":[["d5631179afc237dc"]]},{"id":"d5525ca53c469c75","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v7.js","method":"get","upload":false,"swaggerDoc":"","x":548.571418762207,"y":1134.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"a631368aa97d4e8b","type":"link out","z":"fa990486a351d7f4","name":"link out 83","mode":"return","links":[],"x":2214.571418762207,"y":1682.7143468856812,"wires":[]},{"id":"bc9a57e1232b6afa","type":"switch","z":"fa990486a351d7f4","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1859.428596496582,"y":1689.1429357528687,"wires":[["a631368aa97d4e8b"],[]]},{"id":"a3cbccaeff13d666","type":"template","z":"fa990486a351d7f4","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":1572.571418762207,"y":1689.7143468856812,"wires":[["bc9a57e1232b6afa"]]},{"id":"097d04d398ea4c66","type":"template","z":"fa990486a351d7f4","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":763.571418762207,"y":1692.7143468856812,"wires":[["e18f0e6a54e39f22"]]},{"id":"e18f0e6a54e39f22","type":"template","z":"fa990486a351d7f4","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":918.571418762207,"y":1776.7143468856812,"wires":[["4f84f6937ef60497"]]},{"id":"4f84f6937ef60497","type":"template","z":"fa990486a351d7f4","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1059.571418762207,"y":1849.7143468856812,"wires":[["0a0ba7ec8625eb0b"]]},{"id":"0a0ba7ec8625eb0b","type":"template","z":"fa990486a351d7f4","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1241.571418762207,"y":1925.7143468856812,"wires":[["bd91742d746c4d5b"]]},{"id":"3ae3d00f0bda7482","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v7","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1268.571418762207,"y":1214.7143468856812,"wires":[["c37952730d57c5a4"]]},{"id":"bd91742d746c4d5b","type":"template","z":"fa990486a351d7f4","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1425.571418762207,"y":1994.7143468856812,"wires":[["a3cbccaeff13d666"]]},{"id":"cd12a091665dd5f2","type":"link in","z":"fa990486a351d7f4","name":"[blog] backticks-in-markdown-and-node-red","links":[],"x":180.57141876220703,"y":1725.7143468856812,"wires":[["8da95fc4288b26d9"]]},{"id":"8da95fc4288b26d9","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"1687952972847_Screen_Shot_2023-06-28_at_13.48.43.png","summary":"Codeblocks are one thing but images are further a thousand Json files. Show me your flow!","title":"Replacing Node-RED flow codeblocks with flow images.","publishedAt":"2023-06-28T11:22","updatedAt":"2023-06-28T11:22","incRss":true,"incSitemap":true,"incIndex":true,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":true,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":412.28577423095703,"y":1725.7143468856812,"wires":[["097d04d398ea4c66"]]},{"id":"abd4a979676a9088","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v8","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1269.571418762207,"y":1265.7143468856812,"wires":[["c37952730d57c5a4"]]},{"id":"18f2cbabeac6fdf8","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v8.js","method":"get","upload":false,"swaggerDoc":"","x":547.571418762207,"y":1227.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"f6a192d1d1cd8646","type":"template","z":"fa990486a351d7f4","name":"v8","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":637.571418762207,"y":418.71434688568115,"wires":[["714495cf05a320bf"]]},{"id":"e177926e2c030177","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v8.html","links":[],"x":205.14262771606445,"y":418.71434688568115,"wires":[["f92265840d383980"]]},{"id":"f92265840d383980","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":411.8569984436035,"y":418.71434688568115,"wires":[["f6a192d1d1cd8646"]]},{"id":"6088b6915f67e507","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v9","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1267.571418762207,"y":1318.7143468856812,"wires":[["c37952730d57c5a4"]]},{"id":"a0ce6ff5b4194687","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v9.js","method":"get","upload":false,"swaggerDoc":"","x":537.571418762207,"y":1297.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"5529c827c2ddd554","type":"template","z":"fa990486a351d7f4","name":"v9","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":630.571418762207,"y":496.71434688568115,"wires":[["714495cf05a320bf"]]},{"id":"a96e7d5a3f2a3b3f","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v9.html","links":[],"x":198.14262771606445,"y":496.71434688568115,"wires":[["c70cc9c6437dc797"]]},{"id":"c70cc9c6437dc797","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":false,"reloadOnEdit":true,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":414.8569984436035,"y":496.71434688568115,"wires":[["5529c827c2ddd554"]]}]
</code></pre>
<hr>
<h3>Example 7: Spaghetti flow</h3>
<pre><code class="language-noderedjson">[{"id":"e3e278445b7bcb21","type":"subflow","name":"BlogPageEndsHere","info":"","category":"","in":[{"x":132,"y":215,"wires":[{"id":"b2f270b15349b67c"}]}],"out":[],"env":[],"meta":{},"color":"#ddeeff","icon":"font-awesome/fa-hand-stop-o"},{"id":"627f98bbc0ea4f8b","type":"link out","z":"e3e278445b7bcb21","name":"link out 77","mode":"return","links":[],"x":1328,"y":306,"wires":[]},{"id":"408189fb7a17ba8b","type":"switch","z":"e3e278445b7bcb21","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1002,"y":403,"wires":[["627f98bbc0ea4f8b"],[]]},{"id":"2a2cc4ef4e7704b4","type":"template","z":"e3e278445b7bcb21","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":545,"y":632,"wires":[["408189fb7a17ba8b"]]},{"id":"693c46a206c026a4","type":"change","z":"e3e278445b7bcb21","name":"","rules":[{"t":"set","p":"template","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":474,"y":510,"wires":[["2a2cc4ef4e7704b4"]]},{"id":"b2f270b15349b67c","type":"switch","z":"e3e278445b7bcb21","name":"","property":"page.noderedjson","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":374,"y":408,"wires":[["408189fb7a17ba8b"],["693c46a206c026a4"]]},{"id":"82a04eeec5d1ec39","type":"link in","z":"04fab8edd0e8f2df","name":"[blog] backticks-in-markdown-and-node-red","links":[],"x":434,"y":292,"wires":[["cc439de6514717e7"]]},{"id":"cc439de6514717e7","type":"BlogPageInfo","z":"04fab8edd0e8f2df","name":"","image":"1687952972847_Screen_Shot_2023-06-28_at_13.48.43.png","summary":"Codeblocks are one thing but images are further a thousand Json files. Show me your flow!","title":"Replacing Node-RED flow codeblocks with flow images.","publishedAt":"2023-06-28T11:22","updatedAt":"2023-06-28T11:22","incRss":true,"incSitemap":true,"incIndex":true,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1075.71435546875,"y":448,"wires":[["be61a774e4c6d75e"]]},{"id":"be61a774e4c6d75e","type":"template","z":"04fab8edd0e8f2df","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":998,"y":563,"wires":[["db01f2dab4fa12ab"]]},{"id":"ac8306319a302f0c","type":"BlogPageInfo","z":"04fab8edd0e8f2df","name":"","image":"","summary":"Can I replace codeblocks of flows.json with images?","title":"Testing the inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1077.71435546875,"y":544,"wires":[["be61a774e4c6d75e"]]},{"id":"db01f2dab4fa12ab","type":"template","z":"04fab8edd0e8f2df","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":991,"y":467,"wires":[["440887f5bfa191c9"]]},{"id":"24767f8be515eebe","type":"link in","z":"04fab8edd0e8f2df","name":"[blog] codeblock-test","links":[],"x":432,"y":336,"wires":[["ac8306319a302f0c"]]},{"id":"440887f5bfa191c9","type":"template","z":"04fab8edd0e8f2df","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1218,"y":534,"wires":[["03989336aea86433"]]},{"id":"03989336aea86433","type":"template","z":"04fab8edd0e8f2df","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1151,"y":491,"wires":[["01dae03d9ec9694f"]]},{"id":"01dae03d9ec9694f","type":"template","z":"04fab8edd0e8f2df","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1043,"y":507,"wires":[["33bfba9a9fcd9e58"]]},{"id":"33bfba9a9fcd9e58","type":"template","z":"04fab8edd0e8f2df","name":"flowexample6","field":"flowexample6","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1205,"y":472,"wires":[["930cf2c0b7cbc504"]]},{"id":"930cf2c0b7cbc504","type":"template","z":"04fab8edd0e8f2df","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":1158,"y":550,"wires":[["e6cc075cbd12d4ef"]]},{"id":"e6cc075cbd12d4ef","type":"subflow:e3e278445b7bcb21","z":"04fab8edd0e8f2df","name":"","x":1645,"y":425,"wires":[]}]
</code></pre>
<hr>
</body>
<script>
$(function(){
replaceCodeBlocksWithNodeRedFlowImages();
});
window.addEventListener('load', function () {
setTimeout( function(){
var svgs = d3.selectAll(".svg-container-noderedjson svg");
svgs.each(function() {
var svg = d3.select(this);
svg.html("<g>" + svg.html() + "</g>");
var inner = svg.select("g");
var zoom = d3.zoom().on("zoom", function(event) {
inner.attr("transform", event.transform);
});
svg.call(zoom);
});
}, 500);
});
</script>
</html>
I also imagine using this to have a visual comparison between flow versions. At the moment, to compare two different versions of a flow, one has to compare the json files or use the inbuilt comparison tool in Node-RED. This tool does a two side-by-side comparing each attribute of every node. This includes the X,Y coordinates.
This I find too complex. I would like to have a visual-based comparison between flow versions, how this will work - no idea! (Update: a first attempt of this can be found at FlowHub which is an attempt at visual code sharing with visual comparison.)
Visualisation of the flow that generates this page and the javascript code for this page.
[{"id":"3287a0ac2d2a237b","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow.html","links":[],"x":197,"y":107,"wires":[["0771f05ddd5c7e3e"]]},{"id":"0771f05ddd5c7e3e","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":393.71437072753906,"y":107,"wires":[["f9b99c65087dc03e"]]},{"id":"996205845bf2ce3f","type":"link out","z":"fa990486a351d7f4","name":"link out 80","mode":"return","links":[],"x":1239.0002040863037,"y":100.42859363555908,"wires":[]},{"id":"714495cf05a320bf","type":"switch","z":"fa990486a351d7f4","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":948.8573913574219,"y":106.85715389251709,"wires":[["996205845bf2ce3f"],[]]},{"id":"f9b99c65087dc03e","type":"template","z":"fa990486a351d7f4","name":"v1","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":629.4287910461426,"y":107,"wires":[["714495cf05a320bf"]]},{"id":"b6b29c169ced0dc4","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v2.html","links":[],"x":197,"y":166.57143306732178,"wires":[["755725b937fd9621"]]},{"id":"755725b937fd9621","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71437072753906,"y":166.57143306732178,"wires":[["eb04b257022ae729"]]},{"id":"eb04b257022ae729","type":"template","z":"fa990486a351d7f4","name":"v2","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":629.4287910461426,"y":166.57143306732178,"wires":[["714495cf05a320bf"]]},{"id":"b03d9f123a9903ca","type":"template","z":"fa990486a351d7f4","name":"v3","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":629.4287910461426,"y":222.28577327728271,"wires":[["714495cf05a320bf"]]},{"id":"f660e24f4f9d210d","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v3.html","links":[],"x":197,"y":222.28577327728271,"wires":[["ae8f25da7d7893fc"]]},{"id":"ae8f25da7d7893fc","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71437072753906,"y":222.28577327728271,"wires":[["b03d9f123a9903ca"]]},{"id":"f0cec8e4f35dbc99","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers.js","method":"get","upload":false,"swaggerDoc":"","x":533.571418762207,"y":877.7143468856812,"wires":[["dd80e50a71271b27"]]},{"id":"d5631179afc237dc","type":"http response","z":"fa990486a351d7f4","name":"js","statusCode":"","headers":{"content-type":"application/javascript; charset=utf-8"},"x":1879.571418762207,"y":878.7143468856812,"wires":[]},{"id":"dd80e50a71271b27","type":"template","z":"fa990486a351d7f4","name":"","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1703.571418762207,"y":878.7143468856812,"wires":[["d5631179afc237dc"]]},{"id":"ac22dd3a10ca8a7a","type":"template","z":"fa990486a351d7f4","name":"complete js content","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1555.571418762207,"y":1097.7143468856812,"wires":[["d5631179afc237dc"]]},{"id":"e1e9d52f873f0f5b","type":"template","z":"fa990486a351d7f4","name":"jsColoursByType","field":"jsColoursByType","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":855.571418762207,"y":941.7143468856812,"wires":[["36cee437c1931ff7"]]},{"id":"f9a2c229e54e7c1a","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v4.js","method":"get","upload":false,"swaggerDoc":"","x":543.571418762207,"y":942.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"36cee437c1931ff7","type":"template","z":"fa990486a351d7f4","name":"jsUtilsGetNodeSelector","field":"jsUtilsGetNodeSelector","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":875.571418762207,"y":981.7143468856812,"wires":[["b101d34ec03a821c"]]},{"id":"b101d34ec03a821c","type":"template","z":"fa990486a351d7f4","name":"jsGenerateLinkPath","field":"jsGenerateLinkPath","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":855.571418762207,"y":1021.7143468856812,"wires":[["75fb6789236f48df"]]},{"id":"d6db970006d87875","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v4","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1269.571418762207,"y":1048.7143468856812,"wires":[["ac22dd3a10ca8a7a"]]},{"id":"66af842428cf1829","type":"template","z":"fa990486a351d7f4","name":"v4","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"","output":"str","x":629.4287910461426,"y":287.2857732772827,"wires":[["714495cf05a320bf"]]},{"id":"859109e5f2acb4e2","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v4.html","links":[],"x":197,"y":287.2857732772827,"wires":[["b3b58ff6a8dede2a"]]},{"id":"b3b58ff6a8dede2a","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":403.71437072753906,"y":287.2857732772827,"wires":[["66af842428cf1829"]]},{"id":"75fb6789236f48df","type":"template","z":"fa990486a351d7f4","name":"jsLabelUtils","field":"jsLabelUtils","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":834.571418762207,"y":1063.7143468856812,"wires":[["ee74e71603896290"]]},{"id":"f68eb4ac92f2416b","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v5.js","method":"get","upload":false,"swaggerDoc":"","x":543.571418762207,"y":1000.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"ee74e71603896290","type":"switch","z":"fa990486a351d7f4","name":"","property":"req.route.path","propertyType":"msg","rules":[{"t":"regex","v":"v4\\.js$","vt":"str","case":false},{"t":"regex","v":"v5\\.js$","vt":"str","case":false},{"t":"regex","v":"v6\\.js$","vt":"str","case":false},{"t":"regex","v":"v7\\.js$","vt":"str","case":false},{"t":"regex","v":"v8\\.js$","vt":"str","case":false},{"t":"regex","v":"v9\\.js$","vt":"str","case":false}],"checkall":"false","repair":false,"outputs":6,"x":1029.571418762207,"y":1127.7143468856812,"wires":[["d6db970006d87875"],["f6adde966139457a"],["4e28f7e5936ef6d7"],["6088b6915f67e507"],["abd4a979676a9088"],["6088b6915f67e507"]]},{"id":"092c9e55a4787172","type":"template","z":"fa990486a351d7f4","name":"v5","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":634.571418762207,"y":349.71434688568115,"wires":[["714495cf05a320bf"]]},{"id":"f360b35c4b1460d8","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v5.html","links":[],"x":202.14262771606445,"y":349.71434688568115,"wires":[["af62934ece609c34"]]},{"id":"af62934ece609c34","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":408.8569984436035,"y":349.71434688568115,"wires":[["092c9e55a4787172"]]},{"id":"f6adde966139457a","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v5","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1270.571418762207,"y":1099.7143468856812,"wires":[["ac22dd3a10ca8a7a"]]},{"id":"7be8ff2bc6dfd549","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers.css","method":"get","upload":false,"swaggerDoc":"","x":543.571418762207,"y":812.7143468856812,"wires":[["16ec47cfaf4f5426"]]},{"id":"ad579a790a31d908","type":"http response","z":"fa990486a351d7f4","name":"css","statusCode":"200","headers":{"content-type":"text/css"},"x":1044.571418762207,"y":812.7143468856812,"wires":[]},{"id":"16ec47cfaf4f5426","type":"template","z":"fa990486a351d7f4","name":"basic styling","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":"","output":"str","x":840.571418762207,"y":812.7143468856812,"wires":[["ad579a790a31d908"]]},{"id":"4f0b969b37876989","type":"link in","z":"fa990486a351d7f4","name":"[blog] codeblock-test","links":[],"x":266.57141876220703,"y":1639.7143468856812,"wires":[["ea637b2ce7e48ce9"]]},{"id":"ea637b2ce7e48ce9","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I replace codeblocks of flows.json with images?","title":"Testing the inclusion and replacement of codeblocks","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":509.28577423095703,"y":1639.7143468856812,"wires":[["097d04d398ea4c66"]]},{"id":"a943b1f59b6f617b","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v6.js","method":"get","upload":false,"swaggerDoc":"","x":544.571418762207,"y":1071.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"4e28f7e5936ef6d7","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v6","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1271.571418762207,"y":1160.7143468856812,"wires":[["c37952730d57c5a4"]]},{"id":"c37952730d57c5a4","type":"template","z":"fa990486a351d7f4","name":"complete js content","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1563.571418762207,"y":1214.7143468856812,"wires":[["d5631179afc237dc"]]},{"id":"d5525ca53c469c75","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v7.js","method":"get","upload":false,"swaggerDoc":"","x":548.571418762207,"y":1134.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"a631368aa97d4e8b","type":"link out","z":"fa990486a351d7f4","name":"link out 83","mode":"return","links":[],"x":2214.571418762207,"y":1682.7143468856812,"wires":[]},{"id":"bc9a57e1232b6afa","type":"switch","z":"fa990486a351d7f4","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1859.428596496582,"y":1689.1429357528687,"wires":[["a631368aa97d4e8b"],[]]},{"id":"a3cbccaeff13d666","type":"template","z":"fa990486a351d7f4","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":1572.571418762207,"y":1689.7143468856812,"wires":[["bc9a57e1232b6afa"]]},{"id":"097d04d398ea4c66","type":"template","z":"fa990486a351d7f4","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":763.571418762207,"y":1692.7143468856812,"wires":[["e18f0e6a54e39f22"]]},{"id":"e18f0e6a54e39f22","type":"template","z":"fa990486a351d7f4","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":918.571418762207,"y":1776.7143468856812,"wires":[["4f84f6937ef60497"]]},{"id":"4f84f6937ef60497","type":"template","z":"fa990486a351d7f4","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1059.571418762207,"y":1849.7143468856812,"wires":[["0a0ba7ec8625eb0b"]]},{"id":"0a0ba7ec8625eb0b","type":"template","z":"fa990486a351d7f4","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1241.571418762207,"y":1925.7143468856812,"wires":[["bd91742d746c4d5b"]]},{"id":"3ae3d00f0bda7482","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v7","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1268.571418762207,"y":1214.7143468856812,"wires":[["c37952730d57c5a4"]]},{"id":"bd91742d746c4d5b","type":"template","z":"fa990486a351d7f4","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1425.571418762207,"y":1994.7143468856812,"wires":[["a3cbccaeff13d666"]]},{"id":"cd12a091665dd5f2","type":"link in","z":"fa990486a351d7f4","name":"[blog] backticks-in-markdown-and-node-red","links":[],"x":180.57141876220703,"y":1725.7143468856812,"wires":[["8da95fc4288b26d9"]]},{"id":"8da95fc4288b26d9","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"1687952972847_Screen_Shot_2023-06-28_at_13.48.43.png","summary":"Codeblocks are one thing but images are further a thousand Json files. Show me your flow!","title":"Replacing Node-RED flow codeblocks with flow images.","publishedAt":"2023-06-28T11:22","updatedAt":"2023-06-28T11:22","incRss":true,"incSitemap":true,"incIndex":true,"shrLinkedIn":true,"supportNodeRedJson":true,"reloadOnEdit":true,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":412.28577423095703,"y":1725.7143468856812,"wires":[["097d04d398ea4c66"]]},{"id":"abd4a979676a9088","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v8","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1269.571418762207,"y":1265.7143468856812,"wires":[["c37952730d57c5a4"]]},{"id":"18f2cbabeac6fdf8","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v8.js","method":"get","upload":false,"swaggerDoc":"","x":547.571418762207,"y":1227.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"f6a192d1d1cd8646","type":"template","z":"fa990486a351d7f4","name":"v8","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":637.571418762207,"y":418.71434688568115,"wires":[["714495cf05a320bf"]]},{"id":"e177926e2c030177","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v8.html","links":[],"x":205.14262771606445,"y":418.71434688568115,"wires":[["f92265840d383980"]]},{"id":"f92265840d383980","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":false,"reloadOnEdit":false,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":411.8569984436035,"y":418.71434688568115,"wires":[["f6a192d1d1cd8646"]]},{"id":"6088b6915f67e507","type":"template","z":"fa990486a351d7f4","name":"jsRenderFlow - v9","field":"jsRenderFlow","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1267.571418762207,"y":1318.7143468856812,"wires":[["c37952730d57c5a4"]]},{"id":"a0ce6ff5b4194687","type":"http in","z":"fa990486a351d7f4","name":"","url":"/embed/helpers-v9.js","method":"get","upload":false,"swaggerDoc":"","x":537.571418762207,"y":1297.7143468856812,"wires":[["e1e9d52f873f0f5b"]]},{"id":"5529c827c2ddd554","type":"template","z":"fa990486a351d7f4","name":"v9","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":630.571418762207,"y":496.71434688568115,"wires":[["714495cf05a320bf"]]},{"id":"a96e7d5a3f2a3b3f","type":"link in","z":"fa990486a351d7f4","name":"[blog] embedded-flow-v9.html","links":[],"x":198.14262771606445,"y":496.71434688568115,"wires":[["c70cc9c6437dc797"]]},{"id":"c70cc9c6437dc797","type":"BlogPageInfo","z":"fa990486a351d7f4","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":false,"reloadOnEdit":true,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":414.8569984436035,"y":496.71434688568115,"wires":[["5529c827c2ddd554"]]}]
[{"id":"ae0d5b956a3f28e6","type":"BlogPageInfo","z":"4c24fa4e7dcf38ec","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":false,"reloadOnEdit":true,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1049,"y":559,"wires":[["2d22995c9f1f1b29"]]},{"id":"cbce591869d45063","type":"link in","z":"4c24fa4e7dcf38ec","name":"[blog] embedded-flow-v10.html","links":[],"x":1146.28564453125,"y":641,"wires":[["ae0d5b956a3f28e6"]]},{"id":"2d22995c9f1f1b29","type":"template","z":"4c24fa4e7dcf38ec","name":"v10","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":1298.71435546875,"y":609,"wires":[["abac4f329e6a820d"]]},{"id":"abac4f329e6a820d","type":"switch","z":"4c24fa4e7dcf38ec","name":"has _linkSource - is this a link-call action","property":"_linkSource","propertyType":"msg","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":553.0003051757812,"y":816.142822265625,"wires":[["09b45bafaa67147a"],[]]},{"id":"503aa7f4da56542d","type":"template","z":"4c24fa4e7dcf38ec","name":"v11","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"","output":"str","x":578.7144203186035,"y":728,"wires":[["abac4f329e6a820d"]]},{"id":"09b45bafaa67147a","type":"link out","z":"4c24fa4e7dcf38ec","name":"link out 82","mode":"return","links":[],"x":1136.14306640625,"y":818.7142333984375,"wires":[]},{"id":"cd925fa7a351451a","type":"markdown","z":"4c24fa4e7dcf38ec","name":"","x":772.7144203186035,"y":594,"wires":[["503aa7f4da56542d"]]},{"id":"8d7a34aac2739180","type":"template","z":"4c24fa4e7dcf38ec","name":".md page","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"","output":"str","x":965.7144203186035,"y":405,"wires":[["cd925fa7a351451a"]]},{"id":"c639b3e6dd4092a2","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample7","field":"flowexample7","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1185.7144203186035,"y":156,"wires":[["8d7a34aac2739180"]]},{"id":"40562872bcf9e779","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample6","field":"flowexample6","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1424.7144203186035,"y":402,"wires":[["c639b3e6dd4092a2"]]},{"id":"23dc5d86e4ae09f7","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample5","field":"flowexample5","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1633.7144203186035,"y":606,"wires":[["40562872bcf9e779"]]},{"id":"309d9661aa3ca436","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample4","field":"flowexample4","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1814.7144203186035,"y":804,"wires":[["23dc5d86e4ae09f7"]]},{"id":"88644f9859d30ff0","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample3","field":"flowexample3","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1346.7144203186035,"y":811,"wires":[["309d9661aa3ca436"]]},{"id":"18c0c665820d9a21","type":"template","z":"4c24fa4e7dcf38ec","name":"flowexample2","field":"flowexample2","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":1115.7144775390625,"y":952,"wires":[["88644f9859d30ff0"]]},{"id":"8cd8ed44f82b06bf","type":"template","z":"4c24fa4e7dcf38ec","name":"flow example 1","field":"flowexample1","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":894.71435546875,"y":819,"wires":[["18c0c665820d9a21"]]},{"id":"2294edbbc0bcfa16","type":"BlogPageInfo","z":"4c24fa4e7dcf38ec","name":"","image":"","summary":"Can I generate html directly without using markdown markup?","title":"This is a test of something new","publishedAt":"2023-06-25T11:22","updatedAt":"2023-06-25T11:22","incRss":false,"incSitemap":false,"incIndex":false,"shrLinkedIn":false,"supportNodeRedJson":false,"reloadOnEdit":true,"redirectToNode":false,"redirectNodeId":"status-404","redirectStatusCode":"301","x":1371,"y":559,"wires":[["8cd8ed44f82b06bf"]]},{"id":"48e808c24ffc7e1d","type":"link in","z":"4c24fa4e7dcf38ec","name":"[blog] embedded-flow-v11.html","links":[],"x":1122.28564453125,"y":484,"wires":[["2294edbbc0bcfa16"]]}]
-with-zoomDon’t use the -with-zoom option instead use the d3 library. In your html document, in the header:
<head>
<script src="https://unpkg.com/d3/dist/d3.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
Somewhere else, at the bottom of the body element:
<body>
<script>
window.addEventListener('load', function () {
setTimeout( function(){
var svgs = d3.selectAll(".svg-container-noderedjson svg");
svgs.each(function() {
var svg = d3.select(this);
svg.html("<g>" + svg.html() + "</g>");
var inner = svg.select("g");
var zoom = d3.zoom().on("zoom", function(event) {
inner.attr("transform", event.transform);
});
svg.call(zoom);
});
}, 500);
});
</script>
</body>
Taken from here and from there to this issue.