Articles on: The Pro editor

Diagram

The diagram component helps you visualize complex information. Whether you're showing a project timeline, organizational structure, or decision-making process, diagrams make relationships and hierarchies instantly clear to your audience.



Inserting diagram data

Start by entering your diagram content using a simple text format. Think of it like creating a bulleted list, but with dashes to show hierarchy:


- 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


How it works:

  • Use - for your main items (top level)
  • Add -- for sub-items that belong under a main item
  • Add --- for even deeper levels if needed
  • After the first |, add a description that appears in the node
  • After the second |, add a tooltip that appears when visitors hover (optional)


Choosing your diagram type


The diagram type determines how your content is structured visually. Each type tells a different story:


Tree

Tree displays a branching structure similar to a file explorer, perfect for categories and subcategories, decision trees, or nested information structures. It's great when you have multiple branches from a single root.


Organization Chart

Organization Chart creates a traditional hierarchy, ideal for company structures, reporting relationships, or any top-down organizational information. It clearly shows who reports to whom.


Timeline

Timeline works best when showing a sequence of events or steps that happen over time. Nodes appear in chronological order, making it perfect for project phases, historical events, or process steps.



Orientation


Orientation decides how your diagram it flows. Horizontal orientation flows naturally from left to right and works well for timelines and wide screens. Vertical orientation flows from top to bottom and is more mobile-friendly.


Line style


The line style connects your nodes. Straight lines feel clean and direct and are good for smaller diagrams. Curved lines are flowy. Stepped lines have sharp bends which makes scanning easier in large diagrams. Dashed and dotted styles can indicate different types of relationships or add visual variety.


Text overflow


When your nodes contain longer text, you have two options:

  • Show in popup keeps your nodes compact and clean. Text that doesn't fit is truncated with an ellipsis, and visitors can hover to see the full content.
  • Wrap text in node lets text flow across multiple lines within each node, perfect when you want all information immediately visible without hovering.


Animations


The diagram contains a built in animation that can be toggled on or off with show animation on load. The duration controls how quickly nodes appear. The delay determines the rhythm between each node reveal.


Alternatively, the scrub on scroll effect can be applied to the diagram. This effect lets you progressively reveal each node on scroll. Regular start/end animations and scroll path animations can also be applied, though only affect the diagram in its entirety (not on a node level).


Sizing and spacing


The size of your nodes and the space between them affects readability. Larger nodes (> 300px width) typically give your content room to breathe. Smaller nodes (150-200px) create a denser, more detailed view perfect for comprehensive diagrams. The right size of your nodes is dependent on the textual volume.


Spacing controls how much room there is between nodes. More spacing creates a relaxed, easy-to-scan layout, while tighter spacing packs more information into the same space. How much spacing you need is dependent on how many nodes and relations your diagram has.


The column gap (for tree diagrams) determines how far apart your columns sit, which is especially important when you have many branches.


Mobile considerations


On mobile devices, wide diagrams can become cramped. Enable scroll for mobile to let visitors swipe horizontally through your diagram, ensuring nothing gets cut off and everything remains readable.


Styling your diagram


The style panel lets you create a cohesive look that matches your brand. Start with the diagram background to set the overall tone, then style your title to match your page typography. The lines connecting nodes can be subtle or bold depending on your design. The node popup styling controls how your hover tooltips appear.


You can style all nodes uniformly, or create visual hierarchy by styling each level differently. For example, make first-level nodes bold and prominent, second-level nodes slightly smaller, etc. This helps visitors immediately understand the structure and weight of different elements.


Diagram styles can be copied and pastedRight click a diagram and select the copy/paste style options to easily transfer styling properties. Convenient when you have multiple diagrams to create.


Best practices


  • Keep your node text concise: Visitors should be able to quickly scan and understand your diagram. Use descriptions and tooltips to provide additional context without cluttering the main view.
  • Adjust spacing based on your content density: If you have many nodes, tighter spacing might work better, while fewer nodes benefit from more generous spacing. Use level-specific styling to create clear visual hierarchy.
  • Don't be afraid to break up your diagram: Remember that diagrams are meant to clarify. If your diagram becomes too complex, consider creating multiple smaller diagrams.


Updated on: 18/12/2025