# How to Integrate Lovable with Lucidchart

- Tool: Lovable
- Difficulty: Intermediate
- Time required: 55 minutes
- Last updated: March 2026

## TL;DR

Integrate Lucidchart with Lovable by creating a Supabase Edge Function that proxies the Lucidchart REST API using OAuth2 credentials. The Edge Function fetches document metadata, page information, and export URLs from Lucidchart, enabling your Lovable app to embed published diagrams as iframes or SVGs, build visual documentation viewers, and display org charts alongside live application data.

## Embed Lucidchart Diagrams and Build Visual Documentation Viewers in Lovable

Lucidchart is the most widely used structured diagramming tool for enterprise teams, known for its polished org chart capabilities, Visio-compatible format support, and integration with Google Workspace. Unlike whiteboard tools like Miro or Mural, Lucidchart is designed for precise, structured diagrams where every shape has meaning: flowcharts with defined logic flows, org charts with accurate reporting relationships, network diagrams with correct topology, and UML diagrams with standard notation.

The most powerful way to display Lucidchart content in Lovable is embedding. When you publish a Lucidchart document and enable public access, Lucidchart generates an embed URL that can be placed in an iframe — no API authentication required. This embed approach works for the majority of use cases: displaying an org chart on a company directory page, showing a product architecture diagram in a technical documentation tool, or surfacing a process flowchart in an onboarding guide. The embedded diagram is always up to date with the published version.

For more advanced scenarios — building a diagram browser that lists all documents in a Lucidchart account, fetching specific page content programmatically, or managing document metadata — the Lucidchart REST API provides document and page endpoints. These require OAuth2 authentication, handled by the Edge Function proxy. Together, the embedding approach and the API access give you a complete toolkit for building Lucidchart-powered Lovable applications.

## Before you start

- A Lucidchart account (Team or Enterprise plan recommended for API access — free plans have limited API support)
- A Lucidchart developer application registered at developer.lucid.co to obtain OAuth2 client credentials
- At least one Lucidchart document with public sharing or embed access enabled
- A Lovable project with Lovable Cloud enabled
- Familiarity with Lovable's Cloud → Secrets panel and basic OAuth2 concepts

## Step-by-step guide

### 1. Register a Lucidchart developer application and get OAuth2 credentials

To use the Lucidchart API, you need to register an application in Lucidchart's developer portal to obtain OAuth2 client credentials. Navigate to developer.lucid.co in your browser and sign in with your Lucidchart account. If you do not see a developer portal, you may need to contact Lucidchart support to enable API access for your account — the REST API is available on Team and Enterprise plans.

In the developer portal, click 'Create Application'. Give your application a name (such as 'Lovable Integration') and a description. For the OAuth2 flow, the Edge Function pattern uses the client credentials grant type (machine-to-machine authentication) rather than the authorization code flow. This is appropriate for server-side integrations where you are accessing your own Lucidchart documents, not other users' documents.

After creating the application, Lucidchart provides you with a Client ID and a Client Secret. Copy both values — the Client Secret is only shown once in some implementations, so store it immediately in a secure location. You will also need your Lucidchart account's User ID, which can be found in your Lucidchart account settings under Profile → API or in the URL when viewing account settings. The Lucidchart API base URL is https://api.lucid.co.

**Expected result:** You have a Lucidchart OAuth2 Client ID and Client Secret from the developer portal, ready to store in Cloud Secrets.

### 2. Enable diagram embedding and get embed URLs

For the iframe embedding approach — which is the most reliable and performant way to display Lucidchart diagrams in Lovable — you need to enable public sharing on each document you want to embed. In Lucidchart, open the document you want to embed. Click the Share button in the top-right corner of the editor. In the sharing dialog, click 'Advanced' or find the 'Publish' or 'Embed' option.

Enable 'Anyone with the link can view' to make the document publicly accessible. Then look for an 'Embed' option which provides an iframe HTML snippet. The embed URL follows the format: https://lucid.app/documents/embedded/YOUR-DOCUMENT-ID. Copy this URL.

