Porphyry.js v1.6.2

Layout Modes

Set via options.layout at init time, or by mutating instance.options.layout before calling render() again.

Collapsible Branches

When interactions.collapse is enabled, a small circular toggle button appears at the child-facing edge of every non-root node that has children.

• Shows − when the subtree is expanded, + when collapsed.
• Button color matches the node's branch color; hover inverts fill and icon.
• Collapsed nodes are treated as leaves by the layout engine — the rest of the tree reflows automatically around them.
• Button position adapts to layout direction: left/right edge in horizontal layouts, top/bottom edge in vertical layouts.
• Collapse state is preserved across re-renders triggered by layout changes or data edits.
• Calling render() clears all collapse state and restores the full tree.

const map = new Porphyry('#map', {
  interactions: { collapse: true }
});

map.render(data);

// Programmatically collapse a branch by its internal ID
// (IDs assigned depth-first, root = 0)
map._collapsed.add(3);
map._renderInternal(false); // re-render, no re-fit

Methods

const map = new Porphyry('#map', {
  layout: 'auto',
  interactions: { pan: true, zoom: true, collapse: true, hud: true, tips: true, download: true },
  colors: ['#E05C5C', '#4A90D9', '#4CAF82'],
  branchSpacingX: 200,
});

map.render(myData);

// Switch to vertical layout and re-render
map.options.layout = 'down';
map.render(myData);

// Toggle pan off at runtime
map.options.interactions.pan = false;
map._rebindInteractions();

SVG Download

The downloadSVG() method exports the current mind map as a clean, self-contained SVG file that opens in browsers, Illustrator, Inkscape, and any SVG editor.

There are three ways to expose it depending on your use case:

// Option 1 — download icon appears inside the HUD alongside zoom controls
new Porphyry('#map', {
  interactions: { hud: true, download: true }
});

// Option 2 — standalone button injected in the bottom-right corner
new Porphyry('#map', {
  interactions: { download: true }
});

// Option 3 — no button, wire your own trigger anywhere on the page
document.getElementById('my-btn').addEventListener('click', () => {
  map.downloadSVG('my-diagram.svg'); // filename is optional
});

Node Links & Actions

Any node can be made interactive with either a url or an onclick handler. If both are set, url takes priority.

url — external link

• A small ↗ icon appears inside the node on the right side.
• The cursor changes to a pointer on hover.
• Clicking opens the URL in a new tab (noopener noreferrer).
• A drag that moves more than 5 px never triggers the link, so panning over linked nodes is safe.

{ topic: "React", url: "https://react.dev" }

onclick — custom handler

• A small ▶ icon appears inside the node on the right side.
• The cursor changes to a pointer on hover.
• Clicking calls your function, receiving the node object as its argument.
• Drag-to-pan is still safe — the handler only fires on non-drag clicks.

{ topic: "Run Report", onclick: function(node) { alert(node.topic); } }

To hide the icons while keeping click behaviour, set showLinkIcons: false.

Text Wrapping

Long node labels wrap automatically. Each depth level has a configurable maxWidth. Text is measured with a hidden Canvas element before layout so node dimensions are always exact — the layout engine never needs to re-run after drawing.

• Words are greedily packed onto lines.
• A single word wider than maxWidth gets its own line rather than being clipped.
• Multi-line branch nodes (depth 1) switch from a pill shape to a rounded rectangle (rx=10) automatically.
• All vertical spacing accounts for the actual wrapped height, so nodes never overlap.

Adaptive Column Spacing

In horizontal layouts, column gaps scale down automatically as the tree gets deeper, keeping wide maps readable without manual tuning.

The floor is 45 % of the configured defaults. Vertical layouts are unaffected.

Automatic Width Scaling

When a container has significantly more horizontal space than vertical (horizontal-to-vertical ratio > 1.5×), the library automatically scales up node maxWidth values before layout — by up to 2.5× — so text wraps less and the map fills the available width. This happens transparently on every render; no configuration is needed.