Does mxGraph support a sub-process container?

[besley]

In my case, the sub process is needed to embeded in a main process, and it seemed that we can put these sub process activities elements into a group box, this box can be connected to the nodes from main process. the picture is similary here: sub process box container exmaple

By the way, is message flow supported when crossing two different swimlanes? the style of message flow usually is dashed line in toolbox.

Thanks your reply, we really like mxGraph library.

[tbouffard]

@besley can you provide more context please? It looks like you are working on a BPMN solution as most of the wording you are using are related to this business domain, so most mxGraph users won't know what you are talking about. So please, keep that in mind for a future question.

Here are some hints

• for a subprocess, you can create a mxRectangle vertex and make it be the parent of elements (vertexes and edges) that defined the subprocess content
• for message flow, this is an edge so you can assign it a dedicated style when creating it to have a dashed line. On insertion, you make the graph default parent as its parent to ensure it is displayed. You may have to experiment on this area if you want to manage lane collapsing and keep consistent display of the message flow

I am also currently working on a BPMN rendering solution based on mxGraph. I will be interesting in talking with you about use cases, implementation choices, targeted application

[besley]

@tbouffard , thanks your reply. This is very helpful to me. I have looked into the mxGraph examples in the project. By the way, I find swimlane control is also a choice to separate different processes. I am glad to talk about it with you.

[tbouffard]

@besley great to know you found a solution Good catch about the swimlane: it can be a way to do it, especially as it already provides expand/collapse capabilities out of the box

[besley]

@tbouffard , I have a question, the customer suggested we use bpmn.io rather than mxGraph, How can I respond to their requirement? what's the benefit of these two projects each other?

[tbouffard]

@besley I guess you are talking about bpmn-js, mainly developed by Camunda. That kind of lib provides you the BPMN rules for both semantic and display, it is able to load and write BPMN files. In short, it is aware of the BPMN specification.

mxGraph is a general diagram library that can be used to display and edit BPMN diagram but it doesn't know anything about BPMN. If you want to use it in the BPMN context, see it as an element of your solution: the diagram view and/or edit part. For the rest, you have to implement everything from your own. And be ready: this is a big amount of work. bpmn-js uses the same mechanism: diagram-js for the view/edit part and other elements for the BPMN awareness. See https://bpmn.io/toolkit/bpmn-js/walkthrough/#bpmn-js-internals for more details

If you need a BPMN modeler/editor, bpmn-js is the way to go except if you want to develop a competitor lib. For BPMN viewing/visualization, you can also have a look at bpmn-visualization, a Typescript lib using mxGraph (for the display part) that I am working on and sponsored by Bonitasoft. Notice that this lib is in early development and is not BPMN features complete.

Be aware of the bpmn.io license which forces you to display the bpmn.io project watermark (previously the bpmn.io/camunda logo) on the bottom right position of the diagrams (the license forbids you to remove it)