Objects embeds an Objects diagram directly in MDX specs and artifact pages. Child content is YAML that controls which objects and links appear on the diagram, which nodes are highlighted, and how the scope expands around matched objects.

When to use

• Visualizing a slice of the model (a system, container, or subtree) inside architecture or feature specs
• Highlighting focus objects while showing related neighbors, parents, or children
• Filtering diagram links by tags or attributes alongside object include/exclude rules

Supported props

* On specs pages there is no model route context — set model_key explicitly.

YAML configuration

Pass YAML as raw text or a fenced ```yaml block inside <Objects>. The parser accepts either a top-level filters: block or shorthand keys at the root.

filters — objects and links

filters:
  objects:
    include:
      id:
        - some.id.of.object
        - some.part_id.of.objects.*
        - '*'          # any object
    exclude:
      id:
        - some.id.to.remove
  links:
    include:
      tags:
        - internal:api
        - internal:*
    exclude:
      attributes:
        - key: attr1
          value: '*'

When filters.objects.include.id is omitted or empty, all objects match the include step (subject to exclude rules).

Scope options

These keys sit at the root of the YAML document (alongside filters, not inside it).

settings

ID patterns

Object id patterns use the same rules as the model editor diagram scope:

• * — matches any object id
• product.edge — exact id, or a suffix match (e.g. other.product.edge)
• product.edge.* — the id product.edge and every id under that prefix (e.g. product.edge.edge_agent)

Link tag patterns

• * — matches any tag
• internal:api — exact tag
• internal:* — tag group internal and any tag starting with internal:

Attribute exclude rules match when a link has an attribute whose key matches key and whose value matches value (* matches any value).

Rich-text editor

Insert Objects Diagram from the IOModel toolbar menu (or edit an existing block in rich-text view):

• model_key — dropdown of project models (display name with the model key in smaller text)
• filters (YAML) — textarea for the full YAML document; prefer this field or Source view when editing lists and * patterns (rich text can treat them as markdown)

Examples

Basic object and link filters

Source syntax

<Objects model_key="deployment">
```yaml
filters:
  objects:
    include:
      id:
        - 'iomodel.*'
    exclude:
      id:
        - 'iomodel.keycloak'
  links:
    include:
      tags:
        - 'flow:*'
    exclude:
      attributes:
        - key: protocol
          value: async
```
</Objects>

Rendered output

Scoped diagram with selection and expansion

Use selected to highlight focus objects while filters controls what appears on the canvas. Combine with show_parents, show_childs, and include_objects_by_links to show context around the focus area.

<Objects model_key="example-iot">
```yaml
selected:
  objects:
    include:
      id:
        - product.edge

include_objects_by_links: true
show_parents: true
show_childs:
  enabled: true
  recursive: true

filters:
  objects:
    include:
      id:
        - product.edge.*
```
</Objects>

In this example:

• filters limits the diagram to the Edge subtree
• selected highlights the product.edge container
• show_parents keeps ancestors such as product visible
• show_childs with recursive: true includes all Edge components
• include_objects_by_links adds one-hop neighbors linked from Edge objects

Common pitfalls

• Using nested JSX tags like <Object /> — only YAML configuration is supported
• Omitting model_key on specs pages outside model routes
• Invalid YAML in children, which disables filtering and falls back to the full diagram
• Editing filter YAML in rich text without the YAML textarea — * and list syntax may be altered by the markdown parser; use the filters (YAML) field or Source view