Data backed shapes represent objects on a page that are defined and generated from a provided dataset. Each data backed shape object includes a type that defines what object it is and how it will be parsed and must be linked to a set of data from which the objects will be generated.

Common Properties

These properties are used by all data backed shapes. Additional configuration properties for each data backed shape are listed with the description of the shape.

Property	Description
`id`	ID Identifier for a given data backed shape (must be unique).	Required
`type`	String The type of data backed shape. An example for each data backed shape is list below.	Required

Org Charts

An Org Chart is a data backed shape that is used to represent the organizational structure of a group of people.

🚧
Org charts are limited to a total size for 4000 users summed across all pages of the document.

Org Chart Format

Property	Description
`position`	AbsolutePosition The absolute point that the top left corner of the generated content will be placed. Note that the size of the object is dependent on the size and layout of the data provided.	Required
`collectionId`	ID The id of the provided collection that the org chart will draw data from.	Required
`idField`	String Defines the name of the field in the collection that represents the primary key or ID of the identities in the collection. Primary keys should be unique.	Required
`foreignKeyField`	String Defines the name of the field in the collection that references the value of the `idField` of another identity in the collection.	Required
`nameField`	String Defines the name of the field that contains the name of the identity in the collection.	Required
`roleField`	String Defines the name of the field that contains the role of the identity in the collection. If included, the role will be displayed on the org chart by default.	Optional
`imageUrlField`	String Defines the name of the field that contains the URL pointing to an image of the identity in the collection.	Optional
`extraFields`	Array[String] An array of names of other fields in the collection that should be included on the org chart. By default, these fields will not appear on the org chart directly but can be accessed in the data panel for the org chart to define if they should be displayed.	Optional

{
    "id": "orgChart1",
    "type": "orgChart",
    "position": {
        "x": 150,
        "y": 150
    },
    "collectionId": "org-chart-data",
    "idField": "Employee ID",
    "foreignKeyField": "Supervisor ID",
    "nameField": "Full Name",
    "roleField": "Role",
    "imageUrlField": "Image",
    "extraFields": ["Email", "Cell Phone", "Building"]
}

Mind Map

A Mind Map Layout is a data backed shape that helps visually represent information to see connections between ideas.

🚧
Mind maps are limited to a total size of 4000 items summed across all pages of the document.

Mind Map Format

Property	Description
`position`	AbsolutePosition The absolute point that the top left corner of the generated content will be placed. Note that the size of the object is dependent on the size and layout of the data provided.	Required
`collectionId`	ID The id of the provided collection that the mind map will draw data from.	Required
`idField`	String Defines the name of the field in the collection that represents the primary key or ID of the identities in the collection. Primary keys should be unique.	Required
`parentIdField`	String Defines the name of the field in the collection that references the value of the `idField` of the parent node's ID. Root nodes should have this field empty or absent.	Required
`textField`	String Defines the name of the field that contains the text of the identity in the collection.	Required

{
  "id": "mindMap1",
  "type": "mindMap",
  "collectionId": "mind-map-data",
  "position": {
    "x": 150,
    "y": 150
  },
  "idField": "topicId",
  "parentIdField": "parentTopicId",
  "textField": "title"
}

UML Sequence

A UML Sequence Layout is a data backed shape that shows how objects and components interact to complete a process.

UML Sequence Format

Property	Description
`position`	AbsolutePosition The absolute point that the top left corner of the generated content will be placed. Note that the size of the object is dependent on the size and layout of the data provided.	Required
`markup`	String PlantUML-style sequence diagram markup. Must not be empty. Max length: 50,000 characters.	Required

{
  "id": "umlSequence1",
  "type": "umlSequence",
  "position": {
    "x": 150,
    "y": 150
  },
  "markup": "@startuml\nUser -> Webapp : Click on external auth\nnote over User: Initialization\nWebapp -> DjangoAPI : Authentication Request (TOKEN)\n\nnote over Webapp, DjangoUI: Browser opened with <b>url?asktkn=TOKEN</b>\nWebapp -> DjangoUI : Browser window\nDjangoUI -> ExtProvider : Auth request\nUser -> ExtProvider : Enter credentials\nExtProvider -> DjangoUI : Auth response\nDjangoUI -> DjangoAPI : Auth response\n\nUser -> Webapp : Click on auth. Done\nnote over User: or continuous polling\nWebapp -> DjangoAPI : Ask for token\nDjangoAPI -> Webapp : Retrieve token\n@enduml"
}

Assisted Layout

An Assisted Layout is a data backed shape that automatically wraps shapes on the page in an auto-layout container with intelligent line routing. Useful when you want Lucid to automatically arrange imported shapes rather than placing them at fixed coordinates.

Assisted Layout Format

Property	Description
`shapeIds`	Array[String] An array of IDs of specific shapes to wrap; if omitted, all shapes on the page are included in the layout container.	Optional

{
  "id": "assistedLayout1",
  "type": "assistedLayout",
  "shapeIds": ["shape-1", "shape-2", "shape-3"]
}