Store the embed URL in your Lovable app — either hardcoded in a component for a single diagram, or stored in a Supabase table alongside document metadata for a dynamic diagram browser. For an org chart page, you might store the embed URL in an environment variable or Supabase settings table so it can be updated without code changes.

Important: Also store your Lucidchart OAuth2 credentials in Cloud Secrets now. Open the Cloud tab in Lovable, go to Secrets, and add three secrets: LUCIDCHART_CLIENT_ID (your OAuth2 client ID), LUCIDCHART_CLIENT_SECRET (your OAuth2 client secret), and LUCIDCHART_USER_ID (your Lucidchart user account ID).

**Expected result:** At least one Lucidchart document has public embedding enabled and you have its embed URL. Three secrets (LUCIDCHART_CLIENT_ID, LUCIDCHART_CLIENT_SECRET, LUCIDCHART_USER_ID) are stored in Cloud → Secrets.

### 3. Create the Lucidchart Edge Function for API access

For operations beyond simple embedding — listing documents, fetching page metadata, or programmatically accessing document structure — you need the Edge Function proxy. This function uses OAuth2 client credentials flow: it POSTs your client ID and secret to the Lucidchart token endpoint to get a Bearer access token, then uses that token to call the Lucidchart API endpoints.

The Lucidchart API provides endpoints for listing documents owned by a user, retrieving document details (title, pages, creation date), and accessing page-level information. The Edge Function caches the access token in memory during its execution lifetime (Edge Functions are stateless between calls, so the token must be fetched on each cold start or refreshed when expired).

```
// supabase/functions/lucidchart-proxy/index.ts
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
};

async function getLucidToken(clientId: string, clientSecret: string): Promise<string> {
  const res = await fetch('https://api.lucid.co/oauth2/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'client_credentials',
      client_id: clientId,
      client_secret: clientSecret,
    }),
  });
  if (!res.ok) {
    const err = await res.text();
    throw new Error(`OAuth token request failed: ${err}`);
  }
  const data = await res.json();
  return data.access_token;
}

serve(async (req) => {
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders });
  }

  try {
    const clientId = Deno.env.get('LUCIDCHART_CLIENT_ID');
    const clientSecret = Deno.env.get('LUCIDCHART_CLIENT_SECRET');
    const userId = Deno.env.get('LUCIDCHART_USER_ID');

    if (!clientId || !clientSecret || !userId) {
      return new Response(
        JSON.stringify({ error: 'Lucidchart credentials not fully configured' }),
        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
      );
    }

    const token = await getLucidToken(clientId, clientSecret);
    const { action, payload = {} } = await req.json();
    const apiBase = 'https://api.lucid.co';
    const headers = { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' };

    let url = '';
    switch (action) {
      case 'list_documents':
        url = `${apiBase}/users/${userId}/documents`;
        break;
      case 'get_document':
        url = `${apiBase}/documents/${payload.document_id}`;
        break;
      case 'get_pages':
        url = `${apiBase}/documents/${payload.document_id}/pages`;
        break;
      default:
        return new Response(
          JSON.stringify({ error: `Unknown action: ${action}` }),
          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
        );
    }

    const res = await fetch(url, { headers });
    const data = await res.json();

    return new Response(JSON.stringify(data), {
      status: res.status,
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    });
  } catch (err) {
    return new Response(
      JSON.stringify({ error: err.message }),
      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
    );
  }
});
```

**Expected result:** The lucidchart-proxy Edge Function is deployed. You can verify it by checking Cloud → Logs and testing the list_documents action to confirm your OAuth2 credentials are working.

### 4. Build the diagram browser and embedding interface

With both the embedding approach and the API Edge Function in place, ask Lovable to build the diagram viewer interface. For most use cases, the primary interaction is embedding — displaying a Lucidchart diagram in an iframe with the correct dimensions and responsive behavior. The API calls are used to populate a document browser sidebar.

The embedding pattern requires careful attention to responsive iframe sizing. Lucidchart diagrams have fixed aspect ratios, so you need to use a padding-based responsive container technique (the 'aspect ratio box' CSS pattern) or set explicit dimensions based on the diagram type. Org charts typically need height proportional to the org depth, while flowcharts may be wider than tall.

