Trees & mindmaps

layout: tree reads |topic| nesting as the hierarchy and draws the branch wires for you. A mindmap is that same tree wearing a preset.

Nesting is the whole structure

{
  layout: tree;
  |topic| { fill: --purple-wash; stroke: --purple-deep; color: --purple-ink; }
}

|topic#ceo| "Chief Executive" [
  |topic#eng| "Engineering" [
    |topic| "Platform"
    |topic| "Product"
  ]
  |topic#ops| "Operations" [
    |topic| "Support"
    |topic| "Finance"
  ]
]
Chief Executive Engineering Platform Product Operations Support Finance

There are no links in that source. Every wire was generated — one fan per parent — and lini desugar will show you them.

A tree scope holds exactly one root topic. Inside a topic’s [ ]:

  • a |topic| is a branch;
  • anything else is that topic’s own content, which is how an icon or a caption rides along. The last figure on this page uses it.

Which way it grows

{
  layout: tree; direction: row; gap: 48 20;
  |topic| { fill: --rose-wash; stroke: --rose-deep; color: --rose-ink; }
  |-| { stroke: --rose-deep; }
}

|topic#req| "Request" [
  |topic#triage| "Triage" [
    |topic| "Approve"
    |topic| "Reject"
    |topic| "Escalate"
  ]
  |topic#auto| "Auto-close" [
    |topic| "Duplicate"
  ]
]
Request Triage Approve Reject Escalate Auto-close Duplicate

Three directions, and each one is a different document:

  • column (the default) grows down — an org chart.
  • row grows right — an outline, like this one.
  • bilateral grows both ways from a centred root — a mindmap.

gap: reads two numbers here: the distance between generations first, then the separation between siblings.

The mindmap preset

|mindmap#launch| "Launch" [
  |topic#product| "Product" [
    |topic| "MVP scope"
    |topic| "Docs and a playground"
  ]
  |topic#market| "Marketing" [
    |topic| "Site"
    |topic| "Launch post"
  ]
  |topic#sales| "Sales" { side: left; } [
    |topic| "Leads"
    |topic| "Pricing page"
  ]
  |topic#team| "Team" [
    |topic| "Hiring plan"
  ]
]
Launch Product MVP scope Docs and aplayground Marketing Site Launch post Sales Leads Pricing page Team Hiring plan

|mindmap| is the visible root topic with a whole scene preset folded in — none of the colour above is written:

  • direction: bilateral, and routing: natural for the smooth arms.
  • A palette walk: each first-level branch takes the next hue and tints its whole subtree — wash fill, deep stroke and wire, ink text.
  • A depth ramp that sizes the type down by level.
  • A max-width, so a long topic wraps into a card instead of running away.

Bilateral fills the right side first. side: left on a first-level topic overrides the split, which is what moved Sales across.

Flaring one arm

{
  .lini-level-1 { font-weight: bold; }
  .lini-level-2 { font-size: 12; color: --muted; }
  #build |-| { stroke-style: dashed; }
  .now {
    fill: --rose-wash; stroke: --rose-deep; color: --rose-ink;
    stroke-width: 2.5; font-size: 15; padding: 10 16;
  }
  |when::block| { font-size: 11; color: --muted; }
}

|mindmap#plan| "Plan" [
  |topic#build| "Build" [
    |icon| { symbol: gear; width: 18; height: 18; stroke: --purple-deep; fill: none; }
    |topic#compiler| "Compiler"
    |topic| "Formatter"
  ]
  |topic#ship| "Ship" .now [
    |icon| { symbol: rocket; width: 20; height: 20; stroke: --rose-deep; fill: none; }
    |topic| "Binary"
    |topic| "Crate"
    |when| "this quarter"
  ]
  |topic#docs| "Docs" { side: left; } [
    |topic| "The tour"
    |topic| "Reference"
  ]
  |topic#test| "Test" { side: left; } [
    |topic#conformance| "Conformance"
    |topic| "Snapshots"
  ]
]

plan.docs ~> plan.test
Plan Build Compiler Formatter Ship this quarter Binary Crate Docs The tour Reference Test Conformance Snapshots

Everything on that figure is reachable from the stylesheet:

  • A tier at a time. Every topic wears a generated .lini-level-N class, root at 0 — so one rule restyles a whole generation.
  • One arm at a time. A branch link cascades as if it were written inside its parent, so #build |-| { } dashes exactly the wires under Build and nothing else.
  • One topic. A class does what it does anywhere else: .now flares Ship out of the palette walk.
  • Content rides along. The two |icon| children and the |when| block are ordinary content in a topic’s [ ], not branches, so they decorate without joining the hierarchy.

Authored cross-links between topics stay legal and never alter the tree — plan.docs ~> plan.test is the wavy one, drawn over the generated ones.

Go deeper

Flow, grid, stack & tree has the placement rules; the |topic| and |mindmap| bundles are in templates.