Custom links can be used where hyperlinks and links to pages are allowed, namely on shapes and (parts of) text labels. To add a custom link to a cell, click on Edit Link (Alt+Shift+L) and enter it in the text box:



The format for custom links is: data:action/json,{"actions":[actions]} where actions is a comma-separated list of JavaScript objects (JSON) with the following possible keys:

  • "open": string - opens a standard or custom link (including page links)
  • "toggle"/"show"/"hide"/"highlight": cellset - toggles, shows, hides or highlights the given cells
  • "select": cellset - selects the given cells if the graph is editable
  • "scroll": cellset - scrolls to the first cell in the given celllset

If no scroll action is specified, then the first cell of the select or highlight action is scrolled to visible (select has precedence).

For highlight, a color (string), duration (number in milliseconds) and opacity (1-100) may be specified.

A cellset is an array of cell IDs or tags or both, eg. {"cells": ["id1", "id2"], "tags": ["tag1", "tag2"]}.

To specify all cells, use "cells": ["*"], to specify all cells with a tag, use "tags": [] (empty array).

Note that if tags are used to toggle cells, the current visible state of the cell is toggled.


Example 1

data:action/json,{"actions":[{"toggle": {"cells": ["5", "7"]}}]}

Shows or hides the cells with ID 5 and 7, depending on their current visible state. Here is an example.


Example 2

data:action/json,{"actions":[{"open": "data:page/id,1"},{"highlight":{"cells":["2"],"opacity":100, "color": "red"}}]}

Opens the page with ID 1 and then highlights the cell with ID 2 in red with opacity 100%.


Example 3

data:action/json,{"actions":[{"show": {"tags": []}},{"hide": {"tags": ["pipe", "water"]}}]}

Shows all cells with a tag and then hides all cells with tags pipe and water.


To get the ID of cells, pages and layers, use Edit Data (Ctrl/Cmd+M). To show this dialog for pages, make sure nothing is selected.



To show this dialog for layers, open the Layers window (Ctrl/Cmd+Shift+L) and click on Edit Data in the toolbar at the bottom:



If the diagram is editable, custom links are shown in a tooltip when the cell is selected and are labelled Action. When clicked, the visible state of the cells is updated and the diagram is saved. If realtime collaboration is used, the visible state of the cells is updated in all connected diagrams. In read-only mode, clicking on the shape or text will change the visible state of the cells, but the change will not be saved.


While we're working on a user interface to create and edit custom links, here is a tool that simplifies creating them.