icon
menu

Relation Perspectives

Relation perspectives show relations between resources. Relation perspectives are perfect for showing dependencies, ownership, responsibility and other relations between your resources. Generally, relation perspectives are best for showing static relationships between resources, while sequence perspectives are best for showing dynamic relationships.

An Ilograph diagram with a relation perspective

To create a relation perspective, simply declare relations in your perspective using the relations property.

Basic relations

In Ilograph source, relations are defined like so:

# Resource tree omitted
...
perspectives:
- name: Service
  relations:
  - from: MiniChat
    to: WhosWho
  - from: Quick Send
    to: WhosWho
  - from: Quick Send
    to: LongStore
...

When rendered, this perspective might look like the following:

An Ilograph diagram with a basic relation perspective

Though there isn’t much detail yet, this perspective shows which services (WhosWho and LongStore) are used by which applications (MiniChat and Quick Send).

Combining relations using commas

We can combine two of the above relations by defining multiple resources in the to property, separated by commas:

...
  relations:
  - from: MiniChat
    to: WhosWho
  - from: Quick Send
    to: WhosWho, LongStore # Use commas to separate resources
...

This short-hand can be used wherever resources are referenced.

Relation labels and colors

We can make relations more explicit by adding labels to their arrows:

...
perspectives:
- name: Service
  defaultArrowLabel: Depends On
  relations:
...

All of the arrows in this perspective are now labeled:

An Ilograph diagram with a basic relation perspective with labels

As the name defaultArrowLabel implies, this label is used only for relations that don’t have an explicit label. Use the label property set the arrow label on individual relations:

...
  - from: Quick Send
    to: WhosWho
    label: Uses
...

An Ilograph diagram with a basic relation perspective with custom labels

Relations can also be given a color. This can be done individually, using the color property on the relation, or using the defaultArrowColor property on the perspective.

Relation descriptions

If you would like to say more about a relation than will fit in a label, you can add that in its description property.

...
  - from: Quick Send
    to: WhosWho
    label: Uses
    description: Retrieves user information and permissions
...

The description appears when the user mouses-over the relation label. On mobile, the description appears when the user taps the label:

Relation descriptions can contain multiple lines and markdown.

Secondary relations

By default, relations affect the layout of a perspective. Occasionally, you may want to draw an arrow beteween two resources in a perspective without it re-arranging the perspective’s layout. To do this, set the secondary property to true on the relation.

Orientation

Relation perspectives are rendered with one of three orientation values. They are leftToRight, topToBottom and ring. Ring is useful when documenting many loosly-coupled resources with the same or similar relations. The default is leftToRight. orientation is a property of each perspective.