**Expected result:** A diagram library page shows your Lucidchart documents in the sidebar. Clicking a document displays its pages as embedded iframes in the main area, showing your actual Lucidchart diagrams.

## Best practices

- Prefer iframe embedding over API-fetched content for displaying diagrams — it is simpler, always shows the latest published version, and eliminates authentication complexity for read-only display.
- Store Lucidchart embed URLs in a Supabase table rather than hardcoding them in React components — this allows non-technical team members to update diagram links without code changes.
- Always verify that documents have public embedding enabled before using their embed URLs in production — the app should handle the case where an iframe shows 'Access denied' by displaying an error state.
- Cache OAuth2 access tokens within the Edge Function execution context when making multiple API calls in a single request, since fetching a new token for every individual API call adds unnecessary latency.
- Use the page parameter in embed URLs to link to specific diagram pages when your app context makes a specific page relevant — for example, linking an org chart page for a specific department.
- Set explicit width and height constraints on embedded Lucidchart iframes — without constraints, some diagrams render at a very small size or overflow their containers on mobile screens.
- For security, use Supabase RLS policies to control which Lucidchart embed URLs are visible to which users, especially if different teams have diagrams that should not be cross-visible.

## Use cases

### Company org chart embedded in a team directory app

Build a team directory page in Lovable that embeds the company org chart from Lucidchart alongside a searchable employee directory. The org chart is always current because it is embedded from the published Lucidchart version. Clicking a department name in the directory filters the embedded chart view to show that department's structure. This combines structured data from Supabase with visual org chart display from Lucidchart.

Prompt example:

```
Create a Team Directory page with two sections. Top section: embed our Lucidchart org chart using an iframe with the published embed URL stored as an environment variable. Make the iframe responsive with a minimum height of 600px. Add a department filter dropdown above the iframe that updates the iframe URL with a page parameter to show different departments. Bottom section: a searchable table of employees with columns for Name, Department, Role, and Manager, loaded from a Supabase employees table. Clicking an employee row highlights their name in the embedded org chart.
```

### Technical documentation viewer with diagram browser

Create an internal documentation portal that lists all Lucidchart documents in your workspace via the API, organized by folder. Users click a document to view its pages — architecture diagrams, sequence diagrams, data flow charts — embedded inline within the documentation text. Each diagram page is stored as a section in a Supabase documentation table alongside written explanations, creating a rich technical reference tool.

Prompt example:

```
Build a Technical Documentation viewer that calls the lucidchart-proxy Edge Function with action 'list_documents' to show all available Lucidchart diagrams in a left sidebar organized by folder. When a document is clicked, fetch its pages using action 'get_pages' and display them as tabs. Each tab embeds the corresponding Lucidchart page as an iframe using the page's embed URL. Below each diagram embed show an editable description field that saves to a Supabase documentation_notes table. Add a search input in the sidebar to filter documents by name.
```

### Process documentation page with embedded flowcharts

Build a process documentation page where each documented business process has an associated Lucidchart flowchart embedded inline. Store process step descriptions, owners, and links to Lucidchart document IDs in Supabase. When viewing a process, the Lovable app fetches the latest published version of the Lucidchart diagram and embeds it alongside the step-by-step text documentation. This keeps diagrams and written procedures in sync.

Prompt example:

```
Create a Process Documentation page that reads from a Supabase processes table with columns: id, name, description, owner, lucidchart_embed_url, and steps (JSONB array). Display each process as an expandable accordion. When expanded, show the process description, the owner, and embed the Lucidchart diagram using the stored lucidchart_embed_url in a responsive iframe. Below the diagram show the process steps as a numbered list with step name, description, and responsible party. Add an 'Edit' button for each process that opens a modal to update the description and embed URL.
```

## Troubleshooting

### Embedded Lucidchart iframe shows 'Access denied' or a blank white page

Cause: The Lucidchart document does not have public viewing or embedding enabled. By default, Lucidchart documents are private and cannot be embedded without authentication. The 'Access denied' message appears when the embedded URL requires login.

