Sorry, haven't used markdown that way before. What else do I need to include to make it work?
Hm, nothing - just the js & css includes and at the bottom of the page the script snippet ...
If you're not using markdown, then you need a code block with class language-noderedjson.
it basically goes looking for $('code.language-noderedjson'); and replaces those elems.
What I do is generate markdown in Node-RED, then use the markdown node to get html and then I push that html into a html template.
So I have a specific setup whereby I generate markdown that goes into a html template and I control the entire pipeline ...
UPDATE: Mea Culpa!
the jquery src is wrong, it should be https://blog.openmindmap.org/content/jquer...... it's a relative url in your screenshot - I've updated the page with the details to have the correct url
This is a pure html usage - Flow Embeddation it basically does this:
<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">
<body>
<div id='svgcontainer'
style="transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 50px; left: 10px; position: absolute; overflow: scroll; display: block;">
<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">
<!-- Use group elems to ensure that layering of shapes is correct, i.e. nodes always over links -->
<g class='flowGridlines'></g>
<g class='flowGroups'></g>
<g class='flowWires'></g>
<g class='flowNodes'></g>
</svg>
</div>
</body>
and then js code:
var flowId = "3b1289d7ccf9cb0f";
$(function(){
$.ajax({
dataType: "json",
url: "https://demo.openmindmap.org/omm/flows",
method: 'get',
success: function(flowdata) {
renderFlow(flowId, flowdata, $($('#svgelem')[0]));
}
});
});
</script>
flowdata is just the json that you get out of Node-RED export.
Thanks!
Here's a hello world for those who want to try:
<html>
<head>
<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://blog.openmindmap.org/embed/flowviewer.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://blog.openmindmap.org/embed/flowviewer.css">
</head>
<body>
<div id='svgcontainer'
style="transform: scale(0.5,0.5) translate(-2500px,-2500px) ; top: 50px; left: 10px; position: absolute; overflow: scroll; display: block;">
<svg id="svgelem" width="5000" height="5000" viewBox="0 0 2000 2000" pointer-events="all" style="cursor: crosshair;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- Use group elems to ensure that layering of shapes is correct, i.e. nodes always over links -->
<g class='flowGridlines'></g>
<g class='flowGroups'></g>
<g class='flowWires'></g>
<g class='flowNodes'></g>
</svg>
</div>
<script>
let flowdata = [{"id":"185c2139f08e26a0","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"be54112eddcd9446","type":"inject","z":"185c2139f08e26a0","name":"hello","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"hello","payloadType":"str","x":90,"y":80,"wires":[["30ae335f5be8183b"]]},{"id":"30ae335f5be8183b","type":"debug","z":"185c2139f08e26a0","name":"world","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":270,"y":80,"wires":[]}];
let flowId = flowdata[0].id;
renderFlow(flowId, flowdata, $($('#svgelem')[0]));
</script>
</body>
</html>
1 Like
thanks for taking google for the jquery stuff 
better to use https://blog.openmindmap.org/embed/flowviewer.js and https://blog.openmindmap.org/embed/flowviewer.css there, the helpers thing is liable to disappear....
I've updated the example page with new languages, so now the noderedjson does as near as possible the default editor view, ie., rectangles + gridlines. noderedjson-with-arrows does input triangles but rectangles for outputs, noderedjson-no-gridlines removes the gridlines and noderedjson-no-gridlines-with-arrows needs not explanation.
But on that page I use noderedjson-with-arrows - after all, I like triangles!
1 Like
Thanks, I changed the example. Maybe you'll publish a hello world here or on your page? Then I can delete the sloppy one up there 
How can I get the default Node-RED view btw?
if you're using the -v7. js and css files then you can't, need to be using the flowviewer.js and css. Then its the default noderedjson language that is as close as possible to the editor.
Done - https://blog.openmindmap.org/embed/example.html that's the hello world page in action, source code is over here.
1 Like
Another update with better handling of rendering options: order is no longer a requirement, i.e. noderedjson-with-arrows-no-gridlines is the same as noderedjson-no-gridlines-with-arrows.
There is new option with-zoom which makes the image zoomable and pannable. Your mileage might vary on mobile but a double-click resets the image back to the original settings. Options are mix and matchable.
Btw, this forum would be a candidate for the viewer too 
3 Likes
That thought never, ever, not-even-once, really-never crossed my mind 
Btw2: Here is another thought I might (or might not) have had: a diff viewer - obviously a very contrived example. Use the slider to blend between two versions of the same flow. Obviously this won't help with function nodes or anything that had content changes but visual changes can easily be identified.
3 Likes
Cool! Would be interesting to work on some definitions regarding "flow differences" and then use your flow viewer to highlight those differences.
So you have or you have not thought about it?? 
That thought had not really crossed my mind yet, but I'll give it some thought 
Full disclosure: it was exactly what I was thinking when I started! Where else does one find long lines of json flow data ...
Another day, another update. In explaining (or trying to) what link nodes do, I've added images to the viewer - only some of the core nodes. Why? The difference between a link-out node that passes data to a link-in node and a link-out node in return mode isn't apparent without the icon change. (btw its interesting to note that a link-call node reverses the usage of the link-in and link-out nodes!)
I also added path highlighting - makes it easier to explain how data flows through the flows. See the bottom of the explanation for the weird affect when link-call node is made with a node that has multiple output connections.
I hope I don't think of anything else to add to the viewer ...
2 Likes
Update on this, the code is now over at github but it continues to be maintained as a Node-RED flow over here.
I like playing around with the flow viewer in Node-RED but I can understand that github is perhaps a better code hoster, so now it's best of both worlds (ok, no there isn't an github to node-red update process - will be built with the first pull request).
Having found the magic sauce on making github do commits via API calls, I actually did what I wanted to do all the time! All the stuff for the flow is checked in and it's quite nice since github really works well with diffs on files.
Not sure if you realised that an entry in the flow library is actually a GIST on your GitHub account anyway. So you can actually maintain it there. No real need to keep another copy (unless you want to)
Gist aren't real fun when multiple files are involved. Also revisions aren't really first-class citizens in the gist world. The entire source basis for the .js is stored @ github, hence it can't really be just a gist.
Ok for those still reading this I've finally gotten to where I actually wanted to be with this plugin - strangely!
Warning: This is all very beta an liable to change and breakage!!!
It all starts with the idea that git diff is completely useless for a flows.json file. Is there a visual way to compare flows? No because the editor can't do it and there is no standalone plugin to visualise flows. But part one is done with this plugin, part two is finding a replacement for git diff.
But first: how to access github? I did that the other day and now have an automatic (thanks to the brilliant cron-plus node) backup flow that pushes a backup of all my flows to github every 2 hours. (Learning: with the github REST API you can produce empty commits, you need to compare SHAs before committing.)
So now I only needed to access those commits and visualise them. That now happens with this flow and the frontend is at https://backup.openmindmap.org/
Don't be alarmed if it doesn't work, it's a small heroku server and will die with traffic. If it does work, don't be alarmed about the styling: there is none!
Select something like the first 6 or 7 commits and hit the compare button. The default flow tab shown is the one that created the backup.openmindmap.org server - most changes I made there in recent days so most interesting flow to compare.
The services allows the selection of the commits (only the last 15 are shown - randomly chosen limit) and after that, a flow tab can be selected that is compared across those commits (using the slider at the top).
Yes: this does not do any textual comparisons, if the contents of a node changed, then that is not visually apparent - this purely visual changes, i.e. node additions, movements, deletions and label changes ...
Where to from here? First that last issue - content changes made visual ...
I know but I find that if I'm programming visually then I want to compare visually - why does there need to be a paradigm shift from visual to tabular when doing comparisons? I don't have a better solution but I would like to find a better approach.
Also I find that comparison too confusing since x & y changes of nodes are also highlighted - do I really want to know whether the x & y values have changed, does that have a semantic meaning or is that some syntactic (or better said: visual) information? So the changes being shown aren't all relevant or rather have no meaning in my head - what does it mean that x & y differ? And that is extra information that I have to keep track of in my head ...
Hence I decided to experiment with a different approach.
Edit: Strictly speaking, yes it is visual but so are the diffs at github - anything on a screen is visual. I guess I mean visual in my mind and not colourful dots on my screen visual! So a visual table is a table in my mind, a visual flow is a flow in my mind.
Edit2: Where's the editor code for doing that diff? I assume it runs completely in the frontend and I would like to do something similar also in the browser.
