Integrate Lucid with Confluence Data Center

Written by:  Shanna S
Last updated:  

The Confluence Data Center integration will allow you to import your Lucidchart documents and Lucidspark boards into Confluence Data Center. Read on for instructions on how to install, configure, and use this integration.

Plan availability: Team and Enterprise.
  • Available on FedRAMP accounts. For FedRAMP users in the Lucidchart for Gov environment, only the Lucidchart app for Confluence Data Center integration is available.
  • Read the Lucid Plans article for more information about what is available on your account or the Upgrade your Lucid account article for instructions to upgrade.

For admins: installation and configuration instructions

Only the account owner or account admins on a Team or Enterprise account can install and configure the Lucidchart app in Confluence Data Center, or Lucidspark app in Confluence Data Center.
Follow these installation instructions:

  1. Log in to your Confluence instance as an admin.
  2. Open the Administrative menu.
  3. Click Add-ons on the left sidebar.
  4. Select Find New Add-ons.
  5. Search “Lucidchart” or “Lucidspark” in the Atlassian marketplace. 
  6. Click the Lucidchart Diagrams Connector tile or Lucidspark Boards Connector tile.
  7. Select Get it now in the top-right corner.
  8. If installing the Lucidchart app, click Get it now under Data Center in the pop-up window.

The app will download to your local device. 

Follow these steps from the downloaded app to configure it to your instance:

  1. Click Manage and Configure to grant Lucid access to Confluence.
  2. Log in to your Lucid account if you are not already logged in.
  3. Select Link Account to connect your Confluence instance to your Lucid account.

To set up the Lucidchart App for Confluence Data Center for your Lucidchart for Gov environment, navigate to <baseUrl>/admin/plugins/lucidchart/environmentconfig.action where <baseUrl> is the base URL of your Confluence instance and select lucidgov.app from the dropdown.

lucidchart-environment-configuration-options-for-eu-data-center-or-lucid-govsuite.png

Add a document to a Confluence page

To add a Lucidchart diagram or Lucidspark board to a Confluence page, follow these steps:

  1. Create a Confluence page or open an existing one. 
  2. Click Edit at the top of the page.
  3. Click + in the menu at the top of the page. 
  4. Select Add Lucidchart Diagram or Add Lucidspark Board
    • If you do not see this option, contact the admin of your Lucidchart account and request that they install and configure the appropriate Lucid app for your Confluence instance.
    • If the document you are adding is in a repository, you need to open that repository before moving to the next step. Click Repositories from the navigation on the left side, then select the specific repository.
  5. Hover your cursor over the document that you want to add and click Select
    • You can also create a new document by clicking + Document in the top-left corner.
  6. Once selected, the document will load onto your Confluence page.
  7. Click Update in the bottom-right corner of the Confluence page to publish the document.

Once published, everyone who has permissions for that page will be able to view the document.

Manage embedded documents

Edit Lucidspark boards directly from Confluence page

When you embed a Lucidspark board in Confluence Data Center, you can chose from the following access settings that will be available directly in Confluence:

  • View only: Confluence users can only view the embedded Lucidspark board.
  • Comment only: Confluence users can view and comment on the embedded Lucidspark board.
  • Edit: Confluence users can edit the embedded Lucidspark board. 

Editing a Lucidspark board directly in Confluence will provide a wide variety of options, such as adding shapes and lines or participating in a visual activity. If you are new to Lucidspark and interested in learning how to work with a variety of the features available to you, check out our Welcome to Lucidspark article.

edit-lucidspark-board-directly-on-confluence-page.png

Edit a Lucidchart document by opening it in Lucid

If you have edit access to a Confluence page with inserted Lucidchart documents, you can edit the documents in Lucid and push the changes back to Confluence.

To edit a document that has already been added to a Confluence page, follow these steps:

  1. On the published Confluence page, hover your cursor over the inserted Lucidchart diagram or Lucidspark board. 
  2. Click Open with Lucidchart.
    • If you are in edit mode on the Confluence page, click on the inserted document and select Edit from the options bar that appears below the diagram.
  3. The document will open in the Lucid editor and you can now make changes to it.
  4. When you are done, click Back to Confluence in the top-left corner of the Lucid editor.
    • The changes will automatically be synced to the embedded document in Confluence.
  5. Click Update at the bottom-right of the Confluence page to publish your changes.

