export to draw.io/Lucidchart

[hugocool]

Description

During planning we like to diagram what we are building and how these elements are connected, for this purpose we use draw.io (inside of vscode as a plugin and commit these to git to keep the diagrams matching what is in development.
kedro viz provides a great overview of the ML pipeline, and it would be nice to import it into the diagram.

Context

If we could import the kedro viz diagram we dont have to manually input the diagram into our diagramming application anymore, which quickly becomes very tedious once the pipeline grows.
Also this allows teams to easily incorporate entire (ML) diagrams in their docs through plugins.

Possible Implementation

Drawio has several import formats:

• .drawio
• .xml files saved from draw.io
• Gliffy diagram files
• .vsdx and .vsd diagram files
• Lucidchart diagram files
• PNG image files (with or without the embedded XML of a .drawio diagram)
• SVG images
• JPEG images

Plus using the text-based import tools (Arrange > Insert > …) you can create diagrams using:

• SQL code
• CSV data (you’ll need to describe how to translate that into a diagram)
• Text
• PlantUML code
• Freehand drawing

Personally, I'd think the text-based import, and specifically PlantUML/Mermaid is the most versatile across different diagramming apps (Miro, Figma, Whimsical, etc), but probably the least complete (since you probably also want to import the tags).

Possible Alternatives

SVG, however, makes editing/annotation very difficult.

[astrojuanlu]

Possibly related: #943, #638

[hugocool]

yeah, i think rendering the DAG to a datastructure combined with a Drawio exporter would solve the issue. Probably the simplest would be the PlantUML/Mermaid syntax. And just copypaste the generated UML code and paste into drawio .

The option to export the viz through the CLI would be really nice as well, but not yet necessary for the purpose of importing to any diagramming app.

[ravi-kumar-pilla]

Hi @hugocool ,

Thank you for the description and the ideas here. I really like your idea of combining DAG datastructure with a Drawio exporter. However, I am not completely sure on what you mean by Drawio exporter, could you please provide more information.

I did some research on mermaid flowcharts and to start of with a POC, I am thinking along the lines of -

For mermaid flowchart, having some sort of Export to Mermaid (similar to PNG and SVG export which we already have)

1. Reading the DAG API JSON response
2. Setting rules for creating Nodes, node shapes (we will explore styles later)
3. Creating edges using mermaid links
4. Writing the text to a mermaid file which will be downloaded when the user clicks on Export to Mermaid

Since there is a design aspect and how we want to set the rules for different node types (modular, dataset etc) there needs to be further discussion within the team and I appreciate your patience. Please let me know if this aligns with your expectations.

Thank you