← Blog
Tutorials14 min readThe Utter team3 views

How to use the mindmap

XLinkedIn

You inherited a project with 40 open tickets and no clear picture of how they fit together. The board shows you columns. The backlog shows you a ranked list. Neither one tells you which epic is quietly on fire, which person is buried under twice their share of work, or which stories are floating with no parent to anchor them. You are reading rows when what you need is shape.

That is the gap the project mind map view fills. It takes everything in a project and draws it as a radial tree, the project at the centre and the work fanning out around it, so you can see structure instead of scrolling through it. This walkthrough covers both the single-project map and the workspace-wide one, how to read what you are looking at, and how to answer a real question fast without editing a ticket by accident.

Here is what you will be able to do by the end:

  • Open both the single-project mind map and the workspace-wide map, and know when each one earns its place
  • Read the radial tree at a glance: what the pills, badges, colours, and rings actually encode
  • Expand, collapse, and filter branches to answer a real question (which epic is stalled, who is overloaded)
  • Switch grouping between Hierarchy, Status, and People to see the same work three ways
  • Export the current view as a PNG, and understand exactly what the map will and will not do

Why the project mind map view beats another list

A board is great for one thing: watching work move left to right through your columns. A backlog is great for one other thing: deciding what to pull next. Both are lists with extra styling. They show you rows. When you have 40 open tickets across five epics and three people, rows hide the two facts you actually care about: how the work is shaped, and where it is stuck.

The project mind map view is the see-the-whole-project-at-once tool. It is a radial tree built with React Flow. The project name and key sit in the middle, and the work spreads outward on fixed concentric rings, one ring per level of depth. An epic is a branch. Its stories and tasks are the next ring out. Subtasks sit beyond that. Every issue is a rounded pill you can read at a glance.

What is it good for, concretely? Pattern questions that a list buries:

  • Seeing the structure of a project you did not build
  • Spotting orphans, the stories and tasks that belong to no epic
  • Spotting overload, the one person whose branch has twice as many pills as anyone else's
  • Spotting stalled branches, the epic where nothing has moved out of Backlog in weeks

One honest boundary before you get attached to it: the map is read-only for the work itself. You can expand, collapse, filter, drag pills around, and export what you see. You cannot create, rename, reassign, restatus, or delete anything from it. When you want to change a ticket, you click through to its issue page and edit there. The map is the X-ray, not the operating table.

Opening the mind map (project and workspace)

There are two entry points, and they answer different questions.

# Single-project map: the project's Mindmap tab
https://utter.ae/w/<workspace>/p/<project>/mindmap

# Workspace-wide map: the Mindmap link in the sidebar
https://utter.ae/w/<workspace>/mindmap

For one project, open the project and click the Mindmap tab. In the demo workspace that is the WEB project at /w/utter/p/web/mindmap. This is the view you want when someone hands you a single project and says "get your head around this."

For everything at once, look in the left sidebar under the Workspace group and click the Mindmap link. That takes you to the workspace map, where the centre is the workspace itself and the first ring is one node per project. More on that view later, because it behaves differently in a way that matters.

When a single-project map loads, it opens deliberately calm. Only the root, the project, is expanded. Everything else starts collapsed, so you get a clean overview instead of a wall of 40 pills the second the page paints. Along the top is the toolbar: the Hierarchy / Status / People grouping toggle, plus Expand all, Collapse all, and the Filter nodes… box.

The WEB project mind map in its default collapsed state: project name and key at the centre, a first ring of epic and group nodes each carrying a +N badge, and the toolbar with the Hierarchy/Status/People toggle plus Expand all, Collapse all, and Filter nodes. Shows the clean root-only starting point the rest of the tutorial builds on.

If you land on a brand-new project with nothing in it, you will not see a broken empty canvas. You get a small empty state that reads "Nothing to map yet" with a line telling you to add some work and it will show up here as a map. The workspace map has its own version for when there are no projects yet. So if you are staring at that message, it is not a bug. There is just nothing to draw.

Reading the map: pills, badges, rings, and colour

Before you start clicking, spend thirty seconds learning the visual language, because everything else here rides on it.

The centre is the project: its name and key, for example WEB. The rings around it are depth. The first ring out is the top level of whatever grouping you are in (epics, in Hierarchy mode). The second ring is their children. The third ring is the children's children. Distance from the centre is literally how deep in the tree you are.

