Feature: diagram viewer for PlantUML and Draw.io files

Add a new "Diagrams" tab in the bottom panel that renders design
documents inline. Double-click a .puml or .drawio file in the
folder panel to view it.

PlantUML: encodes diagram text (deflate + custom base64), fetches
SVG from plantuml.com server, displays inline with zoom controls.

Draw.io: loads .drawio XML into a sandboxed iframe with the
draw.io viewer library for full-fidelity rendering.

Architecture: extends the existing FileDisplayMode pattern with
diagram file detection, IPC handlers for server-side rendering,
and a dedicated bottom panel tab with zoom/refresh controls.

Supported extensions: .puml, .plantuml, .pu, .iuml, .drawio, .dio

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ozgesolidkey

src/main/index.ts

@@ -5865,6 +5865,83 @@ ipcMain.handle('filter-presets-delete', (_, id: string) => {
   return { success: true };
 });
 
+// ── PlantUML encoding ────────────────────────────────────────────────
+function encodePlantUML(text: string): string {
+  const zlib = require('zlib');
+  const data = zlib.deflateRawSync(Buffer.from(text, 'utf-8'));
+  const encode6bit = (b: number): string => {
+    if (b < 10) return String.fromCharCode(48 + b);
+    b -= 10;
+    if (b < 26) return String.fromCharCode(65 + b);
+    b -= 26;
+    if (b < 26) return String.fromCharCode(97 + b);
+    b -= 26;
+    if (b === 0) return '-';
+    if (b === 1) return '_';
+    return '?';
+  };
+  let result = '';
+  for (let i = 0; i < data.length; i += 3) {
+    const b1 = data[i];
+    const b2 = i + 1 < data.length ? data[i + 1] : 0;
+    const b3 = i + 2 < data.length ? data[i + 2] : 0;
+    result += encode6bit(b1 >> 2);
+    result += encode6bit(((b1 & 0x3) << 4) | (b2 >> 4));
+    result += encode6bit(((b2 & 0xF) << 2) | (b3 >> 6));
+    result += encode6bit(b3 & 0x3F);
+  }
+  return result;
+}
+
+// ── Diagram rendering IPC ────────────────────────────────────────────
+ipcMain.handle(IPC.RENDER_DIAGRAM, async (_event, filePath: string) => {
+  try {
+    const ext = path.extname(filePath).toLowerCase();
+    const content = fs.readFileSync(filePath, 'utf-8');
+
+    if (ext === '.puml' || ext === '.plantuml' || ext === '.pu' || ext === '.iuml') {
+      // PlantUML: encode and fetch SVG from server
+      const encoded = encodePlantUML(content);
+      const url = `https://www.plantuml.com/plantuml/svg/${encoded}`;
+
+      // Use Node's https to fetch
+      const https = require('https');
+      const svg = await new Promise<string>((resolve, reject) => {
+        https.get(url, (res: any) => {
+          if (res.statusCode !== 200) {
+            reject(new Error(`PlantUML server returned ${res.statusCode}`));
+            return;
+          }
+          let data = '';
+          res.on('data', (chunk: string) => { data += chunk; });
+          res.on('end', () => resolve(data));
+        }).on('error', reject);
+      });
+
+      return { success: true, type: 'svg', content: svg, fileName: path.basename(filePath) };
+    }
+
+    if (ext === '.drawio' || ext === '.dio') {
+      // Draw.io: return XML content + viewer HTML
+      return { success: true, type: 'drawio', content, fileName: path.basename(filePath) };
+    }
+
+    return { success: false, error: `Unsupported diagram format: ${ext}` };
+  } catch (err: any) {
+    return { success: false, error: err.message || String(err) };
+  }
+});
+
+// ── Read file text IPC ───────────────────────────────────────────────
+ipcMain.handle(IPC.READ_FILE_TEXT, async (_event, filePath: string) => {
+  try {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    return { success: true, content, fileName: path.basename(filePath) };
+  } catch (err: any) {
+    return { success: false, error: err.message || String(err) };
+  }
+});
+
 ipcMain.handle('agent-browse-script', async () => {
   const result = await dialog.showOpenDialog({
     title: 'Select Agent Script',

src/preload/index.ts

@@ -67,6 +67,9 @@ const IPC = {
   TRACEBACK: 'traceback',
   // Time Align
   GET_LINE_TIMESTAMPS: 'get-line-timestamps',
+  // Diagram rendering
+  RENDER_DIAGRAM: 'render-diagram',
+  READ_FILE_TEXT: 'read-file-text',
   // Tabbed terminal
   TERMINAL_CREATE_LOCAL: 'terminal-create-local',
   TERMINAL_CREATE_SSH: 'terminal-create-ssh',
@@ -407,6 +410,12 @@ const api = {
   readFileContent: (filePath: string): Promise<{ success: boolean; content?: string; sizeMB?: number; error?: string }> =>
     ipcRenderer.invoke('read-file-content', filePath),
 
+  // Diagram rendering
+  renderDiagram: (filePath: string): Promise<{ success: boolean; type?: string; content?: string; fileName?: string; error?: string }> =>
+    ipcRenderer.invoke(IPC.RENDER_DIAGRAM, filePath),
+  readFileText: (filePath: string): Promise<{ success: boolean; content?: string; fileName?: string; error?: string }> =>
+    ipcRenderer.invoke(IPC.READ_FILE_TEXT, filePath),
+
   // Search configs
   searchConfigSave: (config: any): Promise<{ success: boolean }> =>
     ipcRenderer.invoke(IPC.SEARCH_CONFIG_SAVE, config),

src/renderer/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src 'self' file:;">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src 'self' file:; frame-src blob:;">
   <title>LOGAN - Log Analyzer</title>
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="lib/xterm.css">
@@ -387,6 +387,7 @@ <h2>LOGAN</h2>
           <button class="bottom-tab-btn" data-bottom-tab="contexts" data-help="Define must+clue patterns to find correlated log events.&#10;Example: must:&quot;ERROR&quot; + clue:&quot;timeout&quot; within 10 lines.&#10;Lanes view shows each context as a colored row for comparison.">Contexts</button>
           <button class="bottom-tab-btn" data-bottom-tab="video" data-help="Sync a video recording with log timestamps.&#10;Set a sync point to correlate video playback with log lines.">Video</button>
           <button class="bottom-tab-btn" data-bottom-tab="image" data-help="View images referenced in log files.&#10;Drag and drop or open image files for side-by-side analysis.">Image</button>
+          <button class="bottom-tab-btn" data-bottom-tab="diagram" data-help="View PlantUML and Draw.io diagrams.&#10;Double-click a .puml or .drawio file in the folder panel.">Diagrams</button>
           <button class="bottom-tab-btn" data-bottom-tab="live" data-help="Connect to live log sources: Serial ports, ADB logcat, or SSH.&#10;Up to 4 parallel connections with real-time streaming.">Live</button>
           <button class="bottom-tab-btn" data-bottom-tab="time-align" data-help="Visually align search config results by timestamp.&#10;Each enabled config becomes a draggable timeline lane.&#10;Drag lanes left/right to apply time offsets and correlate events.">Time Align</button>
           <button class="bottom-tab-btn" data-bottom-tab="traceback" data-help="Reverse timeline from any error line.&#10;Right-click a line → Traceback from here.&#10;Shows what led to the error: same component, warnings, escalations.">Traceback</button>
@@ -545,6 +546,34 @@ <h2>LOGAN</h2>
             </div>
           </div>
         </div>
+        <!-- Diagram tab -->
+        <div class="bottom-tab-view" data-bottom-tab="diagram">
+          <div class="diagram-panel-body">
+            <div class="diagram-viewer-toolbar">
+              <span id="diagram-file-name" class="image-file-name"></span>
+              <span id="diagram-type-badge" class="diagram-type-badge"></span>
+              <div style="flex:1"></div>
+              <button id="btn-diagram-zoom-in" class="image-viewer-btn" title="Zoom in" aria-label="Zoom in">+</button>
+              <span id="diagram-zoom-level" class="image-zoom-level">100%</span>
+              <button id="btn-diagram-zoom-out" class="image-viewer-btn" title="Zoom out" aria-label="Zoom out">&minus;</button>
+              <button id="btn-diagram-zoom-fit" class="image-viewer-btn" title="Fit to window" aria-label="Fit to window">Fit</button>
+              <button id="btn-diagram-refresh" class="image-viewer-btn" title="Re-render diagram" aria-label="Refresh diagram">&#8635;</button>
+            </div>
+            <div id="diagram-content" class="diagram-content">
+              <div class="video-drop-zone">
+                <div class="video-drop-zone-content">
+                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M12 18v-6"/><path d="M9 15l3-3 3 3"/></svg>
+                  <p>Open a .puml or .drawio file from the folder panel</p>
+                </div>
+              </div>
+            </div>
+            <div id="diagram-loading" class="diagram-loading hidden">
+              <div class="diagram-spinner"></div>
+              <span>Rendering diagram...</span>
+            </div>
+            <div id="diagram-error" class="diagram-error hidden"></div>
+          </div>
+        </div>
         <!-- Live tab -->
         <div class="bottom-tab-view" data-bottom-tab="live">
           <div class="live-panel-body">

src/renderer/renderer.ts

@@ -4810,6 +4810,8 @@ function renderFolderTree(): void {
         toggleBottomTab('video');
       } else if (fileType === 'image') {
         openImageInPanel(filePath);
+      } else if (isDiagramFile(filePath)) {
+        openDiagramInPanel(filePath);
       } else {
         await loadFile(filePath);
       }
@@ -9844,6 +9846,12 @@ async function loadFile(filePath: string, createNewTab: boolean = true): Promise
     return;
   }
 
+  // Handle diagram files in bottom panel
+  if (isDiagramFile(filePath)) {
+    openDiagramInPanel(filePath);
+    return;
+  }
+
   showProgress('Indexing file...');
 
   const unsubscribe = window.api.onIndexingProgress((progress) => {
@@ -13521,6 +13529,13 @@ function isImageFile(filePath: string): boolean {
   return IMAGE_EXTENSIONS.has(ext);
 }
 
+const DIAGRAM_EXTENSIONS = new Set(['puml', 'plantuml', 'pu', 'iuml', 'drawio', 'dio']);
+
+function isDiagramFile(filePath: string): boolean {
+  const ext = filePath.toLowerCase().split('.').pop() || '';
+  return DIAGRAM_EXTENSIONS.has(ext);
+}
+
 // Image viewer state (bottom panel)
 let imageZoom = 1;
 const imageViewerContainer = document.getElementById('image-viewer-container') as HTMLDivElement;
@@ -13580,6 +13595,138 @@ imageViewerContainer?.addEventListener('wheel', (e) => {
   setImageZoom(imageZoom * delta);
 }, { passive: false });
 
+// ── Diagram Viewer ───────────────────────────────────────────────────────────
+let diagramZoom = 1;
+let currentDiagramPath = '';
+
+function openDiagramInPanel(filePath: string): void {
+  currentDiagramPath = filePath;
+  const ext = filePath.toLowerCase().split('.').pop() || '';
+  const fileName = filePath.split('/').pop() || filePath;
+
+  const contentEl = document.getElementById('diagram-content') as HTMLDivElement;
+  const loadingEl = document.getElementById('diagram-loading') as HTMLDivElement;
+  const errorEl = document.getElementById('diagram-error') as HTMLDivElement;
+  const fileNameEl = document.getElementById('diagram-file-name') as HTMLSpanElement;
+  const badgeEl = document.getElementById('diagram-type-badge') as HTMLSpanElement;
+  const zoomEl = document.getElementById('diagram-zoom-level') as HTMLSpanElement;
+
+  if (!contentEl) return;
+
+  // Reset
+  diagramZoom = 1;
+  if (zoomEl) zoomEl.textContent = '100%';
+  if (fileNameEl) fileNameEl.textContent = fileName;
+
+  // Set badge
+  if (badgeEl) {
+    if (ext === 'drawio' || ext === 'dio') {
+      badgeEl.textContent = 'Draw.io';
+      badgeEl.style.background = '#f08705';
+    } else {
+      badgeEl.textContent = 'PlantUML';
+      badgeEl.style.background = '#7b5ea7';
+    }
+  }
+
+  // Show loading
+  contentEl.innerHTML = '';
+  loadingEl?.classList.remove('hidden');
+  errorEl?.classList.add('hidden');
+
+  // Switch to diagram tab
+  toggleBottomTab('diagram');
+
+  // Render
+  (window as any).api.renderDiagram(filePath).then((result: any) => {
+    loadingEl?.classList.add('hidden');
+
+    if (!result.success) {
+      if (errorEl) {
+        errorEl.textContent = result.error || 'Failed to render diagram';
+        errorEl.classList.remove('hidden');
+      }
+      return;
+    }
+
+    if (result.type === 'svg') {
+      // PlantUML: inject SVG directly
+      const wrapper = document.createElement('div');
+      wrapper.className = 'diagram-svg-wrapper';
+      wrapper.innerHTML = result.content;
+      contentEl.innerHTML = '';
+      contentEl.appendChild(wrapper);
+    } else if (result.type === 'drawio') {
+      // Draw.io: create iframe with viewer
+      renderDrawioInIframe(contentEl, result.content);
+    }
+  }).catch((err: any) => {
+    loadingEl?.classList.add('hidden');
+    if (errorEl) {
+      errorEl.textContent = `Error: ${err.message || err}`;
+      errorEl.classList.remove('hidden');
+    }
+  });
+}
+
+function renderDrawioInIframe(container: HTMLDivElement, xmlContent: string): void {
+  // Create self-contained HTML with draw.io viewer
+  const escapedXml = xmlContent.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''');
+
+  const html = `<!DOCTYPE html>
+<html><head>
+<meta charset="UTF-8">
+<style>
+  body { margin: 0; padding: 0; overflow: hidden; background: #fff; }
+  .mxgraph { width: 100%; height: 100vh; }
+</style>
+</head><body>
+<div class="mxgraph" style="max-width:100%;border:none;" data-mxgraph='{"highlight":"#0000ff","nav":true,"resize":true,"xml":"${escapedXml}"}'></div>
+<script src="https://viewer.diagrams.net/js/viewer-static.min.js"><\/script>
+</body></html>`;
+
+  const blob = new Blob([html], { type: 'text/html' });
+  const blobUrl = URL.createObjectURL(blob);
+
+  const iframe = document.createElement('iframe');
+  iframe.src = blobUrl;
+  iframe.style.width = '100%';
+  iframe.style.height = '100%';
+  iframe.style.border = 'none';
+  iframe.style.background = '#fff';
+  iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+  iframe.onload = () => URL.revokeObjectURL(blobUrl);
+
+  container.innerHTML = '';
+  container.appendChild(iframe);
+}
+
+// Diagram zoom controls
+function setupDiagramControls(): void {
+  const zoomIn = document.getElementById('btn-diagram-zoom-in');
+  const zoomOut = document.getElementById('btn-diagram-zoom-out');
+  const zoomFit = document.getElementById('btn-diagram-zoom-fit');
+  const refresh = document.getElementById('btn-diagram-refresh');
+  const zoomEl = document.getElementById('diagram-zoom-level');
+
+  function updateDiagramZoom(): void {
+    const wrapper = document.querySelector('.diagram-svg-wrapper') as HTMLElement;
+    if (wrapper && zoomEl) {
+      wrapper.style.transform = `scale(${diagramZoom})`;
+      zoomEl.textContent = `${Math.round(diagramZoom * 100)}%`;
+      const contentEl = document.getElementById('diagram-content');
+      if (contentEl) {
+        contentEl.classList.toggle('zoomed', diagramZoom > 1);
+      }
+    }
+  }
+
+  zoomIn?.addEventListener('click', () => { diagramZoom = Math.min(diagramZoom * 1.25, 5); updateDiagramZoom(); });
+  zoomOut?.addEventListener('click', () => { diagramZoom = Math.max(diagramZoom / 1.25, 0.1); updateDiagramZoom(); });
+  zoomFit?.addEventListener('click', () => { diagramZoom = 1; updateDiagramZoom(); });
+  refresh?.addEventListener('click', () => { if (currentDiagramPath) openDiagramInPanel(currentDiagramPath); });
+}
+
 // ─── File Display Mode System ────────────────────────────────────────────────
 //
 // Each mode owns its own activate() and deactivate() lifecycle.
@@ -15613,6 +15760,7 @@ function init(): void {
   setupSectionToggles();
   setupModalCloseHandlers();
   setupKeyboardShortcuts();
+  setupDiagramControls();
 
   // Load initial data
   loadBookmarks();