D2 SystemContextDiagram Spec¶

Source: d2.system-context-diagram.json

This schema describes the SystemContextDiagram spec for the D2 backend.

Properties¶

Properties

Field	Type	Description
`type(required)`	`string`	Type of the diagram. Must be exactly `SystemContextDiagram`.
`title`	`string` \| `null`	Optional diagram title.
`elements`	`array[Element]`	Top-level elements.
`boundaries`	`array[Boundary]`	Top-level boundaries.
`relationships`	`array[D2RelationshipSchema]`	Top-level relationships.
`render_options`	`D2RenderOptionsSchema`	D2-specific render options.
`backend(required)`	`string`	JSON schema backend. Must be exactly `d2`.

Examples

MinimalAdvanced

JSON source

{
  "backend": "d2",
  "type": "SystemContextDiagram",
  "elements": [
    {
      "type": "Person",
      "alias": "user",
      "label": "User"
    },
    {
      "type": "System",
      "alias": "app",
      "label": "My App"
    }
  ],
  "relationships": [
    {
      "type": "REL",
      "from": "user",
      "to": "app",
      "label": "Uses",
      "technology": "HTTPS"
    }
  ]
}

Rendered D2 source

direction: right
classes: {
  c4_person: {
    style.fill: "#f5f1ff"
    style.stroke: "#6f4bb2"
    style.font-color: "#211436"
  }
}
user: {
  label: "User"
  shape: c4-person
  class: ["c4_person"]
}
app: "My App"
user -> app: "Uses\n[HTTPS]"

Rendered image

JSON source

{
  "backend": "d2",
  "type": "SystemContextDiagram",
  "title": "Retail Platform",
  "elements": [
    {
      "type": "Person",
      "label": "Customer",
      "alias": "customer",
      "description": "Places orders through the storefront.",
      "properties": {
        "properties": [
          [
            "Role",
            "User"
          ],
          [
            "Visibility",
            "Public"
          ]
        ]
      }
    },
    {
      "type": "PersonExt",
      "label": "Support Agent",
      "alias": "support_agent",
      "description": "Handles issues in an external CRM.",
      "properties": {
        "properties": [
          [
            "Role",
            "External actor"
          ],
          [
            "Visibility",
            "Public"
          ]
        ]
      }
    },
    {
      "type": "SystemExt",
      "label": "Payment Gateway",
      "alias": "payment_gateway",
      "description": "Processes card payments.",
      "properties": {
        "properties": [
          [
            "Role",
            "External actor"
          ],
          [
            "Visibility",
            "Public"
          ]
        ]
      }
    },
    {
      "type": "SystemExt",
      "label": "CRM Platform",
      "alias": "crm_platform",
      "description": "External CRM used by support agents.",
      "properties": {
        "properties": [
          [
            "Role",
            "External actor"
          ],
          [
            "Visibility",
            "Public"
          ]
        ]
      }
    }
  ],
  "boundaries": [
    {
      "type": "EnterpriseBoundary",
      "label": "Acme Corp",
      "alias": "acme_enterprise",
      "description": "Internal systems owned by Acme.",
      "elements": [
        {
          "type": "System",
          "label": "Retail Platform",
          "alias": "retail_platform",
          "description": "Core platform for catalog, checkout, and order management.",
          "properties": {
            "properties": [
              [
                "Owner",
                "Commerce Platform"
              ],
              [
                "Availability",
                "99.95%"
              ]
            ]
          }
        }
      ],
      "boundaries": [],
      "relationships": [],
      "properties": {
        "properties": [
          [
            "Owner",
            "Acme Corp"
          ],
          [
            "Data region",
            "EU"
          ]
        ]
      }
    }
  ],
  "relationships": [
    {
      "type": "REL",
      "from": "customer",
      "to": "retail_platform",
      "label": "Browses and places orders",
      "technology": "HTTPS"
    },
    {
      "type": "REL",
      "from": "retail_platform",
      "to": "payment_gateway",
      "label": "Charges card",
      "technology": "REST API"
    },
    {
      "type": "REL",
      "from": "support_agent",
      "to": "crm_platform",
      "label": "Manages customer issues",
      "technology": "Web UI"
    }
  ],
  "render_options": {
    "layout": "dagre",
    "include_properties": true,
    "bidirectional_relationships": "single_edge"
  }
}

Rendered D2 source

direction: right
__title: ||md
  # Retail Platform
|| {
  near: top-center
}
classes: {
  c4_person: {
    style.fill: "#f5f1ff"
    style.stroke: "#6f4bb2"
    style.font-color: "#211436"
  }
  c4_external: {
    style.fill: "#f7f7f7"
    style.stroke: "#767676"
    style.stroke-dash: "5"
  }
}
customer: ||md
  ## Customer

  [Person]

  Places orders through the storefront.

  | Property | Value |
  | --- | --- |
  | Role | User |
  | Visibility | Public |
