Skip to main content
Procore

Create Interactive Workflow in LucidChart

  1. Last updated
    Jul 12, 2024
  2. Save as PDF

Objective

To create a workflow in Lucidchart. 

Things to Consider

  • Lucidchart a third-party diagram application we recommend using in order to create your custom workflows, flowcharts, and diagrams. 
  • Make sure your image has a width of 750 pixels or less.
  • To receive help and steps on how to utilize Lucidchart see the Help Center.
  • To make your chart fields interactive, we recommend using Image Map Generator.
    • The Image Map Generator will not read PDF Documents. File types .PNG or .JPG are recommended.

Video

Steps

Create a new flowchart, diagram, or workflow in Lucidchart
  1. Create new flowchart using Lucidchart by navigating to https://www.lucidchart.com/. 
    For more information, see Lucidchart Help Center.
  2. Save flowchart as a .jpg or .png. 
    Ensure image has a width of 750 pixels or less. 
Add Interactive Links to Workflow
  1. Upload the flowchart into the Documents page within your Training Center.
    For more information, see Attach a Document. 
  2. Within the Attachments area, Right-Click the flowchart file link and select Copy Link Address.
  3. Navigate to https://www.image-map.net/. 
  4. Click Load Image from Website.
  5. Paste the flowchart link address from your Training Center attachments area.
  6. Select a shape that matches the surface you want to be interactive (Rect, Poly, Circle).
  7. Highlight the surface by clicking a start and end point.
  8. Insert the Link you want the button to connect to.
    For example, 'support.procore.com/user-guide/project-level/submittals/tutorials/create-a-submittal'
  9. Match the Title with the destination the button will be interacting with.
  10. Select your target. (_blank is best practice to open page in a new window)
  11. Click Show Me The Code.
  12. Highlight the code from the populated window and Right-click on your mouse to Copy.
  13. Navigate to the Training Center page you want to attach the workflow asset to. 
  14. Click Edit and select Edit Live.
  15. Click View and select </> Source from the drop-down menu.
  16. Right-click and select paste to insert the workflow code.
    • If you choose to add more than one workflow per page, two portions of the code must be updated. If the code is not updated, your original will be replaced:
      • Edit the "#image-map" & "image-map" as shown in the image below to a unique name. 
        clipboard_efd1bac705a8b79c5b4b71779249c7e84.png
  17. Click Save.