jgraph / drawio

draw.io is a JavaScript, client-side editor for general diagramming.
https://www.drawio.com
Other
40.77k stars 7.58k forks source link

Integrate with Enterprise Architect #1663

Closed mararad closed 1 year ago

mararad commented 3 years ago

What is the level of integration / compatibility between Draw.io and Enterprise Architect? https://sparxsystems.com/

Even being able to import .xmi files from EA would be helpful

parasuram-tanguturu commented 2 years ago

hi @davidjgraph / @mararad

davidjgraph commented 2 years ago
Grodaz0 commented 1 year ago

Hi @davidjgraph , Hi @mararad

I really appreciate if you reevaluate this, I want to migrate all of my enterpriose diagrams from EA to Draw.io Confluence

EdgarWesterhoven commented 1 year ago

Interoperability is key, so please re-open the feature request. I think it is damaging that, an otherwise far supperior tool (because I can document for each item who asked for it, add narration), looses from draw.io for creating diagrams.

davidjgraph commented 1 year ago

OK, we'll re-open and still not implement this.

davidjgraph commented 1 year ago

Feature declined, thanks for your interest.

ChuanPablo commented 8 months ago

Hi @davidjgraph

First off let me say i love Drawio. Exactly what i was looking for. I would also be interested in a feature to import Enterprise Architect diagrams in Drawio.

davidjgraph commented 8 months ago

Interest in issues is judged by the number of thumbs up on the original post, this is standard for github issues. So far there are no votes on this issue.

Marius-U commented 7 months ago

I know it still does'nt change much but I want to give a thumbs up. From the perspectiv of AUTOSAR, they are offering most of the UML model designs as EA projects that I would very much enjoy working with in Draw.io.

jmcklondonuk commented 6 months ago

I want that feature too. How about we adapt this JavaScript XMI importer/exporter for Draw.io? https://github.com/staruml/staruml-xmi

davidjgraph commented 6 months ago

@jmcklondonuk Could you create the implementation and let us know when it's finished?

jmcklondonuk commented 6 months ago

@davidjgraph Let's consider the scope and feasibility of this task. I will need to decompose it into subproblems to limit the scope for a PoC.

The task requires an algorithm to:

  1. parse OMG XMI specified at https://www.omg.org/spec/XMI/2.5.1/PDF
  2. transform it into the mxgraph XML format
  3. save the XML

For example, a PoC can be one scenario. The scenario will parse a data flow diagram exported from EA as XMI and transform it into the mxgraph XML. From https://sparxsystems.com/enterprise_architect_user_guide/15.2/model_domains/data_flow_diagrams.html we want https://www.drawio.com/blog/data-flow-diagrams

Can you provide any documentation of the mxgraph XML format?

alderg commented 6 months ago

The XML format is a generic mapping from JavaScript objects to XML. The specification is here. Your best option is to create the diagram and study the output.

jmcklondonuk commented 6 months ago

@alderg Thanks. Here is a simple data flow diagram for a PoC: INPUT: https://pastebin.com/raw/udPsrsFC EA screenshot: https://i.imgur.com/rOkUHyL.png OUTPUT: https://pastebin.com/raw/wN4u0fpk Draw.io screenshot: https://i.imgur.com/iNRoQm3.png

Anyone reading this, feel free to try to code that PoC as well. Once we get it working, we can do the same for any type of diagram.

jmcklondonuk commented 6 months ago

https://github.com/jmcklondonuk/drawio_enterprise_architect_integration/

davidjgraph commented 6 months ago

Thanks for doing that. Being a stand-alone project probably works well, it's a one-off task.

There are a lot of posters to this thread. Maybe those posters could contribute test cases to the project to see what the coverage is.

jmcklondonuk commented 6 months ago

@davidjgraph you're most welcome. Draw.io supports natively opening and saving MS Visio .vsdx https://drawio-app.com/blog/import-and-export-vsdx-files/ I can add support for natively opening and saving EA .xmi.

I am stuck only on the stupid geometry because I do not have any documentation for what the different variables mean. Otherwise, I would have already implemented the additional diagrams. It's a very simple task.

To explain what different variables in the geometry mean, the last resort will be the scientific method: The scientific method is iterative:

  1. observe a phenomenon and start with a question about something regarding the phenomenon
  2. research the topic area
  3. formulate a hypothesis that is a possible explanation
  4. test the hypothesis with an experiment
  5. analyze data from that experiment
  6. report conclusions