Each issue is a pill, and the pill is dense with meaning once you know where to look:

  • The type icon (epic, story, task, bug, or subtask), tinted by that type's colour
  • A status-coloured accent, so you can tell a Done pill from an In Progress one without reading the text
  • The assignee's avatar, so you can see who owns it

Two badges do the heavy lifting for navigation. A collapsed node that has children shows a +N badge. That N is the count of every hidden descendant underneath it, all levels, not just its direct children. So an epic showing +14 has fourteen things under it in total, whether they are stories directly attached or subtasks three rings deep. An expanded node swaps that badge for a small up-chevron, which is your cue that clicking will collapse it again.

Colour is not decoration either. Each top-level branch gets its own distinct brand hue, and that hue tints the whole branch and the curved floating edges that connect it. So the "Timeline + Summary tab" epic and everything under it might run gold while another epic runs a different tone, and you can trace a branch out to its tips by colour alone. The edges are bezier curves that light up when you hover the node they connect to, which helps when two branches overlap in a busy corner of the map.

Expanding and collapsing branches to follow a thread

This is the core interaction, and it is one click.

Click a node that has children and its children fan out one ring further. As they appear, the viewport glides (an animated fitView) to re-centre on the branch you just opened, so the thing you are exploring lands in the middle of your screen instead of off in a corner. Click the same node again and its children hide, but this time the viewport stays put, so you do not lose your place.

Say you are in WEB and you want to know what is inside the "Timeline + Summary tab" epic. Click that epic's pill. Its stories and tasks fan out one ring, the view slides to centre them, and the epic now shows the up-chevron telling you it is open. Now you can read its children: maybe a "Gantt dependency overlay" story, a "burndown chart island" task, a bug or two. In one click you went from "there is an epic here" to "here is exactly what it contains and what state each piece is in."

There is a small but useful distinction in what a click does, depending on the node:

flowchart TD
    A[Click a pill] --> B{Does it have children?}
    B -->|No, it is a leaf| C[Opens the issue page]
    B -->|Yes, it is a branch| D{Where did you click?}
    D -->|The pill body| E[Expands or collapses the branch]
    D -->|The small arrow| C

Click a leaf, a node with no children, and you navigate straight to that issue's detail page, where you can actually edit it. Click a branch and the body of the pill dives into the branch instead. But a branch issue also shows a small up-right arrow, and that arrow is your escape hatch to open the issue page directly. So a leaf takes you to the work; a branch expands, unless you deliberately click its arrow.

When you want the whole picture, Expand all opens every branch at once and re-fits the map so it all fits on screen. Collapse all does the reverse and drops you back to the clean root-only overview. Collapse all is disabled when nothing is open, which is a nice tell: if that button is greyed out, the map is already fully collapsed.

Grouping by Hierarchy, Status, or People

The same set of issues can be arranged three ways, and the segmented toggle in the toolbar flips between them. There are exactly three modes. Not four, not custom. The active one shows as a gold pill.

Mode First ring The question it answers
Hierarchy Epics, plus a No epic orphan bucket How is this project organised, and what is floating loose?
Status One node per board column (Backlog, To Do, In Progress, In Review, Done in WEB) Where is the flow jammed?
People One node per assignee, plus Unassigned Who is carrying too much?

Hierarchy is the structural view. Epics on the first ring, their stories and tasks on the next, subtasks beyond. Anything that is not an epic, has no parent, and belongs to no epic falls into the No epic group, which is your orphan bucket.

Status regroups everything by board column, each with its issues hanging off it. Switch to this mode and the shape of your flow jumps out. If the In Review group is three times the size of every other group, you have a review bottleneck, and you saw it in one glance instead of counting cards.

People regroups by assignee, each person's issues fanning out from their node, with work nobody owns yet collected under Unassigned. This is your load-balance view. The person whose branch is visibly heavier than everyone else's is the person to talk to before the sprint goes sideways.

The mindmap grouped by people, each assignee a hub with their issues branching off

One thing to know: switching mode resets expansion back to the collapsed overview. That is on purpose. Each mode is a different question, so it starts you fresh rather than trying to carry your open branches across a completely different layout. Pick the mode for the question you are asking. And to be clear about the boundary: there is no group-by-label, group-by-priority, or group-by-type. Three modes, that is the full set.

Filtering to find work without losing the map

