Integrations overview

[ES-Alexander]

This PR:

• add mermaid integration
  • support light/dark transitions
• create overview flowchart

Future PR(s):

• add description of overview flowchart
• create vehicle components diagram
• enable user to change zoom level (with slider / +/- buttons)
• Action to automatically update mermaid file from CDN?

[patrickelectric]

Doesn't it make more sense to put it under header.html or base.html ?
With that the script will be included only once when the shortcode is used and not every time.

[ES-Alexander]

I considered that, but then it's also included on every page without a diagram, right? I'm assuming that most pages won't have diagrams, and that pages that do have diagrams will generally only have one (or at least a small number).

[patrickelectric]

The size appears a bit weird here and dark/light theme are working.

If the problems are the line, you can put:

<style>
.flowchart-link {
    stroke: #999999 !important;
}
</style>

on mermaid.html

[ES-Alexander]

The size appears a bit weird here

Not sure what the best approach is for the size - it's constrained to the width between where normal pages have a sidebar (on the left) and a table of contents (on the right). At the moment it's possible to zoom the page to see more clearly, but it would be nice if there's a way to zoom just the diagram.

dark/light theme are working

I was hoping to have the diagram generated with mermaid's dark theme when the page is in dark mode. At the moment the docs has light/dark mode which works fine, but the diagram is always just mermaid's default "neutral" theme, which is a bit unpleasant with the dark mode of the docs (even with the lines changed to work with both themes). The lines are the biggest issue though, and I could also change the other default colours to better work with both docs themes if it's not simple to use mermaid's theme options, I'd just prefer not to need to, especially since mermaid already has themes.

Thoughts?

[ES-Alexander]

I reworked it and managed to get the themes working, and made it zoomed in and scrollable so you don't need to zoom your browser page to be able to read the text 😄

I ended up removing the CDN call though, because Chrome didn't want to do dynamic imports from in a module script (which worked fine in Orion and Firefox), and I'd rather have "always works locally, but we have to manage updating the mermaid dependancy" behaviour than "only works online".

I did an update to the latest mermaid engine, which provides some nice new features. Unfortunately GitHub's mermaid rendering doesn't support them yet, which makes reviewing a bit less convenient.

latest state:

Screen.Recording.2022-11-12.at.11.56.00.am.mov

[ES-Alexander]

Realised I hadn't rebased over the last couple of submodule updates in main, so I did that.

[patrickelectric]

This should be in the commit body since the code can be replaced and new versions could be used.