Applied to EA and draw.io, it can be:

  1. save a diagram in the UML tool, use abstraction to reduce the XML to only the geometric properties via XQuery or otherwise, display the values to make the phenomenon observable. Then, make changes many times and always observe how the phenomenon reacts.
  2. research the topic area - this will be skipped because I have not found any documentation of that geometry
  3. suggest a hypothesis that is a possible explanation - from observation in step 1, guess the meaning of some variable and make a prediction of what the value will be when moving a concrete UML element in a specific way
  4. test the hypothesis with an experiment - test the prediction by moving that UML element. Save the diagram to generate data about its new geometry.
  5. analyze data from that experiment - observe if the possible explanation predicted correctly what will happen with the studied geometry variable(s)
  6. report conclusions - note down or comment with the result

To denote a line, I would expect x1, y1, x2, y2.

davidjgraph commented 6 months ago

This sounds rather chatgpt generated...

jmcklondonuk commented 6 months ago

Does it? False alert. I manually denoted the scientific method steps based on the visualization at https://en.wikipedia.org/wiki/Scientific_method The representation of those steps and the demonstration of how I will apply the scientific method to solve the geometry problem are both my own writing. The only similarity with ChatGPT is probably that I wrote two numbered lists. Well, I could have used EA or draw.io and BPMN, but that would take time.

jmcklondonuk commented 6 months ago

@davidjgraph I want you to answer one question for me that could save me a lot of time. Do you know the meaning of entryX, entryY, entryDx, entryDy, exitX, exitY, exitDx, exitDy in draw.io?

alderg commented 6 months ago

See https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxConstants-js.html#mxConstants.STYLE_EXIT_X

davidjgraph commented 6 months ago

entryX is the proportion along source vertex of an edge that the port (the object defining where an edge connects) connects. 0 means the left-hand edge of the vertex, 1 the right-hand edge. entryY is the same idea for the source, just vertically. 0 is the top of the vertex, 1 is the bottom.

exitX and exitY are these again, just for the target vertex of that edge.

The Dx and Dy are absolute offsets, I don't think you'll need those.

jmcklondonuk commented 6 months ago

I fixed the geometry and added support for additional diagrams. Now, the importer supports:

I'd like to integrate it in draw.io to work similarly to Visio .vsdx. Shall I do it and create a pull request?

davidjgraph commented 6 months ago

Thanks, there is a lot of work between a PoC and full functionality. For a 10 hours PoC, there will be at least 500 hours of development and maintenance over the next 10 years.

This requires a member of the core team to adopt the feature. For me, I can't take on that kind of workload in addition to what I already have. I will keep an eye on the project to see how it develops.

jmcklondonuk commented 6 months ago

Based on your work situation, I adapted the program into an external Draw.io plug-in. https://github.com/jmcklondonuk/drawio_enterprise_architect_integration/blob/main/draw_io_ea_plugin.js

I will consider eliciting modifiability Quality Attribute Scenarios and applying one or more modifiability architectural tactics "to lower the cost and risk of making changes" (Bass et al., 2022, p117). The plug-in module can be split into an EA XML parser and an interpreter of the parsed UML diagram to increase the cohesion of each submodule. A test suite would be good indeed, as you previously suggested.

Let's see if someone starts using this add-on and implementing more functionality.

jmcklondonuk commented 6 months ago

@mararad @parasuram-tanguturu @Grodaz0 @EdgarWesterhoven @Marius-U @ChuanPablo would you like to test my new EA integration plug-in? https://github.com/jmcklondonuk/drawio_enterprise_architect_integration/

Marius-U commented 6 months ago

Hey @jmcklondonuk. I have tried with several EA XMI 1.1 and 2.1 exports of a Component Diagram but in the end it failed with:

davidjgraph commented 6 months ago

Maybe worth filing individual issues either as new issues here or in the plugin repo. This thread is pretty long already.

Also, the input files need to be included.

jmcklondonuk commented 6 months ago

@Marius-U please create an issue at https://github.com/jmcklondonuk/drawio_enterprise_architect_integration/issues and upload also your input file. XMI 1.1 is correct.

Marius-U commented 6 months ago

@jmcklondonuk done. I have created Issue #2 "Failed to import Component Diagram from EA XMI 1.1 export" and attached the EA XMI 1.1 input file to it. Thank you for working on this!