|| {
  shape: c4-person
  class: ["c4_person"]
}
support_agent: ||md
  ## Support Agent

  [Person]

  Handles issues in an external CRM.

  | Property | Value |
  | --- | --- |
  | Role | External actor |
  | Visibility | Public |
|| {
  shape: c4-person
  class: ["c4_person"; "c4_external"]
}
payment_gateway: ||md
  ## Payment Gateway

  [Software System]

  Processes card payments.

  | Property | Value |
  | --- | --- |
  | Role | External actor |
  | Visibility | Public |
|| {
  shape: rectangle
  class: ["c4_external"]
}
crm_platform: ||md
  ## CRM Platform

  [Software System]

  External CRM used by support agents.

  | Property | Value |
  | --- | --- |
  | Role | External actor |
  | Visibility | Public |
|| {
  shape: rectangle
  class: ["c4_external"]
}
acme_enterprise: {
  label: ||md
    ## Acme Corp

    [Enterprise]

    Internal systems owned by Acme.
  ||
  shape: rectangle
  retail_platform: ||md
    ## Retail Platform

    [Software System]

    Core platform for catalog, checkout, and order management.

    | Property | Value |
    | --- | --- |
    | Owner | Commerce Platform |
    | Availability | 99.95% |
  || {
    shape: rectangle
  }
}
customer -> acme_enterprise.retail_platform: "Browses and places orders\n[HTTPS]"
acme_enterprise.retail_platform -> payment_gateway: "Charges card\n[REST API]"
support_agent -> crm_platform: "Manages customer issues\n[Web UI]"

Rendered image

Definitions¶

About labels and aliases

label is a display name for the element.

alias is a unique identifier used for referencing elements in relationships and layouts. If omitted, it is generated automatically.

You can also use label for referencing elements in relationships and layouts, but each label must be unique within the diagram.

D2BoundarySchema¶

D2 JSON schema for a generic boundary.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `Boundary`.
`elements`	`array[Element]`	Elements nested inside this boundary.
`boundaries`	`array[Boundary]`	Boundaries nested inside this boundary.
`relationships`	`array[D2RelationshipSchema]`	Relationships declared inside this boundary.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2EnterpriseBoundarySchema¶

D2 JSON schema for an enterprise boundary.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `EnterpriseBoundary`.
`elements`	`array[Element]`	Elements nested inside this boundary.
`boundaries`	`array[Boundary]`	Boundaries nested inside this boundary.
`relationships`	`array[D2RelationshipSchema]`	Relationships declared inside this boundary.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2PersonExtSchema¶

D2 JSON schema for an external person.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `PersonExt`.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2PersonSchema¶

D2 JSON schema for a person.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `Person`.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2RelationshipSchema¶

JSON schema for relationships supported by D2 C4 diagrams.

Properties

Field	Type	Description
`type(required)`	`RelationshipType`	Type of the relationship.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Additional details about the relationship.
`from(required)`	`string`	The source element alias (or unique label).
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	The label shown on the relationship edge.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`technology`	`string` \| `null`	The technology used in the communication.
`to(required)`	`string`	The destination element alias (or unique label).
`tooltip`	`string` \| `null`	Optional D2 tooltip.

RelationshipType¶

Relationship types supported by D2 C4 diagrams.

Items

Type	Description
`BI_REL`	A bidirectional relationship between two elements.
`REL`	A unidirectional relationship between two elements.

D2SystemBoundarySchema¶

D2 JSON schema for a system boundary.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `SystemBoundary`.
`elements`	`array[Element]`	Elements nested inside this boundary.
`boundaries`	`array[Boundary]`	Boundaries nested inside this boundary.
`relationships`	`array[D2RelationshipSchema]`	Relationships declared inside this boundary.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2SystemDbExtSchema¶

D2 JSON schema for an external database-like system.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `SystemDbExt`.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2SystemDbSchema¶

D2 JSON schema for a database-like system.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `SystemDb`.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2SystemExtSchema¶

D2 JSON schema for an external software system.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `SystemExt`.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2SystemQueueExtSchema¶

D2 JSON schema for an external queue-like system.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `SystemQueueExt`.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2SystemQueueSchema¶

D2 JSON schema for a queue-like system.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `SystemQueue`.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

D2SystemSchema¶

D2 JSON schema for a software system.

Properties

Field	Type	Description
`type(required)`	`string`	Discriminator identifying the element type. Must be exactly `System`.
`alias`	`string` \| `null`	Unique identifier for the element. If not provided, it is autogenerated from the label.
`classes`	`array[string]`	Optional D2 classes.
`description`	`string` \| `null`	Optional description text.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Optional D2 layout direction for a container.
`icon`	`string` \| `null`	Optional D2 icon URL.
`label(required)`	`string`	Display name for the element.
`link`	`string` \| `null`	Optional D2 link URL.
`near`	`string` \| `null`	Optional D2 near reference.
`properties`	`DiagramElementPropertiesSchema`	Optional property table metadata.
`shape`	`string` \| `null`	Optional D2 shape.
`style`	`D2StyleSchema`	Optional D2 style attributes.
`tooltip`	`string` \| `null`	Optional D2 tooltip.

