Articles on: The editor

Diagram

The Diagram element shows structured information as connected nodes, such as a project timeline, an organizational structure or a decision process. You type the items as a dashed list, and the Diagram draws them as a Timeline, an Organization Chart or a Tree.



Adding a diagram and opening its settings


To add a Diagram to your page and open its settings:


  1. Open the Add elements panel and select the Specials category.
  2. Add Diagram to your page.
  3. With the Diagram selected, click Settings in the right panel. You can also double-click the Diagram.


The Diagram settings have four tabs: Data, Type, Size and Animation. The look of the Diagram (colors, fonts, line color and thickness) is set separately, in the Styling block of the right panel.


Entering diagram data


To enter the items of a Diagram:


  1. Select the Diagram and click Settings in the right panel.
  2. Open the Data tab.
  3. Type your items in Diagram data, one item per line, using the syntax below.


This example creates two main items, each with two sub-items:


- Planning | Project kickoff | Hover to see details
-- Sub task 1
-- Sub task 2 | Subtask description | Tooltip for this task
- Design | Create mockups
-- Sub task 1
-- Sub task 2


Diagram data syntax


Each line in Diagram data that starts with a dash becomes a node. The rules are:


  • - at the start of a line makes a main item (level 1).
  • -- makes a sub-item of the main item above it (level 2).
  • --- makes a deeper level (level 3), and so on for more dashes.
  • Text after the first | is a description. It appears in smaller text below the label, inside the node.
  • Text after the second | is a tooltip. It appears in a popup when a visitor hovers over the node. The tooltip is optional.
  • A node with a tooltip shows a small dot, so visitors can see that there is more to read.
  • A line that doesn't start with a dash is added to the tooltip of the node above it. Use this to write a tooltip over several lines.


Adding or removing the diagram title


A new Diagram shows the title "Diagram title" above the nodes. To change or remove it:


  1. Select the Diagram and click Settings in the right panel.
  2. On the Data tab, edit the text in Title. To remove the title, clear the field. The Diagram then reserves no space for a title.
  3. To move the title, open the Type tab and choose a position in Title alignment: Top Left, Top Center, Top Right, Bottom Left, Bottom Center or Bottom Right.


Choosing your diagram type


The Diagram type sets how the nodes are arranged. You choose it in the Diagram settings, on the Type tab, under Type. The options are Tree, Organization Chart and Timeline. A new Diagram uses Tree.


Tree


The Tree type shows a branching structure. In Vertical orientation it looks like a file explorer, with sub-items indented below their parent. Use it for categories and subcategories, decision trees or other nested information. Each main item (level 1) starts its own tree.


Organization Chart


The Organization Chart type shows a classic hierarchy, such as a company structure or reporting lines. In Horizontal orientation it is a top-down chart, with each sub-item below the item it belongs to. In Vertical orientation, each sub-level appears to the right of the item it belongs to.


Timeline


The Timeline type shows all nodes in a single line, in the order you typed them. Use it for a sequence of events or steps, such as project phases or process steps. A Timeline ignores nesting: sub-items (lines with -- or more dashes) become steps in the same sequence as the main items, not branches under them.



Setting the orientation


The Diagram's Orientation setting (Diagram settings, Type tab) sets the direction in which the Diagram runs. Its effect depends on the diagram type. A new Diagram uses Vertical.


  • Horizontal: A Timeline runs from left to right. In an Organization Chart, items on the same level sit side by side, and each sub-level appears below its parent level. In a Tree, sub-items appear below their parent, and each main item's tree is placed below the previous one.
  • Vertical: A Timeline runs from top to bottom. In an Organization Chart, items on the same level are stacked from top to bottom, and each sub-level appears to the right of its parent level. In a Tree, sub-items appear below their parent, indented to the right like a file explorer, and each main item's tree is placed next to the previous one.


Choosing a line style


The Diagram's Line setting (Diagram settings, Type tab) sets the style of the lines that connect the nodes. A new Diagram uses Stepped. The options are:


  • Straight: direct lines between nodes. These suit smaller diagrams.
  • Curved: rounded lines between nodes.
  • Stepped: lines with right-angled bends. These are easier to follow in large diagrams.
  • Dashed: dashed lines.
  • Dotted: dotted lines.


Dashed and dotted lines can mark a different kind of relationship from the rest of your content, or add visual variety.


Scrolling a wide diagram horizontally


To let visitors scroll sideways through a wide Diagram instead of seeing it shrunk:


  1. Select the Diagram and click Settings in the right panel.
  2. Open the Type tab.
  3. Under Scroll, check Scroll diagram horizontally in smaller container.


With this setting on, the Diagram keeps its full width and is only scaled down, if needed, to fit the height of the element. Visitors scroll horizontally inside the element to see the rest. This setting overrides Resize diagram.


Diagram settings are saved per layout, so you can switch this on in the mobile layout only. That is the most common use, because a wide Diagram can become too small to read on a phone.


Setting node size, spacing and padding


