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:

Property	Type	Definition
`stroke`	`Stroke` (optional)	StrokeSpecifies the geometries' line color and line size.
`fill`	`Fill` (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`).
`rounding`	`number, formula` (optional)	Specifies rounding that is applied to the geometries when rendering. A rectangle with rounding set will be rendered as a rounded rectangle.
`order`	`geometry` (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

Property	Type	Description
`type`	`file, url`
`path`	`string`	Indicates 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 }
  ]
}

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 }
  ]
}

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 }
  ]
}