3. Layout & Domains

3.1 Smart Auto-Layout Engine vs. Manual Layout

MindLogic provides a powerful layout engine capable of automatically analyzing the network topology between nodes and expanding them into a tree structure.

  • Auto-Layout:
    • The engine is enabled by default. As you add nodes or connections, the system will automatically arrange the hierarchy of the entire graph like a growing tree.
    • In the "Global Layout" section of the sidebar, you can freely adjust the growth direction of the graph (e.g., "Left to Right", "Top to Bottom").
    • You can also adjust the Compactness to make the entire graph denser or more spacious.
  • Free Layout (Local):
    • If you wish to break the overall auto-layout rules and have complete control over the position of a specific node or group of nodes, you can select the node or Group, and manually enable the Free Layout option in the "Element Settings" of the sidebar.
    • In this mode, the node or group will detach from the auto-layout tree, and you can drag it freely to any location.

3.2 Canvas Layout Control Panel

At the bottom center of the canvas, there is a slider panel dedicated to fine-tuning the visual layout (click the "settings" icon at the bottom to expand it):

  1. Horizontal & Vertical Spacing:
    • There are sliders on the left and bottom of the panel. They are used to globally adjust the horizontal spacing and vertical spacing between nodes during auto-layout.
    • This helps you quickly switch between a dense and a spacious view.
  2. Max Width Multiplier:
    • Determines the global maximum width limit for nodes before text wrapping occurs.
    • Troubleshooting: If adjusting this slider doesn't affect a specific node, it might be because you manually dragged and resized that node previously. You can select that node and click "Reset Size" at the bottom of the element property panel on the right to restore its compliance with the global width.
  3. Line Thickness:
    • Used to globally and uniformly adjust the thickness of all connecting lines.
    • Troubleshooting: If a specific line's thickness doesn't change, it might be because you individually overrode its settings in its dedicated property panel. To restore the global influence, select the line and click "Reset Style" in the property panel on the right.

3.3 Custom Size & Reset

Regardless of whether a node is in auto-layout or free layout mode (Note: except for plain text nodes in auto-layout mode), you can freely adjust its size:

  • Drag to Resize: Select any entity in the graph, and a small blue dot will appear in its bottom-right corner. Click and drag this blue dot to freely adjust the node's width and height.
  • Reset Size: If you stretch a node out of proportion and want to restore it to the default size that best fits the text content, simply double-click the blue dot in the bottom-right corner; alternatively, click the Reset Size button at the bottom of the "Element Settings" sidebar to instantly revert it.

3.4 Domain Configurations & Semantic Visuals

This is an exclusive advanced feature of MindLogic. In the "Domain Settings" of the sidebar, you can manage "Visual Preset Libraries" established based on your business lines.

What is a Domain Dictionary?

Imagine you are drawing a complex IT architecture diagram. You can designate an "R&D Domain", where you pre-define that a "Database" is a blue rounded rectangle, and a "Microservice" is a purple hexagon. When you assign a specific type to nodes, they will automatically adopt the corresponding color and shape without needing individual adjustments. This ensures your entire graph maintains high business semantic recognizability.

Advanced Interactive Operations:

In the "Domain Settings" panel, expanding a domain will reveal a set of specific type labels (e.g., "Database", "Cache").

  1. Drag-to-Create: Click and hold a specific type label, then drag it directly onto the canvas to quickly create a node of that type!
  2. Shift + Double-Click (Mac): If you want to batch select all "Database" nodes in the graph, simply hold Shift and double-click the type name in the domain panel to instantly highlight all corresponding nodes in the graph.
  3. Option + Double-Click (Mac): First, marquee select a batch of unclassified nodes on the canvas, then hold the Option key and double-click a specific type in the domain panel to instantly convert all these nodes to the target type, automatically applying the corresponding color and shape.