Fix for embedded URL length limit for large diagrams — fragment + compression

Feature Suggestions
1

Hello,

I’d like to start by saying I really like the feature where you can encode full DBML diagrams inside a URL to allow sharing or embedding inside a web page!

Issue

I’ve been playing around with it, but I ran into the URL limit issue when working with lager schemas.

Your docs already acknowledge this:

“Very large diagrams may exceed URL length limits in some browsers or tools. We’ll try to solve this content length limitation in the future.”

I thought I might suggest a solution that’s fully client-side, requires minimal code changes, and keeps full backward compatibility.

Disclaimer: I used AI (Claude) to help me with the proposal, and since your webapp is not open source, I was not able to test the implementation

Proposal

The idea would be to allow the data part now encoded in ?c= to be put in the fragment #c= part of the URL, which will stay local and can be of any length, but can still be processed by the application and shared normally.

This exact pattern is already used by Mermaid Live Editor and Excalidraw to handle large diagram payloads without a backend. It’s a well-proven approach.

The change is small, non-breaking, and removes an acknowledged limitation entirely.

// ENCODING (generating the share URL)
// Before
const url = `https://dbdiagram.io/embed?c=${encodeURIComponent(btoa(unescape(encodeURIComponent(dbml))))}`;

// After (using pako for compression, or the native CompressionStream API)
const compressed = pako.deflate(new TextEncoder().encode(dbml));
const base64 = btoa(String.fromCharCode(...compressed));
const url = `https://dbdiagram.io/embed#c=${encodeURIComponent(base64)}`;

// DECODING (reading the URL on page load)
function getDbmlFromUrl() {
  // New format
  if (window.location.hash.startsWith('#c=')) {
    const base64 = decodeURIComponent(window.location.hash.slice(3));
    const bytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
    return new TextDecoder().decode(pako.inflate(bytes));
  }
  // Old format — keeps existing URLs working
  const params = new URLSearchParams(window.location.search);
  if (params.has('c')) {
    return decodeURIComponent(escape(atob(params.get('c'))));
  }
}

Let me know what you think, and thanks again for this cool tool!