PostgreSQL EXPLAIN Visualizer

Paste your EXPLAIN (ANALYZE, BUFFERS, FORMAT JSON) output and get an interactive visual query plan. Everything runs in your browser.

EXPLAIN Output (JSON or Text)

Clear</button>
</div>
</div></p>
  </div>
  
  <div>
    <div class="ev-panel" style="height:100%;overflow:auto;" id="ev-output">
      <p style="text-align:center;color:#9ca3af;padding:3rem;">Paste EXPLAIN output and click Visualize</p>
    </div>
  </div>
</div>
<script>
const SAMPLES = {
simple: [{"Plan":{"Node Type":"Seq Scan","Parallel Aware":false,"Async Capable":false,"Relation Name":"users","Alias":"users","Startup Cost":0.00,"Total Cost":14.50,"Plan Rows":450,"Plan Width":76,"Actual Startup Time":0.015,"Actual Total Time":0.089,"Actual Rows":450,"Actual Loops":1,"Filter":"(active = true)","Rows Removed by Filter":50,"Shared Hit Blocks":7,"Shared Read Blocks":0},"Planning Time":0.065,"Execution Time":0.112}],

complex: [{"Plan":{"Node Type":"Sort","Startup Cost":245.67,"Total Cost":248.17,"Plan Rows":1000,"Plan Width":44,"Actual Startup Time":3.456,"Actual Total Time":3.789,"Actual Rows":985,"Actual Loops":1,"Sort Key":["o.created_at DESC"],"Sort Method":"quicksort","Sort Space Used":120,"Sort Space Type":"Memory","Shared Hit Blocks":45,"Shared Read Blocks":12,"Plans":[{"Node Type":"Hash Join","Parent Relationship":"Outer","Startup Cost":15.25,"Total Cost":195.50,"Plan Rows":1000,"Plan Width":44,"Actual Startup Time":0.890,"Actual Total Time":2.345,"Actual Rows":985,"Actual Loops":1,"Hash Cond":"(o.user_id = u.id)","Shared Hit Blocks":38,"Shared Read Blocks":10,"Plans":[{"Node Type":"Seq Scan","Parent Relationship":"Outer","Relation Name":"orders","Alias":"o","Startup Cost":0.00,"Total Cost":155.00,"Plan Rows":5000,"Plan Width":28,"Actual Startup Time":0.012,"Actual Total Time":1.234,"Actual Rows":5000,"Actual Loops":1,"Filter":"(status = 'completed')","Rows Removed by Filter":2150,"Shared Hit Blocks":30,"Shared Read Blocks":8},{"Node Type":"Hash","Parent Relationship":"Inner","Startup Cost":11.50,"Total Cost":11.50,"Plan Rows":450,"Plan Width":20,"Actual Startup Time":0.567,"Actual Total Time":0.567,"Actual Rows":450,"Actual Loops":1,"Shared Hit Blocks":5,"Shared Read Blocks":0,"Plans":[{"Node Type":"Seq Scan","Parent Relationship":"Outer","Relation Name":"users","Alias":"u","Startup Cost":0.00,"Total Cost":11.50,"Plan Rows":450,"Plan Width":20,"Actual Startup Time":0.008,"Actual Total Time":0.234,"Actual Rows":450,"Actual Loops":1,"Shared Hit Blocks":5,"Shared Read Blocks":0}]}]}]},"Planning Time":0.234,"Execution Time":4.012}],

slow: [{"Plan":{"Node Type":"Nested Loop","Startup Cost":0.00,"Total Cost":125000.50,"Plan Rows":50000,"Plan Width":120,"Actual Startup Time":0.045,"Actual Total Time":8542.123,"Actual Rows":48750,"Actual Loops":1,"Shared Hit Blocks":150,"Shared Read Blocks":25000,"Plans":[{"Node Type":"Seq Scan","Parent Relationship":"Outer","Relation Name":"transactions","Alias":"t","Startup Cost":0.00,"Total Cost":2500.00,"Plan Rows":100000,"Plan Width":60,"Actual Startup Time":0.015,"Actual Total Time":234.567,"Actual Rows":100000,"Actual Loops":1,"Shared Hit Blocks":100,"Shared Read Blocks":1200},{"Node Type":"Index Scan","Parent Relationship":"Inner","Relation Name":"accounts","Alias":"a","Index Name":"accounts_pkey","Startup Cost":0.29,"Total Cost":1.23,"Plan Rows":1,"Plan Width":64,"Actual Startup Time":0.002,"Actual Total Time":0.078,"Actual Rows":1,"Actual Loops":100000,"Index Cond":"(id = t.account_id)","Shared Hit Blocks":50,"Shared Read Blocks":23800}]},"Planning Time":0.189,"Execution Time":8542.456}]
};

