ComponentViewer: Added Overview diagrams

[thorstendb-ARM]

Fixes

Created overview diagrams (with drawio)

Screenshots

Checklist

• 🤖 This change is covered by unit tests (if applicable).
• 🤹 Manual testing has been performed (if necessary).
• 🛡️ Security impacts have been considered (if relevant).
• 📖 Documentation updates are complete (if required).
• 🧠 Third-party dependencies and TPIP updated (if required).

[qltysh]

Coverage Impact

This PR will not change total coverage.

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.

[jreineckearm]

@thorstendb-ARM , thanks for that! What viewer/editor do you recommend? Is there any particular VS Code extension to install?

[thorstendb-ARM]

@thorstendb-ARM , thanks for that! What viewer/editor do you recommend? Is there any particular VS Code extension to install?

This is made with DrawIO: https://www.drawio.com/
There is a vscode extension which pulls the whole program into a vscode editor tab: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
And a previev extension: https://marketplace.visualstudio.com/items?itemName=purocean.drawio-preview

[jreineckearm]

Thanks for clarifying. Looks like this is free of charge and can be used by contributors to modify/display the diagrams. Can you please confirm? If so, I am fine with using it.

I also found this article: https://www.drawio.com/blog/edit-diagrams-with-github-dev
on the draw.io webpage suggesting to use this unofficial extension for editing:
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Can you please try that route and if it works without any extra installs? And add a README to the folder explaining how to read/edit the diagrams?

I believe there are alternative formats that better integrate with GitHub: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams
But I don't know from the top of my head if there is a WYSIWYG editor. So, only consider if one of the above isn't true and if there is an easy way to convert from drawio to mermaid.

[jreineckearm]

Thanks, this is a good start! Need to make sure to keep it up to date with future changes.

Feedback before merge:

• Add a README how to read the diagrams, i.e. what's the entry point (architecture.drawio and/or all-subsystems.drawio ?) and how the diagrams relate hierarchically.

Feedback for next improvements:

• architecture.drawio: Could consider in future to move data flows/call graphs out. But good as a first incarnation.
• In general, better formatting/alignment of blocks (visually).
• Would be useful to have a diagram explaining that we have dedicated objects per component+session/core combination.
• I see a lot of detail is available on both the overview and the focused diagrams. Maybe we can keep some of the detail out of the overview diagrams and point to the focused ones for more detail?

Update: Please also add the docs/component-viewer folder to .vscodeignore. We don't need to ship with the built VSIX file.

[jreineckearm]

Thanks, LGTM!