> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/b/6/d/ab6dbd07644fa800/group-45_1tbkkx8.png)

## 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/b/6/d/ab6dbd07644fa800/group-40_qtkjlc.png)
### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/b/6/d/ab6dbd07644fa800/group-42_lsorh1.png)
### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/b/6/d/ab6dbd07644fa800/group-43_oavm58.png)

## 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 s**how animation on load**. The **duration** controls how quickly nodes appear. The **delay** determines the rhythm between each node reveal.

Alternatively, the [scrub on scroll](https://help.maglr.com/en/article/scrub-on-scroll-1xirtqt/) 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 pasted**
| Right 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.