These docs are for v1.0. Click to read the latest docs for v1.2.

Types

TypeExampleDescription
BooleantrueAn RFC7159 JSON boolean value.
String"title"An RFC7159 JSON string value.
Number102 or1.02E2An RFC7159 JSON number value.
Integer18567An integer value formatted as an RFC7159 JSON number value.
Decimal123.45A decimal value formatted as an RFC7159 JSON number value.
Color#32a834A hexadecimal RGB string representing a color. See Web Colors for implementation details.
DateTime2020-06-26T16:29:37ZThe date formatted as an RFC3339 timestamp string in the UTC time zone.
Timestamp1605732868411Number of milliseconds since the Unix epoch (January 1, 1970 in the UTC timezone).
UUID110808fd-4553-4316-bccf-4f25ff59a532A universally unique identifier (UUID) in the canonical textual representation format.
URIhttps\://lucid.app/lucidchart/328caaff-08d6-4461-bd52-bb2fbd556420/editA uniform resource identifier (URI) as defined in RFC3986.
Array["in progress"] or [1, 2, 3]An array of values of other primitive types.
MapMap[String,String] or Map[String,Optional[String]]A JSON object as defined in RFC7159.
ID"block-1"A string of one to thirty-six characters that are either alphanumeric or one of the following: -_.~

Actions

Actions allow a resource to execute an event when selected. The different types of actions are described below.

GoTo Document

Open another Lucid document.

PropertyDescription
documentIdUUID
The Lucid document to open. Action will fail if the documentId does not exist or the user does not have access.
Required
pageIdID
Page to open on the document. Actions will fail if the page is not valid.
Required
newWindowBoolean
Open the document in the current window or a new window. The default behavior is to open the document in the same window.
Optional
{
    "type": "gotoDocument",
    "documentId": "110808fd-4553-4316-bccf-4f25ff59a532",
    "pageId": "page1",
    "newWindow": true
}

GoTo Page

Switch to a different page on the current document.

PropertyDescription
pageIdID
Page to open on the current document. Actions will fail if the page is not valid.
Required
{
    "type": "gotoPage",
    "pageId": "page1"
}

Hide Layer

Hide one or more layers on the current document.

PropertyDescription
layersArray[ID]
Array of layer IDs to hide.
Required
{
    "type": "hideLayer",
    "layers": [
        "layer1",
        "layer2"
    ]
}

Show Layer

Show one or more layers on the current document.

PropertyDescription
layersArray[ID]
Array of layer IDs to show.
Required
{
    "type": "showLayer",
    "layers": [
        "layer1",
        "layer2"
    ]
}

Toggle Layer

Toggle between hidden or shown for one or more layers on the current document.

PropertyDescription
layersArray[ID]
Array of layer IDs to toggle.
Required
{
    "type": "toggleLayer",
    "layers": [
        "layer1",
        "layer2"
    ]
}

URL

Open a URL in the current window or a new window.

PropertyDescription
urlString
The URL to open.
Required
newWindowBoolean
Open the URL in the current window or a new window. The default behavior is to open the document in the same window.
Optional
{
    "type": "url",
    "url": "https://www.example.com",
    "newWindow": true
}

Bounding Box

The defined container on the canvas for an object.

PropertyDescription
xDecimal
Absolute x position on the document.
Required
yDecimal
Absolute y position on the document.
Required
wDecimal
Width of the bounding box.
Required
hDecimal
Height of the bounding box.
Required
rotationDecimal
Rotation of the bounding box in degrees. Rotation is clockwise and bounded between 0 and 360 degrees. Note that not all shapes are affected by rotation.
optional
{
    "x": 5,
    "y": 3,
    "w": 10,
    "h": 15,
    "rotation": 180
}

Data

Provide data to your document that can be referenced within pages and shapes.

Custom Data

Set of key-value pairs embedded within a shape.

PropertyDescription
keyString
Name of the data key needed to access the data pair.
Required
valueString
Value to be returned when the key is requested.
Required
{
    "key": "KeyOne",
    "value": "TestOne"
}

Custom Page Data

Set of key-value pairs embedded within a page.

PropertyDescription
keyString
Name of the data key needed to access the data pair.
Required
valueString
Value to be returned when the key is requested.
Required
globalBoolean
Add this pair to all shapes on the page. The default state is false.
optional
{
    "key": "KeyOne",
    "value": "TestOne",
    "global": true
}

Linked Data

Set of references to data provided in an external datasouce, usually a CSV file included with the provided .lucid standard import file.

PropertyDescription
collectionIdID
Collection source id. Refer to the Data section for more information.
Required
keyString
Value of key field defined by the collection source.
Required
{
    "collectionId": "CollectionOne",
    "key": "9"
}

Position

Position represents a location on the canvas. As x increases, the position moves to the right on the document canvas. As y increases, the position moves down the canvas.

Absolute Position

An exact location on the canvas.

PropertyDescription
xDecimal
Absolute x position on the document. As x increases, the position moves right on the canvas.
Required
yDecimal
Absolute y position on the document. As y increases, the position moves down the canvas.
Required
{
    "x": 5.0,
    "y": 3.5
}

