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

Render style

Geometry is rendered using a styling defined within the shape definition or the sub-shape. The highest-level style is used unless it is overridden by a lower-level style. So, for example, if the style is only defined in the top-level of the shape definition, all geometry in sub-shapes would be rendered using that same style.

Formatting

The style defines the formatting used to render the sub-shape's geometry.
There are 3 main aspects of the style formatting that can be changed:

PropertyTypeDefinition
strokeStroke (optional)StrokeSpecifies the geometries' line color and line size.
fillFill (optional)Specifies the fill type of the geometries.This can be a solid color (type: color), a gradient (type: linear-gradient or type: radial-gradient), or an image fill (type: image).
roundingnumber, formula (optional)Specifies rounding that is applied to the geometries when rendering. A rectangle with rounding set will be rendered as a rounded rectangle.
ordergeometry (default) , shapes (optional)Indicates whether top-level geometry or subshapes are rendered first.

Image map

{
  "images": {
    "image1": { "type": "file", "path": "image1.png" },
    "image2": { "type": "url",  "path": "https://www.website.com/image2.jpg" },
    "image3": { "type": "file", "path": "image3.jpg" }
  },
}

Images referenced in image fills must be added into the shape's image map within the shape definition in order to identify where the image file comes from (either a URL or internal image added to the LCSZ file).

The image map is a collection of names which reference an image file or URL; the names are then referenced within the image fills themselves.

In a shape definition, you can add a new field: images: { "myImage": Image }.

📘

SVG files are supported, however, these vector images will be rasterized.

Image schema

PropertyTypeDescription
typefile, url
pathstringIndicates either the URL of the image or the filename for internal images (e.g. image1.png).

📘

External URLs (i.e. https://www.fakeurl.com/image2.jpg, above) directly reference URLs and do not add images to the Lucidchart image manager.

URLs that produce images like single-pixel image trackers can be used for tracking shape usage (as it will operate as a normal web-based image), however if the URL stops being valid or the image referenced by the URL changes, that will affect the shape in the future.

Examples

A rectangle styled with a red fill and a 3 pixel blue stroke and no rounding

{
  style: {
    fill: { type: 'color', color: '#ff0000' }
    stroke: { color: '#0000ff', width: 3 }
    rounding: 0
  }
  geometry: [
    { type: rect }
  ]
}

Border

A rectangle with an image fill using an internal image file

{
  ...
  images: {
    "logo": {
      type: 'file'
      path: 'logo.png'
    }
  }
  ...
  style: {
    fill: {
      type: 'image'
      ref: 'logo'
      mode: 'stretch'
    }
    stroke: { color: '#00000000', width: 1 }
    rounding: 0
  }
  geometry: [
    { type: rect }
  ]
}

Border

A rectangle styled with a transparent fill and a 1 pixel black stroke and 10px rounding

{
  style: {
    fill: { type: 'color', color: '#00000000' }
    stroke: { color: '#000000', width: 1 }
    rounding: 10
  }
  geometry: [
    { type: rect }
  ]
}