window.loadSample = function(name) {
  document.getElementById('ev-input').value = JSON.stringify(SAMPLES[name], null, 2);
  visualize();
};

window.visualize = function() {
  const raw = document.getElementById('ev-input').value.trim();
  if (!raw) return;

let plan;
  try {
    const parsed = JSON.parse(raw);
    // Handle array wrapper or direct object
    plan = Array.isArray(parsed) ? parsed[0] : parsed;
  } catch(e) {
    // Try to extract JSON from EXPLAIN text output
    const jsonMatch = raw.match(/\[[\s\S]*\]/);
    if (jsonMatch) {
      try {
        plan = JSON.parse(jsonMatch[0])[0];
      } catch(e2) {
        document.getElementById('ev-output').innerHTML = '<p style="color:#ef4444;padding:1rem;">Could not parse input. Use EXPLAIN (FORMAT JSON) for best results.</p>';
        return;
      }
    } else {
      document.getElementById('ev-output').innerHTML = '<p style="color:#ef4444;padding:1rem;">Could not parse input. Paste the JSON output from EXPLAIN (ANALYZE, BUFFERS, FORMAT JSON).</p>';
      return;
    }
  }

const root = plan.Plan || plan;
  const totalTime = root["Actual Total Time"] || root["Total Cost"] || 1;
  const planningTime = plan["Planning Time"] || 0;
  const executionTime = plan["Execution Time"] || 0;

// Collect all nodes for stats
  const allNodes = [];
  function collectNodes(node) {
    allNodes.push(node);
    if (node.Plans) node.Plans.forEach(collectNodes);
  }
  collectNodes(root);

const totalBlocks = allNodes.reduce((s, n) => s + (n["Shared Hit Blocks"] || 0) + (n["Shared Read Blocks"] || 0), 0);
  const hitBlocks = allNodes.reduce((s, n) => s + (n["Shared Hit Blocks"] || 0), 0);
  const hitRatio = totalBlocks > 0 ? ((hitBlocks / totalBlocks) * 100).toFixed(1) : 'N/A';
  const slowestNode = allNodes.reduce((a, b) => ((a["Actual Total Time"] || 0) > (b["Actual Total Time"] || 0) ? a : b));
  const seqScans = allNodes.filter(n => n["Node Type"] === "Seq Scan").length;

// Summary
  let html = '<div class="ev-summary">';
  html += summaryCard(executionTime ? executionTime.toFixed(2) + 'ms' : 'N/A', 'Execution Time');
  html += summaryCard(planningTime ? planningTime.toFixed(3) + 'ms' : 'N/A', 'Planning Time');
  html += summaryCard(allNodes.length, 'Nodes');
  html += summaryCard(hitRatio + '%', 'Buffer Hit Ratio');
  html += summaryCard(seqScans, 'Seq Scans');
  html += summaryCard(slowestNode["Node Type"], 'Slowest Node');
  html += '</div>';

// Warnings
  const warnings = [];
  if (parseFloat(hitRatio) < 90 && hitRatio !== 'N/A') warnings.push('Low buffer hit ratio (' + hitRatio + '%). Consider increasing shared_buffers or investigating cold cache.');
  allNodes.forEach(function(n) {
    if (n["Node Type"] === "Seq Scan" && n["Actual Rows"] > 1000) {
      warnings.push('Sequential scan on <strong>' + (n["Relation Name"] || 'unknown') + '</strong> returned ' + n["Actual Rows"].toLocaleString() + ' rows. Consider adding an index.');
    }
    if (n["Rows Removed by Filter"] && n["Rows Removed by Filter"] > n["Actual Rows"] * 5) {
      warnings.push('Node <strong>' + n["Node Type"] + '</strong> on ' + (n["Relation Name"] || '') + ' filtered out ' + n["Rows Removed by Filter"].toLocaleString() + ' rows (kept only ' + n["Actual Rows"].toLocaleString() + '). An index could help.');
    }
  });

if (warnings.length) {
    html += '<div style="padding:0.6rem 0.8rem;background:#fffbeb;border:1px solid #fbbf24;border-radius:0.375rem;margin-bottom:1rem;font-size:0.8rem;color:#92400e;">';
    html += '<strong>Optimization Hints</strong><ul style="margin:0.3rem 0 0 1rem;padding:0;">';
    warnings.forEach(function(w) { html += '<li style="margin-bottom:0.2rem;">' + w + '</li>'; });
    html += '</ul></div>';
  }

// Node tree
  html += renderNode(root, totalTime, 0);
  document.getElementById('ev-output').innerHTML = html;
};