Delete a document from a Confluence page

To delete a document that has already been added to a Confluence page, follow these steps:

  1. Click Edit at the top of the Confluence page.
  2. Select the inserted document.
  3. Click Remove from the options bar that appears below the document.
  4. Click Update at the bottom-right of the Confluence page to publish your changes.

Adjust diagram display properties

To access the display properties of an inserted document:

  1. Click Edit at the top of the Confluence page.
  2. Select the document. 
  3. Click Properties from the options bar that appears below the document to open the display properties modal.
  4. Click Save after making any changes to the display properties.

diagram-properties-modal-in-confluence-to-adjust-Lucid-document.png

In this modal, you may see the following settings, depending on which Lucid app you are using:

  • Adjust the width and height of the inserted document.
  • Turn autosize on or off.
  • Adjust the alignment of the diagrams displayed on the Confluence page.
  • For Lucidchart documents, dictate which pages are available to viewers of the Confluence page (eg. 3 or 2-3). 
    • Selecting a page or page range is only possible if you are using the rich viewer. 
  • Switch between the rich and simple viewers.
  • Enable auto-update when documents are updated in Lucid. 
    • Enabling auto-update is only possible if you are using the rich viewer.

Note: It is only possible to enable auto-update on an individual document basis. Enabling this feature allows you to automatically push changes from the Lucid editor to the diagrams displayed in Confluence.

Simple versus rich viewer

There are two viewers available for displaying Lucid documents in Confluence Data Center: simple and rich.

You can switch between the simple and rich viewers for a specific document in the macro settings modal.

Simple viewer

The simple viewer is hosted on Confluence servers and provides a static PNG of the document. 

simple-viewer-in-confluence-displaying-static-PNG.png

When hovering your cursor over the document, simple viewer allows viewers to do the following actions:

  • Edit the diagram in Lucid
  • Remove the diagram from the Confluence page
  • Switch to the rich viewer
  • Refresh to the latest version of the Lucid document
  • Zoom in and out of the diagram

If the inserted document contains multiple pages, you can toggle between them by clicking on the corresponding arrow that appears on the side of the viewer when you hover your cursor over the document.

Note: It is not possible to dictate which pages of the Lucidchart document are available to viewers when using the Simple viewer. You will need to use the rich viewer to access this functionality.

Rich viewer

The rich viewer is hosted on Lucid servers and requires internet access to run. It provides full interactivity with Lucid documents. 

rich-viewer-in-confluence-with-full-interactivity-with-Lucid-document.png

A frame will appear when hovering your cursor over documents displayed with the rich viewer. 

From the top of the frame, users can:

  • Open the Lucid document in a new browser tab
  • View document title
  • Present any slides that have been created in the document
  • Enter full-screen mode
  • Open up the Viewer Options modal
    • This modal for the Lucidchart app contains the ability to show notes, hotspots, to enable WebGL and to update to the latest version of the diagram

From the bottom of the frame, users can: 

  • Select different page tabs to view in Lucidchart document
  • View different layers in the diagram in Lucidchart document
  • Zoom in and out of the diagram

Convert your Draw.io diagrams to Lucidchart documents

To convert your Draw.io diagrams to Lucidchart documents in Confluence Data Center, follow these steps:

  1. Navigate to the page that contains the documents you want to convert.
  2. Open the file in Draw.io and download as a XML file.
  3. Go into edit mode in your Confluence page.
  4. Using the plus icon on the toolbar at the top of the editor, insert a new Lucidchart document via the Lucidchart selection in the dropdown.
  5. Once the Lucidchart editor opens you can import the diagram via the import menu.
  6. Once the diagram imports, select it from the documents list and it will be added to your Confluence page. At this point you will be redirected back to Confluence.
  7. The conversion is now finished and you can delete your original Draw.io diagram from your Confluence page.