Expanding branches one by one is fine when you are exploring. It is slow when you already know what you are hunting for. That is what the Filter nodes… box is for.

Start typing, and two things happen together. Every issue pill that does not match your text dims to about 30% opacity, so it fades into the background without disappearing. And any branch that contains a match force-expands, opening its ancestors automatically so the matching pill is never trapped behind a collapsed parent. You do not have to know where a ticket lives. You type, and the map opens itself up around your matches. About 450ms after you stop typing, the view re-fits so everything relevant is on screen.

Try filtering "timeline" in WEB. Every ticket with "timeline" in it lights up at full opacity while the rest of the project greys back, and any epic holding one of those tickets springs open to reveal it. In one move you have surfaced every timeline-related piece of work across every epic, without manually opening a thing.

The mindmap with a filter applied: nodes matching the search stay bright while the rest dim, so the relevant branch stands out

Filtering here is about keeping the shape while spotlighting a subset. When you would rather have precise rows you can sort and slice by field, the list view is the better tool, and there is a full walkthrough on how to filter and sort issues. Map for shape, list for rows. Use whichever matches the question.

Seeing the whole workspace as one map

The workspace map is not just a bigger project map. It is a different kind of thing.

Open it from the sidebar and the centre is the workspace name, headed "Workspace mindmap" with the line "Every project and its work as one map. Click a project to expand it." The first ring is one node per project you can reach, and each project node shows its total issue count as a +N badge before you open it. So at a glance you see every project and roughly how much work each one is carrying.

The workspace-level mindmap, every project a branch off the workspace root

The important difference is how those project nodes load. They load lazily. Clicking a project node does not navigate you anywhere and does not have its tree sitting there pre-drawn. Instead the click fires a loadProjectMindmap server action that fetches that project's issue tree on demand, then expands it in place.

sequenceDiagram
    participant You
    participant Map as Workspace map
    participant Server
    You->>Map: Click a project node
    Map->>Server: loadProjectMindmap for that project
    Server->>Server: Recheck your access to it
    Server-->>Map: That project's issue tree
    Map-->>You: Branch expands in place

This keeps the workspace map fast even when you own a lot of projects, because it only pulls the detail you actually ask for. Hit Expand all on the workspace map and it first fetches every not-yet-loaded project in parallel, then opens everything once the data is in.

Visibility follows the same tenancy rules as the rest of Utter. Owners and admins see every project. Everyone else sees the non-scoped projects plus any scoped projects they have explicitly joined, and every lazy project load re-checks that access on the server, so the map cannot leak a project you are not allowed to see. Guests do not get the workspace map at all; they are 404'd from it.

Two practical notes. If a project fails to load, its node tells you "Couldn't load that project. Please try again," and you can retry the click rather than reloading the whole page. And the workspace map lists at most 200 projects, so on a very large workspace it shows you the top of the list, not literally every project that has ever existed.

Panning, zooming, dragging, and exporting

Getting around the canvas is standard React Flow, with a couple of details worth knowing.

Pan and zoom with the mouse wheel or the React Flow Controls in the corner. The zoom range runs from 0.08x all the way out to 2.5x, so you can pull back far enough to see a huge project as one shape or push in close enough to read a single pill. You can drag individual pills to reposition them, and here is the nice part: a manual position sticks. Drag a pill somewhere that makes sense to you and it survives expanding and collapsing branches, and even switching grouping mode, so your hand-tuned layout is not blown away the moment you interact with the map.

There is a contextual-zoom trick that keeps things readable at scale. Below roughly 0.35 zoom, pills drop their secondary chrome (avatars, the open-issue links, the badges) so a zoomed-out map reads as a clean constellation of dots rather than a smear of tiny cluttered boxes. It also renders fewer DOM nodes at that distance, which keeps a big map smooth. Zoom back in and the detail comes back.

A minimap in the corner mirrors the whole map, with nodes tinted by their branch or status colour so you can orient even when you are zoomed in on one branch, and it pans and zooms too. Behind everything is a dot-grid background that gives the canvas a sense of place. Note that the Controls here leave out the interactive-lock toggle, and the React Flow attribution is hidden, so do not go hunting for a lock button.

When you want to hand the map to someone who is not in Utter, use Export image in the top-right panel. It rasterizes the full bounds of your current graph to a flat PNG called mindmap.png. That is the whole export story. No SVG, no PDF, no shareable live link. What you export is a picture of exactly what is on the canvas at that moment, so expand and arrange it the way you want it read before you hit the button.