Relative Position

A position relative to the length or width of another line or shape. Expressed as a decimal percentage from 0 to 1. A value of 0 represents the start of the shape or line, with 1 representing the end. A value of 0.5 would be the middle. For a block, 0,0 represents the top-left corner and 1,1 represents the bottom-right.

PropertyDescription
xDecimal
Relative x position along the line or shape.
Required
yDecimal
Absolute y position along the line or shape.
Required
{
    "x": 0.25,
    "y": 0.75
}

Style

The combined background and border style of a shape.

PropertyDescription
fillFill
Fill of the shape. The default fill is a solid white background.
optional
strokeStroke
Stroke of the line or shape border. The default stroke is a solid 1px black line.
optional
roundingInteger
Rounding value for the shape border, equal to double the pixel value of the corner radius.
optional
{
    "fill": {
      "type": "color",
      "color": "#ffffff"
    },
    "stroke": {
      "color": "#6f2131",
      "width": 3,
      "style": "solid"
    },
    "rounding": 10
}

Fill

Defines a shape's background. Can be a color or image.

PropertyDescription
typeString
Type of content to fill the shape with. The Standard Import accepts "color" or "image" (see fill types below).
Required

Color Fill

{
    "type": "color",
    "color": "#800080"
}

Fills the shape with a color.

PropertyDescription
colorColor
Hexadecimal string representing a RGB or RGBA color value.
Required

Image Fill

Fills the shape with an image. The image can be provided either within the images directory of the provided .lucid file (see Images), or as a url to an external image.

PropertyDescription
refString
Refer to the Images section for how to reference images. Importing will fail if the file can not be found.
urlURL
URL address pointing to an image. Importing will not check the validity of the image link.
imageScaleImage Scale
Defines the way the image fills the shape. This field defaults to stretch if nothing is provided.
optional
{
    "type": "image",
    "ref": "image.png",
    "imageScale": "fit"
}
{
    "type": "image",
    "url": "https://www.example.com/images/logo.png",
    "imageScale": "stretch"
}
Image Scale Types
ValueDescription
fitResizes the image to fit within a specified container while maintaining its aspect ratio, ensuring the entire image is visible with possible empty space around it.
fillResizes the image to completely fill a specified container, possibly cropping parts of the image to maintain the container's aspect ratio, ensuring the container is entirely covered by the image.
stretchResizes the image to fill a specified container without maintaining the original aspect ratio, potentially causing distortion if the aspect ratios differ.
originalDisplays the image at its original size without resizing, showing only a portion if the container is smaller than the image.
tileRepeats the image to fill the entire container both horizontally and vertically, creating a tiled pattern suitable for textures or backgrounds.

Stroke

Define the look of a line or border. May affect other aspects of certain shapes.

PropertyDescription
colorColor
Hexadecimal string representing a RGB color to fill the line or border. The color defaults is black.
optional
widthInteger
Width of the line or border in pixels. The width defaults to 1px.
optional
styleStroke Style
Style of the line or border. The stroke style defaults to solid.
optional
{
    "color": "#ffffff",
    "width": 10,
    "style": "solid"
}

Stroke Style

Defines the look of a drawn line. Affects the border and other aspects of certain shapes.

ValueDescriptionImage
solidA solid line.Solid Stroke
dashedA dashed line.Dashed Stroke
dottedA dotted line.Dotted Stroke

Text

Text to display on the shape or line. Formatting of the text can be by provided via raw HTML.

If a font size is not provided, all shapes will default to using auto-scaling font size.

PropertyDescription
textString
Display text or Text and style formatting via the HTML style attribute.
Required
{
    "text": "Shape title"
}

Text Style

Text can be formatted via provding an HTML Style string. Any HTML style attributes not listed will be ignored. Some shapes may have a different default for certain fields based on their typical usage.

ValueDefault
colorblack
font-familyLiberation Sans
font-size10pt
font-stylenormal
font-weightnormal
text-aligncenter
text-decorationnone
vertical-aligncenter
{
    "text": "<p style=\"font-size: 5pt;text-align: left;color: green\">A paragraph with HTML formatting.</p>"
}

Text Markup

HTML markup can be provided in text to further format customize its behavior:

MarkupBehavior
<br>Force a line break in the contained text.
<b></b>Apply bold to the contained text.
<strong></strong>Apply bold to the contained text.
<i></i>Apply italic to the contained text.
<em></em>Apply italic to the contained text.
<s></s>Apply strike-through to the contained text.
<strike></strike>Apply strike-through to the contained text.
<u></u>Apply underline to the contained text.
<a></a>Create an href within the contained text.
<ol></ol>Create an ordered-list within the contained text.
<ul></ul>Create an unordered-list within the contained text.
<li></li>Create a list-item within an ordered or un-unordered list within the contained text.
{
    "text": "<ol><li><b>bold</b></li><li><a href=\"https://www.example.com\">visit example.com</a></li></ol>"
}