Using Lucidchart for Confluence Server

This article will teach you how to use Lucidchart for Confluence Server.

The Lucidchart app for Confluence is only available for Team and Enterprise accounts. If you are an admin of a Lucidchart Team or Enterprise account, you can install the Lucidchart App to your Confluence Cloud or Server instance.

If you do not have a Lucidchart account, a free team trial is available on the pricing page. If you have already completed a trial and currently have a Free, Personal, or Professional account, go to the Subscription Level page within your account and select the appropriate team license tier.

To add a Lucidchart diagram to a Confluence page, follow these steps:
  1. Create a Confluence page or open an existing one and click "edit"

    edit_confluence_page.png
  2. Click "+" (insert more content) from the bar at the top and select "Add Lucidchart Diagram." If you do not see this option, contact the admin of your Lucidchart account.

    add_lucidchart_diagram_to_confluence_page.png
  3. If you are logged in to Lucidchart, your Lucidchart documents page will load. If you are not logged in, enter your Lucidchart credentials.

    enter_credentials_for_confluence.png
  4. Hover over the document that you would like to add and click "Select." You can also create a new document or import a Visio, Gliffy, Draw.io, or OmniGraffle file. Once selected, the document will load onto your Confluence page.

    select_a_document_to_insert_to_confluence.png
  5. Click "Update" to publish the document to the Confluence page.

    update_confluence_with_lucidchart_diagram.png

    Once published, everyone who has permissions for that page will be able to view the document.
If you have edit access to a Confluence page with inserted diagrams, you can edit those diagrams in Lucidchart and push those changes to Confluence.

To edit a diagram that has already been added to a Confluence page, follow these steps:
  1. Click "Edit" at the top of the Confluence page and then click "Edit" from the options bar that appears on the inserted diagram.

    edit_confluence_page.png

    edit_inserted_diagram.png

    Alternatively, hover over the diagram and click the pencil icon.

    edit_pencil.png

    The document will open in the Lucidchart editor.
  2. Make changes to the Lucidchart document. When you are done, click "Back to Confluence" in the top left corner of the Lucidchart editor.

    back_to_confluence_button.png

    The changes will automatically be synced to the diagram in Confluence.
  3. Click "Update" at the bottom right of the Confluence page to publish your changes.

    update_confluence_with_lucidchart_diagram.png
To delete a diagram that has already been added to a Confluence page, follow these steps:
  1. Click "edit" at the top of the Confluence page.

    edit_confluence_page.png
  2. Click on the inserted diagram and click "Remove" from the options bar that appears.

    remove_diagram_from_confluence.png
  3. Click "Update" at the bottom right of the Confluence page to publish your changes.

    update_confluence_with_lucidchart_diagram.png
Sharing permissions for documents will be inherited from the Confluence page. This means that if you can view and edit a Confluence page, you will be able to view and edit the documents on that Confluence page.
To change the display properties of an inserted diagrams, click "Edit" at the top right of the Confluence page, then select the diagram and click "Properties" from the bar that appears.

edit_properties_of_inserted_diagram.png

A modal titled Diagram Properties will open.

confluence_viewer_properties.png

In this modal, you can adjust the following settings:
  • Adjust the width and height of the inserted diagram
  • Turn autosize on or off
  • Adjust the alignment of the diagrams display on the Confluence page.
  • Dictate which pages of the Lucidchart document are available to viewers of the Confluence page.
  • Switch between the Rich and Basic viewers (see below for more info)
  • Enable auto-update (see below for more info)
When you are done making changes to these settings, click "Save."
The Lucidchart app for Confluence allows you to automatically push changes from the Lucidchart editor to the diagrams displayed in Confluence. To enable auto-update for a specific diagram, follow these steps:
    1. Select the diagram.
    2. Click "Properties" from the options bar at the bottom.
    3. Click "On" underneath the option to "Automatically update this diagram with changes made in Lucidchart."
    4. Click "Save."
Note: It is only possible to enable auto-updates on an individual diagram basis.
There are two viewers available for displaying Lucidchart diagrams in Confluence Server: Basic and Rich. The Basic viewer is hosted on Confluence servers and provides a static PNG of the diagram. The Basic viewer is available in Chrome, Firefox, Safari, and Internet Explorer.

To display a diagram with the Basic viewer, select Off beneath "Use Rich in Lucidchart viewer" in the Diagram Properties modal.

rich_viewer_toggled_off.png

basic_viewer.png

A series of icons will appear in the corner of diagrams displayed with the Basic viewer, allowing viewers to do the following actions:
  • Edit the diagram in Lucidchart
  • Remove the diagram from the Confluence page
  • Switch to the Rich viewer
  • Refresh to the latest version of the Lucidchart diagram
  • Zoom in and out of the diagram
If the inserted diagram 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 over the displayed diagram.
There are two viewers available for displaying Lucidchart diagrams in Confluence Server: Basic and Rich. The rich viewer is hosted on Lucidchart servers and required internet access to run. It provides full interactivity with Lucidchart. The Rich viewer is available in Chrome, Firefox, and Safari, but is not available in Internet Explorer. To display a diagram with the Basic viewer, select "On" beneath "Use Rich in Lucidchart viewer" in the Diagram Properties modal.

rich_viewer_toggled_on.png

rich_viewer.png

A properties bar will appear across the bottom of diagrams displayed with the Rich viewer, allowing viewers to do the following actions:
  • Open Lucidchart in a new browser tab
  • Edit the diagram in Lucidchart
  • Switch to the basic viewer
  • Refresh to the latest version of the Lucidchart diagram
  • Toggle through slides of the inserted diagram
  • Zoom in and out of the diagram
  • Enter full-screen mode
  • Open up the Viewer Options modal, containing the following options:
    • Show page tabs
    • Show hotspots
    • Show notes
    • Enable WebGL
If your inserted diagram contains multiple pages, they will appear at the top of the viewer when you hover over the diagram. Click on the tab associated with a page to display that page.

Screen_Shot_2019-07-08_at_10.27.51_AM.png
Common Issues
If you receive the error: "You are not on a team associated with this instance."  In all likelihood your specific user is connected to the incorrect Lucidchart team.  To fix this, follow these steps:
    1. Log in to your Lucidchart account that is currently incorrectly linked to Confluence. If you do not know what email is linked stop here and let us know. We will be able to find the incorrect link and sever the connection.
    2. Go to the External Applications page under account settings.
    3. Check the box next to 'Confluence' and then click the 'Remove' button. This will disconnect the account.
    4. To re-establish the correct connection, logout of Lucidchart. You will then need to insert any diagram into a Confluence page. When prompted to log into Lucidchart, make sure you are logging in with the email associated with your organization's Lucidchart account (not the email you logged in with in step 1) that is linked to the Confluence account you are attempting to link to.
If you see the following OAuth timestamp error when you try to install/configure the Lucidchart Confluence Server 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'

This 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.

To convert your Draw.io diagrams to Lucidchart diagrams in Confluence Server, follow these steps:
  1. Navigate to the page that contains the diagrams you would like 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 diagram 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.