Migrate from Confluence Data Center to Confluence Cloud

Keep the following in mind prior to migrating from Confluence Data Center to Confluence Cloud: 

  • Documents are converted by space, not by page.
  • This migration can’t be undone in bulk without restoring a previous backup of the Confluence instance.
  • The conversion can be undone on a per-document basis by navigating to the document and restoring the page from the page history.

If migrating from Confluence Data Center to Confluence Cloud for your Lucidchart app, follow the steps below  to reset your documents so they display again:

  1. Navigate to the configuration section of the Lucidchart add-on.
  2. Select the “Confluence Conversion” tab.
  3. Click Search to locate diagrams that need to be converted.
  4. Select Convert.

Once you've migrated your documents, check out our Integrate Lucid with Confluence Cloud article for instructions to use that integration.

Note: Confluence treats the Lucidchart add-on as a user. This means for the add-on to access and successfully convert existing Lucidchart macros it must have the correct permissions. If you experience trouble going through the conversion process, check your space permissions to make sure any space or page that wholesale fails to convert is opened to the "Lucidchart Diagrams Connector" user.

FAQ

Who can view and edit Lucid documents that have been embedded onto a Confluence page?
Viewing permissions for Lucid documents in Confluence Data Center will be inherited from the Confluence page. This means if you can view a Confluence page, you will be able to view the documents on the Confluence page, regardless of whether or not you have a Lucid account. 

The Lucidchart app in Confluence also pulls editing permissions from the Confluence page. This means if you can view and edit a Confluence page and are a licensed Lucid user, you will be able to view and edit the diagrams in the Lucid app by clicking on the Open in Lucidchart button on each document.

The Lucidspark app in Confluence requires that you have both editing access in Confluence and editing access on the embedded Lucidspark board in order to edit the document in Confluence.

Why am I stuck in a login loop when trying to access the integration?
If you experience a login loop where you are continuously prompted to log in to Lucid when using this integration, it is most likely due to 3rd party cookies being blocked for your browser. Reference our Troubleshooting: Enable third-party cookies article for details on how to change that setting so they are no longer blocked. 

Why am I seeing white margins around my embedded Lucid diagrams in Confluence?
Some white space around your document can be normal when inserting diagrams in Confluence. Refer to this White space on inserted diagrams community post (in English) for instructions on how to optimize the appearance of your embedded documents.

Why am I seeing an OAuth timestake error when trying to install a Lucidchart app for Confluence Data Center?
If you see the following OAuth timestamp error when you try to install and configure the Lucidchart Confluence Data Center connector,

“org.scribe.exceptions.OAuthException: Response body is incorrect. Can't extract token and secret from this: 'oauth_problem=expired_timestamp,_yours_1359614629,_ours_1359585813'”

it likely means that the timestamp on your server hosting Confluence is not particularly accurate. Even if your server time seems okay, a discrepancy of 15-30 seconds can result in two servers not wanting to talk to each other. It's not possible to manually adjust server time with enough precision, so you'll need to synchronize your timestamp with an NTP server.

Why am I receiving a “You are not on a team associated with this instance” error?
This error means the user is likely connected to an incorrect Lucid account. To fix this, follow these steps:

  1. Log in to your Lucid account that is currently incorrectly linked to Confluence. 
  2. Click your profile image or initials in the top-right corner of your Lucid account.
  3. Select Account Settings.
  4. Select Apps & Integrations from the left-side menu.
  5. Check the box next to “Confluence”.
  6. Click the Remove button. This will disconnect the account.
  7. To re-establish the correct connection, log out of Lucid. 
  8. Insert any Lucid document into a Confluence page. 
  9. When prompted to log in to Lucid, make sure you are logging in with the email associated with your organization's Lucid account.

What happens to the account wide Confluence connection if the admin who initially set it up leaves?
If your admin leaves, the connection will remain active, as it is established at the account level. Admin permissions are only required during the initial setup process to create the connection.
 

Give feedback on this article

Have feedback about this article? Tell us about your experience here

Did you find what you were looking for?

Still have a question or want to share what you have learned? Visit our Community   to get help and collaborate with others.