In an Ilograph diagram, the resource tree not only helps organize resources, but it enables context nodes in perspectives:

Ilograph diagram showing resources inside a parent resource

There are multiple perspectives in an diagram, but only one resource tree, so by default resources will always have the same context nodes in every perspective. We can, however, show resources inside different context nodes using contexts. When multiple contexts are defined in a diagram, users can select these contexts using a drop-down in the top-right of the app:

Notice how the relations (arrows) remain the same but the layout of the diagram changes when different contexts are selected. This allows the viewer to see the same perspectives with different contextual information.

Defining contexts


Consider an AWS Ilograph diagram that defines resources in terms of what AWS service they belong to:

- from: ilograph/aws
  namespace: AWS

- name: Amazon Web Services
  instanceOf: AWS::AWS Instance
  - name: Lambda
    instanceOf: AWS::Lambda
    - name: getOrder
      instanceOf: AWS::Lambda::Function
    - name: getUser
      instanceOf: AWS::Lambda::Function
  - name: API Gateway
    instanceOf: AWS::ApiGateway
    - name: Order
      instanceOf: AWS::ApiGateway::Resource
    - name: User
      instanceOf: AWS::ApiGateway::Resource

Notice that the red resources are defined in the resource tree as children of the blue resources (the AWS services). Let’s also define a simple perspective to show how the red resources are releated:

- name: Dependency
  defaultArrowLabel: Calls
  - from: Order
    to: getOrder
  - from: User
    to: getUser

When this perspective is rendered, the red resources appear inside the blue ones:

Ilograph diagram showing resources inside parent resources

Adding a context

Almost all AWS resources are created in regions, which define their physical location on earth. While our four resources exist in their respective AWS services, we may also want to show them inside of their regions as well. We can do this while not modifying our resources (or perspective) using contexts. Contexts are defined using the top-level contexts property:

- name: us-east-1
  instanceOf: AWS::Region
- name: us-east-2
  instanceOf: AWS::Region
- name: Region
  - resourceId: Amazon Web Services
    - resourceId: us-east-1
      - resourceId: Order, getOrder
    - resourceId: us-east-2
      - resourceId: User, getUser

We’ve created two new resources (us-east-1 and us-east-2) in our resource tree. We’ve also added a context (named Region) to the new contexts section. This context defines its top-level roots, in this case Amazon Web Services. It then defines us-east-1 and us-east-2 to be childen of Amazon Web Services, and our four red resources as children of either one or the other region.

When this diagram is rendered, a new context drop-down appears in the top-right of the app, allowing the user to select our new context (Region):

The context select control

When this context is selected, or red resources now appear in their specified regions. Notice that the relations (arrows) haven’t changed:

The context select control

Switching between makes their differences clearer:

Multiple contexts can be added to a diagram. Click here to view a sample Ilograph diagram with multiple contexts.

Extending contexts

Like perspectives, a context can extend one or more previously-defined contexts by specifying the extended context(s) in its extends property. The extending context will inherit the declared context tree of the extended context(s).

Hiding contexts

Contexts can be hidden in the context drop-down by setting their hidden property to true. This is useful when creating contexts that are intended to be extended by other contexts.

Default context display name

In the context drop-down, the context defined by the resource tree is called “Default”. This name can be changed to something else using the defaultContextDisplayName top-level property.