function renderNode(node, totalTime, depth) {
  const time = node["Actual Total Time"] || 0;
  const loops = node["Actual Loops"] || 1;
  const realTime = time * loops;
  const pct = totalTime > 0 ? (time / totalTime * 100) : 0;
  const isSlow = pct > 50 || (node["Rows Removed by Filter"] && node["Rows Removed by Filter"] > (node["Actual Rows"] || 0) * 5);

const barColor = pct > 60 ? '#ef4444' : pct > 30 ? '#f59e0b' : '#10b981';

let html = '<div class="ev-node' + (isSlow ? ' ev-slow' : '') + '">';
  html += '<div class="ev-node-type">' + node["Node Type"];
  if (node["Relation Name"]) html += ' <span style="font-weight:400;color:#6366f1;">on ' + node["Relation Name"] + '</span>';
  if (node["Index Name"]) html += ' <span style="font-weight:400;color:#10b981;">using ' + node["Index Name"] + '</span>';
  html += '</div>';

// Stats row
  html += '<div style="display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.25rem;">';
  if (node["Actual Total Time"] != null) html += '<span class="ev-stat" style="background:#ede9fe;color:#6d28d9;">' + time.toFixed(2) + 'ms</span>';
  if (node["Actual Rows"] != null) html += '<span class="ev-stat" style="background:#dbeafe;color:#1e40af;">' + node["Actual Rows"].toLocaleString() + ' rows</span>';
  if (node["Plan Rows"] != null && node["Actual Rows"] != null) {
    const est = node["Plan Rows"];
    const act = node["Actual Rows"];
    const ratio = act > 0 ? (est / act) : 0;
    if (ratio > 2 || ratio < 0.5) html += '<span class="ev-stat" style="background:#fef2f2;color:#991b1b;">est: ' + est.toLocaleString() + ' (off by ' + ratio.toFixed(1) + 'x)</span>';
  }
  if (node["Actual Loops"] && node["Actual Loops"] > 1) html += '<span class="ev-stat" style="background:#fef3c7;color:#92400e;">' + node["Actual Loops"].toLocaleString() + ' loops</span>';
  if (node["Shared Hit Blocks"]) html += '<span class="ev-stat" style="background:#d1fae5;color:#065f46;">hits: ' + node["Shared Hit Blocks"] + '</span>';
  if (node["Shared Read Blocks"]) html += '<span class="ev-stat" style="background:#fef2f2;color:#991b1b;">reads: ' + node["Shared Read Blocks"] + '</span>';
  html += '</div>';

// Details
  let details = [];
  if (node["Filter"]) details.push('Filter: ' + node["Filter"]);
  if (node["Hash Cond"]) details.push('Hash Cond: ' + node["Hash Cond"]);
  if (node["Index Cond"]) details.push('Index Cond: ' + node["Index Cond"]);
  if (node["Join Filter"]) details.push('Join Filter: ' + node["Join Filter"]);
  if (node["Sort Key"]) details.push('Sort: ' + node["Sort Key"].join(', '));
  if (node["Sort Method"]) details.push(node["Sort Method"] + (node["Sort Space Used"] ? ' (' + node["Sort Space Used"] + 'kB ' + (node["Sort Space Type"] || '') + ')' : ''));
  if (node["Rows Removed by Filter"]) details.push('Rows removed: ' + node["Rows Removed by Filter"].toLocaleString());
  if (details.length) html += '<div class="ev-node-detail">' + details.join(' · ') + '</div>';

// Time bar
  html += '<div class="ev-bar" style="background:' + barColor + ';width:' + Math.max(2, pct) + '%;opacity:0.7;" title="' + pct.toFixed(1) + '% of total time"></div>';

html += '</div>';

// Children
  if (node.Plans && node.Plans.length) {
    html += '<div class="ev-children">';
    node.Plans.forEach(function(child) {
      html += renderNode(child, totalTime, depth + 1);
    });
    html += '</div>';
  }

return html;
}

