Properties Panel
The Properties panel appears on the right side when you select a node, edge, or group. It’s where you configure details that don’t belong directly on the canvas.
Node properties
Section titled “Node properties”When you select a node, the panel shows:
Identity
Section titled “Identity”- Name — click to edit inline
- Kind — the node type (person, system, container, etc.)
- Technology — framework or platform, with autocomplete suggestions
- Shape — pick from 7 shapes (rectangle, person, cylinder, pipe, trapezoid, bucket, hexagon)
- External — toggle for system nodes (marks as third-party)
Status
Section titled “Status”A segmented control to set the node’s status: Proposed, Implemented, Verified, Vagrant, or none. See Status Tracking.
When a status is set, you can add a reason — “Needs auth middleware”, “All tests passing”, etc. This appears as context in the task system.
Description
Section titled “Description”What this node is — its role and purpose. Keep it concise and architectural. This is visible on the canvas and in the model export.
Max 200 characters. A subtle counter appears when you’re close to the limit.
Implementation details, deployment context, conventions — anything useful during development but not part of the architectural identity. Notes are inherited by descendant nodes when AI agents request tasks.
Source locations
Section titled “Source locations”File patterns that link this node to code in your project. See Source Mapping.
Contracts
Section titled “Contracts”Expect/ask/never rules for AI implementation. See Contracts.
Edge properties
Section titled “Edge properties”When you select an edge:
- Label — description of the relationship
- Method — protocol or mechanism (REST, gRPC, SQL, etc.)
Group properties
Section titled “Group properties”When you select a group:
- Name — the group’s display name
- Description — what this group represents
- Members — list of nodes in the group
- Contracts — rules that apply to the group
Multi-selection
Section titled “Multi-selection”Select multiple nodes (Shift + drag) to see bulk actions:
- Create group — wrap the selected nodes in a new group
- Add to group — add them to an existing group
Code-level content
Section titled “Code-level content”When viewing a component, the panel shows sub-sections for the component’s code-level children:
- Models — data structures with their properties
- Operations — functions and handlers
- Processes — multi-step workflows
Each section has a + button to add new items. Click any item to see and edit its details.