The size settings of a Diagram are on the Size tab of the Diagram settings:


  • Width and Height (under Node) set the size of each node. A new Diagram uses nodes of 250 × 70 px.
  • Spacing (under Node) sets the space between nodes. A new Diagram uses 70.
  • Padding (under Diagram) sets the space between the Diagram and the edges of its element. A new Diagram uses 25.
  • Tree gap (under Diagram) sets the space between separate trees in a Tree or Organization Chart Diagram. Each main item (level 1) starts its own tree. A new Diagram uses 60.


Choose the node size based on how much text your nodes hold. Wider nodes than the 250 px default (for example over 300 px) give longer text more room. Narrower nodes (for example 150–200 px) fit more nodes in the same space. For spacing, a Diagram with many nodes usually reads better with less spacing, and a Diagram with few nodes with more.


Resizing the diagram to its element


The Diagram's Resize diagram setting (Diagram settings, Size tab, under Scaling) sets how the Diagram scales to the size of its element:


  • Zoom scales the Diagram up or down to the largest size that fits the element, keeping its proportions. This is the setting for a new Diagram.
  • Scale to fit only shrinks the Diagram when it doesn't fit in the element. It never enlarges it.


When Scroll diagram horizontally in smaller container is checked on the Type tab, that setting overrides Resize diagram.


Handling long text in nodes


The Diagram's Text overflow setting (Diagram settings, Size tab, under Text) sets what happens to longer text in a node. There are two options:


  • Show in popup keeps nodes compact. Labels longer than 20 characters and descriptions longer than 25 characters are cut off with "...". The limit is a character count, whatever the node width. Visitors hover over the node to see the full text, together with any tooltip. This is the setting for a new Diagram.
  • Wrap text in node shows all text inside the node, over several lines. The node grows taller to fit the text, so Height acts as a minimum height.


Animating the diagram


A Diagram has a built-in animation that reveals the nodes one by one. You set it in the Diagram settings, on the Animation tab:


  • Show animation on load turns the animation on or off. It is on for a new Diagram.
  • Duration sets how long each node takes to appear, from 100 to 5000 ms. A new Diagram uses 1000 ms.
  • Delay sets the time between the reveal of one node and the next, from 10 to 1000 ms. A new Diagram uses 100 ms.


To replay the animation in the editor, select the Diagram and click Restart in the right panel.


You can also apply the scrub on scroll effect to a Diagram. With scrub on scroll, the lines and nodes are revealed one by one as the visitor scrolls.


Element animations (start, end and scroll animations) also work on a Diagram, but they move the Diagram as a whole, not individual nodes.


Styling your diagram


The look of a Diagram is set in the Styling block of the right panel, with the Diagram selected. The style groups are:


  • Background: the background of the Diagram.
  • Title: the Diagram title.
  • Lines: the lines that connect the nodes.
  • All Nodes: every node in the Diagram.
  • 1st Level Node, 2nd Level Node, 3rd Level Node and 4th Level Node: the nodes of one level only.
  • Node Popup: the popup that shows the tooltip and the full text when a visitor hovers over a node.


Style every node the same with All Nodes, or style each level differently to show the hierarchy. For example, give level 1 nodes a larger, bold font and level 2 nodes a smaller font. Separate level styling is available for levels 1 to 4. Nodes at level 5 and deeper use the All Nodes style.


Diagram styles can be copied and pastedRight-click a styled Diagram and choose Copy style. Then right-click another Diagram and choose Paste style. Only the styling is transferred, not the data or settings, and it can only be pasted onto another Diagram.


Best practices for diagrams


  • Keep node text short. Visitors should be able to scan the Diagram quickly. Put extra context in descriptions and tooltips instead of the label.
  • Match spacing to the number of nodes. Use less spacing for a Diagram with many nodes and more for one with few nodes.
  • Split a complex diagram. If a Diagram becomes hard to read, use several smaller Diagrams instead.


Frequently asked questions


Why is the text in my diagram nodes cut off with "..."?


With the Diagram's Text overflow setting on Show in popup, labels longer than 20 characters and descriptions longer than 25 characters are cut off with "...". Visitors see the full text when they hover over the node. To show all text inside the node, select the Diagram, click Settings in the right panel, open the Size tab and set Text overflow to Wrap text in node.


How do I remove the diagram title?


Select the Diagram, click Settings in the right panel, and clear the Title field on the Data tab. The Diagram then shows no title and reserves no space for one.


Why does my Timeline ignore sub-items?


The Timeline diagram type always shows all nodes in a single line, in the order you typed them, whatever their level. To show sub-items as branches of their main item, set Type (Diagram settings, Type tab) to Organization Chart or Tree.


Can I style more than four levels differently?


No. The Diagram's Styling block has separate style groups for levels 1 to 4 only. Nodes at level 5 and deeper use the All Nodes style.


How do I add a tooltip with several lines?


In Diagram data, add the tooltip after the second | on the node's line. Then type the next lines of the tooltip on new lines that don't start with a dash. Each such line is added to the tooltip of the node above it.

Updated on: 16/10/2026