Implement Editor for FMC Block-Diagram

[odungern]

As a Business Analyst or System Designer I would like to create or update a FMC Block-Diagram and store it immediately in a semantic net using the SpecIF.
Idea: Use diagram-js, an online diagramming library upon which bpmn-io (Demo) is built.

[koppor]

(Just a brainstorming to put into an ADR)

I checked my "favorite" tool - Eclipse Sprotty. Unfortunately, they still seem to render data only - without the ability to modify data.

Maybe, I should get to may days with jsplumb. I like it, because the styling is plain HTML, "only" the connections are done using SVG.

Someone told me that d3js could also be suitable for creating a modeler. See https://codepen.io/johnreynolds/pen/QjWKYj for a very basic example. (awesome-list)

Quick check on mxGraph (which is now Apache licensed): Doesn't support nesting. http://jgraph.github.io/mxgraph/

I checked AlloyUI's Diagram Builder - http://alloyui.com/examples/diagram-builder/ - doesn't seem to support nesting, too.

Regarding BPMN, I made a survery 7.5 years ago: https://stackoverflow.com/a/15117083/873282

Oh, and we even did minimal prototypes for some languages:

https://winery.github.io/javascript-graph-library-comparison/app/paperjs/src/index.html. One can check the source at https://github.com/winery/javascript-graph-library-comparison for a "feeling" regarding the libraries. The code is not quality assured though.

We even added some performance checking possibilities. For instance, hundreds of nodes could be generated to evaluate the performance: https://winery.github.io/javascript-graph-library-comparison/app/jointjs/src/performance.html

I remember that JointJS came out quite well. It even can do nested elemeents: https://resources.jointjs.com/tutorial/hierarchy

[odungern]

Thanks for the input; comparing eligible libraries is always good!

Here, we are talking about model-editing, which is more than placing graphical shapes on a canvas. We need to offer a palette with all allowed shapes of a notation (simple with the FMC Block Diagram since there are just two element types Actor and State), but also to check some Syntax rules: The FMC Block Diagram is a bipartite graph, allowing connections only between different shapes.

We suppose that the Camunda diagram.js library has some of these features in contrast to a mere graphical editor .. but there hasn't been a thorough analysis, yet.

@koppor: Can you imagine to contribute an editor for the FMC Block Diagram? Shouldn't be an enormous effort. We will find someone for the mapping to SpecIF.

[koppor]

Needs more thought. In Eclipse Winery, I could only manage it with the Signavio Core Components (which we did not use because auf GPL relicensing). We implemented it manually using jsPlumb back then...

[odungern]

The open-source Camunda software is MIT. The SpecIF Editor is Apache 2.0. Nothing else needed, to what we can see. We are looking for a library fmc.io similar to bpmn.io; this can be used independently by all those who just want a FMC online-editor. We would integrate it into the SpecIF Editor to get the semantic net.

[odungern]

Eclipse Winery is Java, I suppose ... in our case it is pure ts/js to run in the browser.

[koppor]

@odungern The graphical modeler is written using Angular: https://github.com/eclipse/winery/tree/master/org.eclipse.winery.frontends