Solution: In Lucidchart, open the document and click Share. Set the access level to 'Anyone with the link can view'. Look for an Embed option in the Share dialog and confirm embedding is enabled. The embed URL should be different from the regular share URL — it uses the /documents/embedded/ path. Regenerate the embed URL after enabling public access.

### OAuth2 token request returns 'invalid_client' error

Cause: The LUCIDCHART_CLIENT_ID or LUCIDCHART_CLIENT_SECRET in Cloud Secrets does not match the credentials generated in the Lucidchart developer portal. This can happen if the wrong application's credentials were copied, if there are extra spaces in the values, or if the client secret was regenerated after being copied.

Solution: Navigate to developer.lucid.co and verify your application's client ID and secret. If the secret was regenerated, update LUCIDCHART_CLIENT_SECRET in Cloud → Secrets with the new value. Confirm that the grant type your application supports includes 'client_credentials' — some Lucidchart app types may only support the authorization code flow.

### list_documents returns an empty array even though documents exist in Lucidchart

Cause: The LUCIDCHART_USER_ID does not match the account that owns the documents, or the OAuth2 application does not have the correct scopes to list documents for this user.

Solution: Verify the LUCIDCHART_USER_ID in Cloud Secrets matches your Lucidchart account ID (not the application ID). The user ID can be found in your Lucidchart account settings or in the URL path when logged in. Also check that the OAuth2 application in the developer portal has the 'documents:read' scope enabled — without this scope, the documents endpoint returns empty results rather than an authorization error.

### Edge Function times out when fetching the OAuth token

Cause: Lucidchart's OAuth token endpoint (api.lucid.co/oauth2/token) is taking too long to respond. This can happen during high traffic periods or if there is a network routing issue between the Edge Function's Deno Deploy infrastructure and Lucidchart's API servers.

Solution: Add a timeout to the fetch call in the getLucidToken function using AbortController. If the token request times out, return a descriptive error rather than hanging. Edge Functions have a 60-second execution limit — if token requests consistently time out, add retry logic with exponential backoff.

```
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 10000);
const res = await fetch(url, { signal: controller.signal });
clearTimeout(timeout);
```

## Frequently asked questions

### Do I need a paid Lucidchart plan to use the API?

Yes, the Lucidchart REST API is available on Team and Enterprise plans. The free Individual plan does not include API access. If you only need iframe embedding (not programmatic document listing), you can use the free plan by manually copying embed URLs from the Share dialog — no API credentials required for embedding published documents.

### Can I use Lucidchart's API to programmatically create or modify diagrams?

The Lucidchart REST API is primarily read-focused — it provides endpoints for listing documents, reading document metadata, and accessing page information. Creating or editing diagram content programmatically requires either the Lucidchart editor embed API (which renders the editor in an iframe with JavaScript interaction) or using Lucidchart's template import feature with Visio or VSDX files. Complex diagram generation is not supported through simple REST API calls.

### How do I display only specific pages of a multi-page Lucidchart document?

Append ?page=PAGE_NUMBER to the embed URL, where PAGE_NUMBER starts at 1. For example, to embed the third page of a document: https://lucid.app/documents/embedded/YOUR-DOC-ID?page=3. You can combine this with the get_pages API action to programmatically list all available pages and generate the correct embed URL for each one dynamically in your Lovable app.

### Can other users in my organization connect their Lucidchart accounts to the Lovable app?

The client credentials OAuth2 flow described in this guide is for accessing your own organization's documents. For a true multi-user app where individuals authenticate with their own Lucidchart accounts, you would need to implement the full OAuth2 authorization code flow with a login redirect. This requires registering a public OAuth application, handling callback URLs, and managing refresh tokens — significantly more complex than the server-to-server pattern described here.

### Is there a rate limit for Lucidchart API calls?

Lucidchart imposes rate limits on API usage, with the specific limits depending on your account plan. The embed URL approach bypasses API rate limits entirely since embedded diagrams are served as static web pages, not API calls. For the document listing and metadata API calls, implement caching in Supabase to minimize API requests — document lists rarely change and can be refreshed every few minutes rather than on every page load.

---

Source: https://www.rapidevelopers.com/lovable-integration/lucidchart
© RapidDev — https://www.rapidevelopers.com/lovable-integration/lucidchart