function summaryCard(value, label) {
  return '<div class="ev-summary-card"><div class="ev-summary-value">' + value + '</div><div class="ev-summary-label">' + label + '</div></div>';
}
</script>

</section>
    <footer class="pt-8">
      
<section class="flex flex-col items-center pt-6 pb-2">
  <span class="text-xs font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-2">Share this article</span>
  <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_button_linkedin"></a>
    <a class="a2a_button_x"></a>
    <a class="a2a_button_bluesky"></a>
    <a class="a2a_button_reddit"></a>
    <a class="a2a_button_email"></a>
    <a class="a2a_button_copy_link"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
  </div>
</section>

</footer>
  </article>

</main><footer id="site-footer" class="py-10 print:hidden">
  
  
    
  
  <div class="flex items-center justify-between">
    
    
      <p class="text-sm text-neutral-500 dark:text-neutral-400">
          ©
          2026
          Kevin Keller
      </p>

<p class="text-xs text-neutral-500 dark:text-neutral-400">
        
        
        Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
          href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
          href="https://blowfish.page/" target="_blank" rel="noopener noreferrer">Blowfish</a>
      </p>
    
  </div>
  
    <script>
      mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
        margin: 24,
        background: "rgba(0,0,0,0.5)",
        scrollOffset: 0,
      });
    </script>
  
  
  
    
<script async src="https://static.addtoany.com/menu/page.js"></script>
<style>
.a2a_kit { margin: 1rem 0; }
.a2a_kit a { margin-right: 4px !important; }
</style>

</footer>
<div
  id="search-wrapper"
  class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh] z-500"
  data-url="https://kevinkeller.org/">
  <div
    id="search-modal"
    class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800">
    <header class="relative z-10 flex items-center justify-between flex-none px-2">
      <form class="flex items-center flex-auto min-w-0">
        <div class="flex items-center justify-center w-8 h-8 text-neutral-400">
          <span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
        </div>
        <input
          type="search"
          id="search-query"
          class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent"
          placeholder="Search"
          tabindex="0">
      </form>
      <button
        id="close-search-button"
        class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
        title="Close (Esc)">
        <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
</span>
      </button>
    </header>
    <section class="flex-auto px-2 overflow-auto">
      <ul id="search-results">
        
      </ul>
    </section>
  </div>
</div>

</div>
  </body>
  
</html>