Hello there!
We’re excited to show you how to transform a folder of image files into a Lucidchart shape library. This will bring a new level of customization to your Lucid documents and can be done in less than ten minutes.
When you complete the instructions you’ll have an extension package (basically a folder with a bunch of formatted files). The next section in this guide describes how to distribute this extension package (e.g. actually make it usable in Lucid for the users you want).
Before you begin you’ll need node.js installed to download the Lucid SDK. As described in the Extension API documentation the CLI command to download the Lucid SDK is npm install lucid-package.
If you’ve already installed the Lucid SDK you will need to update it to at least version 0.0.58 which was released on March 29 2023. You can see what version you have by using the npm status command. Updating NPM packages can typically be done by using the npm update command.
Currently only JPG PNG and SVG files are supported. For now SVGs that are uploaded to Lucid via the Extension API are rasterized meaning they are converted into static images with limitations on what can be formatted (e.g. you can’t change the fill color of the SVG).
We will explore adding more thorough and true SVG conversion in the future. If you need a vector-quality import now you can still do that via the custom shape libraries tool in Lucidchart.
Here’s how to turn your image files into a shape library:
| Step | Command Line Interface (CLI) Command |
| 1) Gather images into a folder (name files according to how images should be named in Lucid) | None |
| npx lucid-package create my-new-package-name | |
| 3) Navigate your CLI into the extension package | cd my-new-package-name |
| npx lucid-package create-image-shape-library <name> <image-path> (“image-path” = path to folder of images) | |
| 5) Test in Lucidchart | Click this link (then…) npx lucid-package test-shape-libraries |
And voila! Your images are now a usable shape library in Lucidchart.
If you want to distribute the shape library among your teams or publish it to the Lucid Marketplace you will have to follow these steps:
Unlocking the Developer Portal and uploading extension package
You can use the Developer Portal to distribute an application or shape library:
- Access the Developer Portal using this link. That link flips a Lucid feature flag on our side and redirects to the Portal. If you have issues accessing the Developer Portal please let us know.
- From the Developer Portal click the "New Application" button to create and name a new application. This is where you will upload your extension.
- After you have created a new application you will be redirected to a page specifically for that application. Copy the package ID found in this page's URL (the format is "lucid.app/developer#/packages/{id}") and add it to the id field in the manifest.json file in your extension.
- Follow the instructions here to create debug and package (a.k.a bundle) your editor extension
- Upload your bundled .zip file to the Developer Portal by clicking "Upload a new version of this package" in the package's page in the Developer Portal.
- After uploading the .zip you can click on the uploaded version which will take you to another screen that enables it. Note that "installing the package" does not cause you to install anything on your computer.
Distributing application to testers via the Developer Portal
- On the application homepage you can invite a tester to this project by clicking the “Invite” button under the “Invitation by Email” section. Enter the tester’s email and select the tester role. Click “Create” to send the invitation.
- Once the tester accepts the invitation via email they will be directed to verify their email.
- Upon successful verification the tester will have access to install and test this application.
Distributing to a whole account and installing a package version for a whole account
Only Lucid Team Admins can install packages for the whole account.
- You can distribute an unpublished extension package version to everyone on an account by installing that version for the whole account.
- Navigate to the specific package version page.
- Click on the “Install for my whole account” button. Only Team Admins can see this option.
Distribute to all Lucid users via Lucid Marketplace
You can distribute your apps and shape libraries to millions of Lucid users via the Lucid marketplace.
Create and edit Marketplace listings
- Log on to the Developer Portal and navigate to the package for which you want to edit the marketplace listing.
- Click on “Create” or “Edit Listing” under the “Marketplace Listing” section. Only users with an Owner or Code Editor role can edit the marketplace listing.
- Click “Save Changes” once you are done editing. All the changes will be reflected on the published marketplace listing page.
Publish to the Marketplace
- Navigate to the package version details page clicking on the version number (ex 1.0.0 below).
- Submit this version to Lucid for approval by clicking on the “Submit for approval on Lucid Marketplace” button.
- You will need to create a Zendesk ID for this process but the UI should prompt you to create and fill the Zendesk ID in this flow.
- Upon approval from Lucid we will notify you once your application is published on the Lucid Marketplace.
If you have any other questions about creating and distributing shape libraries feel free to reach out in the comments! We look forward to seeing what you create.
