I need to create a flowchart that is cross-functional(has a grid on top and to the left of categories) that has shapes, arrows pointing to each shape. Each shape needs to be able to hyperlink to a document or website page.

Additionally, I need each shape to have a dynamic highlighting feature. (When hovering over the shape, a text box or block will appear with a description of where it goes with possible other links for similar information inside the description) needs to stay hidden if not hovered over though.

I would prefer to have this be able to embed or code snippet into a SharePoint site, but it would also be fine to have it as a separate web app that we can link from the site to the chart, but that would probably require security maybe a login page.

Also, it would be nice to have it parse information from an excel document or something to create/automate further shapes/nodes. I have done research on it with html and CSS so far. It looks like most of the flowchart examples are all either table-like or a single functionality where it only goes one way with the categories on top organizing it. They also do not look as modern as I would like. This is extra but I would also like a project tracking feature to see how far a user has progress through the flowchart. This would be nice to have to help with progress tracking and saving where the user was in the chart before which would be helpful when the flowchart is huge.

Another extra feature I would like to add later on is a search function.

Essentially, I just want help on recommendations on what frameworks and languages would be the most efficient. or maybe tips on html css that I might have missed to have the functionality I am looking for.

Also, any tips or resources that will assist with this project. If you have the time to even go over the details that would be even better! You would be a lifesaver!

Thank you so much for your help!

Here is an example of what I would kind of want it to look like. enter image description here