Feature: Jump to object/section

[ElianCordoba]

Basically having the possibility to click on an element and jump to another section (or element) of the whiteboard, like with Markdown.

My use case comes from making a summary that is quite big already, with different concepts explained in different parts of the board. I added a topic list on the top and I thought it would be nice to make the topic titles clickable to navigate to a given section.

If you like the idea (and decide on the UI) I can take a shot at implementing it :)

[dwelle]

This falls under: https://github.com/excalidraw/excalidraw/issues/1205, with the current consensus being on this solution: https://github.com/excalidraw/excalidraw/issues/1205#issuecomment-723497526

That issue is about text hyperlinks, but as someone mentioned it could work with elements too. Unclear if that would be a good idea, UI-wise. I'd maybe start with whole text elements only (which we'll style as a link — blue color with underline, so it's obvious).

Also, the hyperlinks issue was just about URLs, but linking to objects in the same scene is a good use case too. In fact, I'd start with this use case, and leave the URL linking for a future PR, as there are some security concerns we'd like to figure out first.

[ElianCordoba]

I agree that it will be best to start working on jumping to elements first and then, maybe, moving on external links. Will give it a shot this weekend :)

What do you think the UI should be like? I'm thinking about selecting an element, clicking a button to 'pair' or 'link' in the action bar, and then clicking the target element to select that one. Similar behavior to the devtools inspect element feature

What do you think?

[dwelle]

What do you think the UI should be like? I'm thinking about selecting an element, clicking a button to 'pair' or 'link' in the action bar, and then clicking the target element to select that one. Similar behavior to the devtools inspect element feature

That would be an ideal workflow. But I'm not sure how hard it would be to implement.

Ok, so to sum up, this feature will consist of 3 mostly separate sub-features:

1. Support creating hyperlinks between elements:

   

