Lucidchart Diagram Version Badge

WHAT IT DOES

This userscript adds a compact, informative version badge to your Lucidchart diagrams, giving you instant visibility into the diagram's version history. The badge displays the current version number and a color-coded indicator: green for recently modified diagrams (within 24 hours), yellow for moderate age (within your configured threshold), and red for older diagrams. Hovering over the badge reveals a detailed tooltip showing the version number, last modified date and time, total revision count, and whether this is the latest version. Clicking the badge opens the version history panel (configurable), allowing you to quickly view previous versions, compare changes, or restore older revisions. This is invaluable for teams collaborating on diagrams, designers tracking iterations, and anyone who needs to ensure they are working on the latest version or understand a diagram's revision history at a glance.

WHERE IT RUNS

The script runs on all Lucidchart web application pages at *.lucid.app/*, with automatic detection of diagram pages (paths containing /documents/ or /boards/). It works across all Lucidchart interfaces by detecting the document header and injecting the badge into the toolbar or header area. The script detects dynamic content loading and re-injects the badge when navigating between diagrams. It runs across the entire Lucid domain, ensuring coverage whether you're viewing a diagram, in presentation mode, or browsing your document library.

HOW TO USE

Install the script via the BotGentz extension and open any Lucidchart diagram. A version badge will appear in the diagram header showing the current version number and a color-coded dot. Hover over the badge to see a detailed tooltip with version information, last modified time, and revision count. Click the badge (if auto-open is enabled) to open the version history panel. Use the panel controls to customize your experience: toggle the badge on or off, adjust the age threshold that determines color coding (default 7 days), choose whether to show the timestamp on the badge, or enable auto-open of the version history panel on badge click. The "Refresh badge" button manually re-scans for version information, and the "Open version history" button provides manual access to the version history panel.

THE MECHANISM - VERSION DETECTION, AGE CALCULATION, AND VISUAL BADGING

This script identifies version information by scanning the DOM for known Lucidchart elements. It uses a cascading selector strategy that looks for version numbers (.version-number, .version-label, .revision-number), last modified timestamps (.last-modified, .modified-date, .timestamp), and revision counts (.revision-count, .version-count). When direct selectors fail, the script checks the URL for version parameters and page metadata. The extracted version number, timestamp, and revision count are stored in a version info object. Age is calculated by comparing the last modified timestamp to the current time, and the color is determined by comparing the age in days to the user-configured threshold (green for less than 1 day, yellow for less than the threshold, red for older). The tooltip is built as a DOM element with formatted content and positioned relative to the badge. The badge is injected into the document header with inline styles that match the Lucidchart aesthetic.

THE PANEL

The control panel appears as a floating, draggable element that you can position anywhere on the Lucidchart page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the version emoji (🆕), minimizing distraction while keeping controls accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes all setting toggles, threshold controls, action buttons, and current version information. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Lucidchart, with the badge updating automatically as you move between diagrams.

PLEASE NOTE

This script requires the free BotGentz extension to function. It is designed for Lucidchart users who need visibility into diagram versions and revision history. The script reads only visible version data from the DOM—it does not access Lucidchart's API, your account credentials, or any sensitive information. All settings (badge visibility, age threshold, timestamp preference, auto-open behavior, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your Lucidchart data—it only reads and displays visible version information. The version information displayed is based on what is visible on the page; if the version history panel is not opened, the script may show limited information. If Lucidchart updates its website structure, the script may need to be updated to match new selectors. The badge's color coding is based on local calculations and may not reflect official Lucidchart status indicators.