Limits and mistakes to avoid

The map is genuinely useful, and it is honest about what it is not. Knowing the edges will save you from expecting things it does not do.

Nothing about the map's state is saved. Your expanded branches, your filter text, the grouping mode you picked, the pills you dragged into place: all of it is in-memory React state, and all of it resets when you reload or navigate away. That is deliberate, a performance choice, not a bug. The map is a live scratchpad you build for the question in front of you, not a saved layout you come back to. If you find a view worth keeping, that is exactly what Export image is for.

There is no auto-layout beyond the fixed radial rings, and no rearrange button. The only manual control over position is dragging pills one at a time. So do not expect a force-directed graph that untangles itself. That is not what this is.

On big projects, two caps come into play:

  • At most 2000 issues are loaded per project (the ISSUE_CAP); beyond that the tree is truncated
  • A hard render cap of 900 nodes (MAX_NODES); when you hit it, the toolbar shows "Some branches are collapsed to keep the map fast"

So on a genuinely huge project, do not assume every single issue is on the canvas at once; some branches stay collapsed to keep the thing responsive. Archived and soft-deleted issues and projects are excluded everywhere, so the map shows live work only, ordered by issue number.

And to say it one more time, because it is the most common wrong assumption: you cannot create, edit, reassign, restatus, connect, or delete anything from the map. Nodes are not connectable. Clicking only ever expands, collapses, or navigates. Every actual change happens on the issue page you click through to.

Finally, reach for the right view for the right job. The mind map is for structure and pattern. When you need dates and scheduling, the project calendar view shows work laid out in time, and the Gantt chart with dependencies shows sequencing and what blocks what. If you want the deeper conceptual tour of why a project reads better as a map at all, there is a companion piece on seeing your whole project as a mind map.

Open the Mindmap tab on your busiest project, switch it to People mode, and see in one glance whether the load is where you think it is.

Frequently asked questions

Where do I find the mind map view in Utter?

Two places. For a single project, open the project and click the Mindmap tab at /w/<ws>/p/<proj>/mindmap. For everything in the workspace at once, click the Mindmap link under the Workspace group in the left sidebar, at /w/<ws>/mindmap.

What is the difference between the project mind map and the workspace mind map?

The project map centres on one project and fans its issues out on rings. The workspace map centres on the workspace, and its first ring is one node per project you can reach, each showing a total issue count. Project nodes on the workspace map load lazily: clicking one fetches that project's tree and expands it in place rather than navigating away.

Can I group the mind map by label, priority, or issue type?

No. There are exactly three grouping modes: Hierarchy (epics to stories/tasks to subtasks, plus a No epic group for orphans), Status (grouped by board column), and People (grouped by assignee, plus Unassigned). There is no by-label, by-priority, by-type, or custom grouping.

Why did my expanded branches and dragged positions reset when I reloaded the page?

Because none of it is saved. Expansion state, filter text, grouping mode, and dragged pill positions are all in-memory state that resets on reload or when you navigate away. That is an intentional performance choice. If you want to keep a particular arrangement, export it as a PNG.

Does the mind map show every issue on a very large project?

Not always. Up to 2000 issues are loaded per project, and beyond that the tree is truncated. There is also a 900-node render cap; when it is hit, the toolbar shows "Some branches are collapsed to keep the map fast." On huge projects, some branches stay collapsed to keep the map responsive.

Can I create or edit issues directly from the mind map?

No. The map is read-only for the work itself. You cannot create, rename, reassign, restatus, delete, or connect issues from it. Clicking a node only expands, collapses, or navigates. To edit a ticket, click through to its issue page.

How do I find a specific ticket in a big mind map without expanding everything?

Use the Filter nodes… box. Type your text, and non-matching pills dim to about 30% opacity while any branch containing a match force-expands and auto-opens its ancestors, so matches are never hidden behind a collapsed parent. The view re-fits shortly after you stop typing.

Can I export or share the mind map, and in what format?

You can export the current view as a flat PNG (mindmap.png) using the Export image button in the top-right panel. That is the only export. There is no SVG, no PDF, and no shareable live link, so arrange and expand the map the way you want it read before exporting.

Related reading

Add a comment

Start the conversation.