2. Support workflow on clicking on hyperlinks

   (via https://github.com/excalidraw/excalidraw/issues/1205#issuecomment-723497526)

   On click/hover show a popup:

   

   Direct click-to-activate could work in view mode though.

3. Add support for scrolling to element (this can later be adapted to support scrolling to elements via URL).

If the above sounds good, then we should get consensus from the team and you can start working on all or some of the parts.

[ElianCordoba]

By adding support for scrolling do you mean instead of snapping to the new position you smoothly transition to it?

One drawback I see with this linking behavior is that if you got a big board you will have to scroll/move across it to find the element to link to, you could be prone to miss clicking some other element. Maybe as a follow-up task, we could have a list of elements to link to.

Also, if you link A with B, clicking A will take you to B, but what about the other way around? In the content of the topic list example I mention before, this would be, click to go to definition and then click back to go to topics

[dwelle]

By adding support for scrolling do you mean instead of snapping to the new position you smoothly transition to it?

No, just a quick jump to it is fine. We just need to ensure it's centered properly. Should be simple, I just listed it as a separate task.

One drawback I see with this linking behavior is that if you got a big board you will have to scroll/move across it to find the element to link to, you could be prone to miss clicking some other element. Maybe as a follow-up task, we could have a list of elements to link to.

Yes, that's why I'd add the confirmation step as you can see on the diagrams above. This way you can tinker with the selection until you hit the right element and only then confirm it.

Also, if you link A with B, clicking A will take you to B, but what about the other way around? In the content of the topic list example I mention before, this would be, click to go to definition and then click back to go to topics

Sure. The workflow will be generic so it should allow this easily. I'd only add a check to prevent linking to itself.

[mmdfl]

I have the same issue because my scenes are too big ... I would like to move more efficiently among different regions. One possible way of implementing this jump feature, using the already existing hyperlink tool, would be if I could get the excalidraw link pointing to the exact position or object id (for instance, selecting an object, right click on it, and select something like "Copy Object Link", and receive a link like this: https://app.excalidraw.com/s/94sMb/gwKiL/**posic_x=123&posic_y=456**). If I had this, it would be enough to paste this URL in the hyperlink placeholder of another distant object in the whiteboard, to be clickable and jump to the previous specified position/object.

[7flash]

Alternatively, we can introduce a new element "Arrow Link" which can snap two elements together and have smooth transition from one to another

I am actually currently using this approach of connecting elements with lines but then following the trajectory of line manually to find it's end connection

[7flash]

After going through suggested approaches, I am coming up with solution of "Pinned Anchors"

The idea to add another action "Pin element" which would be very similar to "Create link" but instead of URL it prompts to enter custom label/alias text

All pinned anchors are visible as a floating list in Island container

Single click on the anchor triggers "select element" action

Double click on the anchor triggers "select and zoom to fit selected element" action

-- Does it make sense to be merged once implemented?

[sojusnik]

After going through suggested approaches, I am coming up with solution of "Pinned Anchors"

The idea to add another action "Pin element" which would be very similar to "Create link" but instead of URL it prompts to enter custom label/alias text

All pinned anchors are visible as a floating list in Island container

Single click on the anchor triggers "select element" action

Double click on the anchor triggers "select and zoom to fit selected element" action

-- Does it make sense to be merged once implemented?

That sounds like an awesome idea and would be immensely helpful for bigger whiteboards!

[7flash]

Ok will do that

Is it acceptable to include a new field "anchors" next to "elements" and "files", or better just a new field "anchorName" to the element?

[sojusnik]

I guess a very simple and intuitive way of linking internal objects would be the following way:

1. Select an object (drawing, text field etc.) you want to link
2. Press the "interlink" button (we might call it "interlink" to distinguish from the button that links to external sources) or the corresponding keyboard shortcut, like "shift+ctrl+k" (similar to the shortcut that creates external links, i.e. "ctrl+k") or just "ctrl+l", which will show a pop-up that says something like "select another object and press the interlink button to link your current selection".
3. Select the object and press the interlink button or use "shift+ctrl+k" or "ctrl+l" to finally link both objects.

As a result, both linked objects should now have a small icon on the same place where currently the icon for the external linking appears, but it should be a different icon, to distinguish between internal and external linking. If you click on this interlink icon of one of these linked objects, then you should jump to the other object.

It would be tremendously useful to have such a feature, especially for larger whiteboards, because you often want to connect certain objects, but doing it with arrows over a long distance clutters the whole whiteboard after some time.

@7flash what do you think about this approach? Do you think that this is easily implementable?

[7flash]

I guess a very simple and intuitive way of linking internal objects would be the following way:

1. Select an object (drawing, text field etc.) you want to link
2. Press the "interlink" button (we might call it "interlink" to distinguish from the button that links to external sources) or the corresponding keyboard shortcut, like "shift+ctrl+k" (similar to the shortcut that creates external links, i.e. "ctrl+k") or just "ctrl+l", which will show a pop-up that says something like "select another object and press the interlink button to link your current selection".
3. Select the object and press the interlink button or use "shift+ctrl+k" or "ctrl+l" to finally link both objects.

As a result, both linked objects should now have a small icon on the same place where currently the icon for the external linking appears, but it should be a different icon, to distinguish between internal and external linking. If you click on this interlink icon of one of these linked objects, then you should jump to the other object.

It would be tremendously useful to have such a feature, especially for larger whiteboards, because you often want to connect certain objects, but doing it with arrows over a long distance clutters the whole whiteboard after some time.

@7flash what do you think about this approach? Do you think that this is easily implementable?

Totally agree. Visible arrows might clutter the workspace a lot, and showing "internal" links for connected elements is more elegant solution. Perhaps the line might become visble on hovering over the link. Also, your proposal of "Internal links" is fully compatible with mine of "Pinned Anchors". I think I could implement yours approach first to allow linking and jumping, and then additional feature would be to show a table of all linked elements as anchors.

| element1 | <> | element2 | | element3 | <> | element 4 |

[sojusnik]

That would be awesome! Can't wait to test this out 🐳

[quinn-p-mchugh]

The ability to navigate to one object by clicking on another would be great for my use case. I'm looking to create a high-level system architecture diagram based on the C4 model, where high-level system diagrams are broken down into lower-level container, component, and code diagrams. Having this linking functionality would make it possible to indicate, for example, where (X) system in my context diagram is broken out into containers elsewhere on the canvas.

@7flash Here's how this is done in Miro, in case it's helpful:

1. Context & Container Diagrams (Unlinked):
2. Select "Internet Banking System" object -> Press "Add link". Hover over the object that you'd like to link to and click - this auto-fills the input box on the top left with the objects URL. Pressing "Confirm" will add a blue arrow to the "Internet Banking System" object.
3. Context & Container Diagrams (linked):
4. Clicking on the blue arrow will cause the user's window to focus on the linked object:

[Michael-fore]

Is anyone aware of progress on this?

It it hasn't been started or or isn't close to be finished i may give it the good ol college try

[MartinNuc]

I am also interested in this feature. Actually I need the very same thing as @quinn-p-mchugh :-)

[mindriven]

I would also love to see it working!

[dennisrcao]

Yes bump! would also like a feature that has a clickable button that links to different section within an excalidraw canvas!

[7flash]

@MartinNuc @mindriven @dennisrcao since we have discussed several solutions in this topic, which one you think most convenient in your each case? do you think my proposal with "Pinned Anchors" would work for you?

[Sitzdev]

Bump! would be an amazing feature.

[7flash]

Bump! would be an amazing feature.

Currently I have implementation of anchors based on meta-arrows which are not rendered on the canvas, but still present in the getSceneElements()

It works in addition to macros feature which assumes arrow labels are referencing name of the macros function which accepts input element (start binding) as an argument and updates text of output element (end binding) with result of macro execution.

In scenario above, after connecting two elements with an arrow, you would have to double click the arrow and write "jump" which would be arbitrary name of the function you define in the window and implement it as a function to scroll fit into bounding box of the output element.

Then whichever elements you select on the canvas, it's rendering a list of buttons in the side bar, a button for each label triggering execution of corresponding macro. Also you can have default list of macros showing up buttons when you don't have any elements selected. It's useful to make an index of chapters/sheets of your canvas quickly accessible from any point in this case, or attach any arbitrary functions in general case.

But then again, as mentioned above, I found way too messy to have lots of arrows on the canvas, and came up with solution of meta-arrows, which are still noticed by macros mechanism even though being ignored in rendering loop.

I am currently working on a new meta-editing mode, which actually allows you to draw those meta-arrows and then export it as a canvas with easy navigation & custom functions in view-mode.

And finally, I should mention, what makes me excited about further idea of connecting elements with dynamic meta-arrows, that's an ability to connect elements across multiple whiteboards, - that is referencing elements published in other whiteboards, - either available locally or downloadable remotely, - using those elements non-present in your canvas an an input start bindings binded to arrows in your current canvas.

5684

https://github.com/zsviczian/obsidian-excalidraw-plugin/pull/1252

https://github.com/excalidraw/excalidraw/issues/253#issuecomment-1844186935

[AndrewLTBA]

Bump! This is definitely something i would like to see as well, i'm using the plugin of excelidraw in standard notes and i use it to map out and plan animations and i use a wide area and have many different sections, if i could click on a button or have a sort of index area where all of the linked items live and then go from there to the different sections that would be helpful! but the adding of pinned anchors sounds good if there wasn't too much to limit them, or if there was a way to have the list organized but that isn't necessary as just having the ability is more helpful.