Page type

Org chart: a parent column becomes a navigable tree.

Works for any table where each record points to a parent, such as department and parent department, category and parent category, account and parent account. No charting library and no JavaScript to write.

The company's departments, in three levels

The Board sits at the top, with Technology and Sales right below it. At the bottom are Development, Infrastructure and Southern Sales. Each node carries its abbreviation and a label, and each link shows how many departments sit just below.

Department org chart in three levels, from the Board down to Development, Infrastructure and Southern Sales — The hierarchy comes straight from the database, with a search box, zoom controls and the number of children on each node.

The table, the parent field and what to show

You provide the table, the field that points to the parent and what appears on each node. The tree drawing, the links, dragging and zoom all come ready.

resources/views/…blade.php

<mad-org-chartmodel="Setor"parent-field="parent_id"title="nome"subtitle="sigla"metric="equipe" />

When to use the org chart

Use it when the question is "who sits under whom". The org chart shows the whole hierarchy at once, so you don't have to guess the levels from a list.

Company structure. Departments and sub-departments, as in the screen above, with each team's size on the card.
People and managers (HR). Each employee points to their manager, and the card carries a photo, name and job title.
Chart of accounts (finance). Search takes you straight to the account you're looking for, at any level.
Product categories (inventory). Moving a subcategory is dragging its card to another category.

To filter, sum and export records, use the list view. If the order that matters is time, use the timeline. And if the table doesn't have the parent column yet, you create it in the data diagram.

What you configure

Besides the table and the parent field, these settings change what the user sees.

Title and subtitle title subtitle: The fields that appear on each card, such as the department name and its abbreviation.
Photo avatar-field: The field with each node's photo. Without it, the card shows the title's initials.
Number on the card metric metric-label: A numeric field highlighted on the card, with a label that says what it counts.
Drag to change the parent draggable: Turns on dragging. It comes off by default, so nobody reorganizes the tree unless you want them to.
Click on the card click-target: The method that opens when someone clicks a card, such as that department's record.

What goes into the Laravel project

The tree is a class in app/Control with the <mad-org-chart> view. Business rules go into methods on it:

A filter that applies on every access. In a class of yours that extends the org chart's, the query() method limits what each user sees: roots, children, counts, search and parent changes.
A rule for changing parents. The canReparent() method decides whether the change can happen, and afterReparent() runs right after it, for example to log who changed what.
Your own card. If the default card isn't enough, the <mad-org-chart-card> tag takes whatever Blade you want for each node.

Like every MadBuilder screen, these files open in your editor, go into your Git and accept hand-written code in protected blocks, which stay there when the screen is regenerated. See how the code is generated.

Questions about the org chart

Does the org chart work with any table?

With any table where each record points to a parent in the same table. Records with no parent, with an empty or zero field, become the roots of the tree.

Can I move a department by dragging it?

Yes, if dragging is turned on. The server checks the change before saving and refuses to move a node under one of its own descendants.

What if the tree has thousands of nodes?

Load only the first levels. The rest opens on demand, and each node shows how many children it has. By default, each load brings up to 1,000 nodes and warns you when it goes past that.

And more

Pan the canvas and adjust the zoom with the buttonsSearch that finds the node and centers it on screenDrag a node to another parent and the database is updatedA number on each node, such as team size or costFilter to show only one branch of the treeWorks for departments, accounts, categories and bills of materials

See also the Timeline or the page types.

Create an account, build a screen, download the project.

No scheduled demo, no discovery call. If the Laravel that comes out doesn’t pass your team’s review, you lost an afternoon.

Try the app now See the generated code

Create an accountOpen beta, no credit card.
Build a screenVisually, in code, or by asking the AI.
Download the .zipA Laravel project that runs wherever you want.