Introduction

One of my favourite "diagram as code" tools has to be the excellent BPMN Sketch Miner online tool.  Using this site, you can quickly and easily draft out a process diagram either ready for discussion or in collaboration with others.

The fact that it draws what you type as you go means that you are getting the visualisation and rapid feedback to check that what you are capturing makes sense.  However, when documenting a complex process, you can quickly end up with an extensive and detailed model that can be difficult to read.

This is where BPMN sub-processes would typically be used.  Unfortunately, Sketch Miner does not currently support sub-processes directly from the tool.  To deal with this, we will sometimes add '(+)' to the notation to show that this process has a sub-process (somewhere), but that does not allow you to drill down; it just marks the process.

For some audiences, this might be sufficient, but for others, this can be more than a little annoying.

Workaround

I wanted to find a way to do something about it.  It is not a perfect solution, as it requires manual intervention and a minor change to the process, but it does at least allow a way of doing it that only adds a small amount of time to the production of the diagrams.

It also takes advantage of the fact that Sketch Miner does not 'lock' the output it generates.  The tool can provide three formats:

• SVG
• BPMN
• PNG

Please note this workaround currently only works for SVG output.  The advantage comes with the fact that SVG is 'open'; you can change it with a text editor, and the diagram will then feature the modification!

Code Snippet

How to use it

Find the text that represents a process that has a sub-process.
Find the close 'g' tag under that text block.
Paste the snippet in at that point and update where you want the URL to point to.

(A simple video of the whole process is coming soon)

Issues

The numbers in the above snippet will work for many processes. However, because Sketch Miner creates dynamic boxes around the text depending on the length, the '+' might not be in the optimal place.

You will then need to edit the snippet to move the box accordingly.  I would recommend that you leave the height and width as they are; they seem a good size for most diagrams.

To move the box to the right, increase the x, x1 & x2 values.  Remember to increase them all by the same amount.  To move the box down, increase the y, y1 & y2 values.  Again, it is essential to remember to increase them all by the same amount.

Alternative Solution

After a bit more work with this solution, it turns out that there is an alternative and possibly better solution.  Instead of just using '(+)' at the end of the line, use '\n(+)'.

The "backslash n" will force the (+) onto a new line at the bottom of the box and put it in the centre.  This also means that the box will increase in size to encapsulate it fully.  It will also add a "tspan" around that text in the SVG.

Open the file in an editor and look for '(+)' (without the "slash n").  You will then find the places with the marker.

Replace the tspan line with the following line:

This will then put the anchor around the (+) so that when you click on it, it will take you to the correct location.  You can also replace it with this code, which will use the Unicode "plus in a box" ⊞ which then looks closer to the proper BPMN notation to show a sub-process.

Which solution do you prefer? Do you use Sketch Miner? Did you find this helpful?  Please let us know what you think in the comments below.