DiagramElementPropertiesSchema¶

JSON schema for tabular diagram element properties.

Properties

Field	Type	Description
`header`	`array[string]`	Header columns. Default: `["Property", "Value"]`.
`properties(required)`	`array[array[string]]`	List of rows (each row is a list of string values).
`show_header`	`boolean`	Whether to display the header row. Default: `true`.

D2 Render Options¶

D2RenderOptionsSchema¶

Render options for the D2 renderer.

Properties

Field	Type	Description
`auto_number_relationships`	`boolean`	Auto Number Relationships Default: `false`.
`bidirectional_relationships`	`enum[two_edges \| single_edge]`	Bidirectional Relationships Default: `two_edges`.
`direction`	`enum[up \| down \| left \| right]` \| `null`	Direction Default: `right`.
`fully_qualified_relationships`	`boolean`	Fully Qualified Relationships Default: `true`.
`include_properties`	`boolean`	Include Properties Default: `false`.
`include_technology`	`boolean`	Include Technology Default: `true`.
`include_type_label`	`boolean`	Include Type Label Default: `true`.
`layout`	`enum[dagre \| elk]`	Layout Default: `dagre`.
`legend`	`D2LegendSchema`
`sequence_diagram`	`boolean`	Sequence Diagram Default: `false`.
`theme`	`integer` \| `null`	Theme
`title_near`	`enum[top-left \| top-center \| top-right \| center-left \| center-right \| bottom-left \| bottom-center \| bottom-right]` \| `null`	Title Near Default: `top-center`.

D2StyleSchema¶

D2 style attributes used by D2 render options.

Properties

Field	Type	Description
`animated`	`boolean` \| `null`	Animated
`bold`	`boolean` \| `null`	Bold
`border_radius`	`integer` \| `null`	Border Radius
`double_border`	`boolean` \| `null`	Double Border
`fill`	`string` \| `null`	Fill
`fill_pattern`	`string` \| `null`	Fill Pattern
`font`	`string` \| `null`	Font
`font_color`	`string` \| `null`	Font Color
`font_size`	`integer` \| `null`	Font Size
`italic`	`boolean` \| `null`	Italic
`multiple`	`boolean` \| `null`	Multiple
`opacity`	`number` \| `null`	Opacity
`shadow`	`boolean` \| `null`	Shadow
`stroke`	`string` \| `null`	Stroke
`stroke_dash`	`integer` \| `null`	Stroke Dash
`stroke_width`	`integer` \| `null`	Stroke Width
`text_transform`	`string` \| `null`	Text Transform
`three_d`	`boolean` \| `null`	Three D
`underline`	`boolean` \| `null`	Underline

D2LegendSchema¶

Structured D2 legend render options.

Properties

Field	Type	Description
`items`	`array[D2LegendElementSchema\|D2LegendRelSchema]`	Items
`label`	`string`	Label Default: `Legend`.

D2LegendElementSchema¶

Schema for a D2 legend node sample.

Properties

Field	Type	Description
`type(required)`	`string`	Legend item discriminator. Must be exactly `element`.
`alias`	`string` \| `null`	Optional D2 identifier.
`classes`	`array[string]`	Classes
`icon`	`string` \| `null`	Icon
`label(required)`	`string`	Legend item label.
`shape`	`string` \| `null`	Shape
`style`	`D2StyleSchema`

D2LegendRelSchema¶

Schema for a D2 legend relationship sample.

Properties

Field	Type	Description
`type(required)`	`string`	Legend item discriminator. Must be exactly `relationship`.
`alias`	`string` \| `null`	Optional D2 identifier.
`bidirectional`	`boolean`	Bidirectional Default: `false`.
`classes`	`array[string]`	Classes
`hide_endpoints`	`boolean` \| `null`	Hide Endpoints
`label(required)`	`string`	Legend item label.
`source`	`string` \| `null`	Source
`style`	`D2StyleSchema`
`target`	`string` \| `null`	Target

D2 SystemContextDiagram Spec¶

Properties¶

Elements¶

Boundaries¶

Relationships¶

Definitions¶

D2BoundarySchema¶

D2EnterpriseBoundarySchema¶

D2PersonExtSchema¶

D2PersonSchema¶

D2RelationshipSchema¶

RelationshipType¶

D2SystemBoundarySchema¶

D2SystemDbExtSchema¶

D2SystemDbSchema¶

D2SystemExtSchema¶

D2SystemQueueExtSchema¶

D2SystemQueueSchema¶

D2SystemSchema¶

DiagramElementPropertiesSchema¶

D2 Render Options¶

D2RenderOptionsSchema¶

D2StyleSchema¶

D2LegendSchema¶

D2LegendElementSchema¶

D2LegendRelSchema¶