Create an SVG for your workflow

okay so what we built um is the node tracer and so what the node tracer does is it takes workflow json and turns it into an svg image now as simon cynic would ask why do we want to do this the why behind this and the idea is if we can create a service because this is just the front end form that consumes this background service that beyond builds but if we can understand workflow and draw it out we start having a lot of control over how we draw it out so one of the things we were sort of considering is there could be lots of options in future one of the things that we showed here is that we could uh show a workflow from left to right we could render it from top to bottom so now this one flag here again needs to be lots of different options if we want to show workflows on the docs on mobile maybe we could show them top to bottom we know you're on mobile etc and so beyond that the idea is that um perhaps our licensing partners just like us can have screenshots of workflows in their docs and whatnot their nodes might look different so the way it's built in the vacuum right now is a stylesheet so in future that can be something that's also passed in and reskinning them uh high contrast with people with uh can't see as well and all these different things so the idea is if we can uh draw out the node and redraw it we have a lot of flexibility featuring how we do that so what we'll do to demonstrate this take for example this workflow here if we copy the workflow and we paste it into the node tracer and then let's say at first the flow direction we'd like to do is left around create svg we see that we've generated the workflow here um so right now we're removing the start node um and simplifying it so what happens here is we don't um remember the spacing and whatnot we're also simplifying it so the workforce is sort of as tight as possible so one thing that we weren't able to add is um labels etc but the idea is in the future that these would all sort of be options um one thing that harshly even sort of commented on this that you would love to see is the ability to show the first note in the last note because sometimes what happens in between isn't as important as like extracting in the uh loading so that could also be a flag for example that again you could use an internet workflow to consume this or this form etc um so to give you a few other examples of this take this workflow here which processes some things from hotspot copy that paste that in and run that you see that it's rendered that workflow now what we can do is as well so we've been showing left to right now again what if you're on mobile you want to show someone something else and go from top to bottom we do that and see that we've now rendered the workflow from top to bottom and we do have a few other modes we were thinking perhaps uh in certain cultures and whatnot um right to left it might be more helpful and so i focused more so on the styling of things and building this form this initially was all getting served by any workforce we had some technical issues right at the end so we swapped to hosting this on heroku i we did the actual rendering of all these fancy species so this thing we had json we turn it into a markdown format which is basically a summary of what the diamond is supposed to look like um so that's sort of what the packet does we get that diagram back in markdown and we basically render it using this library called memory. js which allows you to do all kinds of like basis stuff like this like for example you were showing this one here but you can i don't know like click on one and then you get to the top spot is highlighted um so that's sort of like the basic idea how like syntax for this and you have if you have diagrams in text form you can version control over meaning sort of like we're stuck with that um i don't know how much we should go oh so i guess another thing that we've done here we have a database you can see this is that's a permalink so what you can do is you can share that link between browsers so what we'd love to explore in future is you know can this uh embed in motion as an iframe as an embedded doc we get

from the community all the time from some organizations where they're thinking about rolling out work poses and we document templates in their confluences and their notions people can copy and tweak the tweets that they want to make this could be sort of a path forward for them to be able to do that um perhaps even in future and then could use a service when you paste in a workflow or something and then some apps right it calls this service and then services back so again this is the mvp um but there's a road map coming for this that will be we'll be chipping away