feat: Mermaid.js integration #20-29 — full diagram support

- CDN: mermaid@11 from jsdelivr
- mermaid-viewer.js: init, render, templates, zoom/pan, fullscreen, focus
- All diagram types: flowchart, sequence, class, state, ER, journey, gantt,
  pie, gitGraph, requirement, mindmap, timeline, quadrant, C4 (x4), beta types
- viewer.js: auto-render Mermaid blocks after markdown rendering
- utils.js: live preview panel in editor (debounced 500ms)
- app.js: initMermaid + setupFocusMode on startup
- CSS: container, controls, error, fullscreen overlay, focus panel, live preview
- Export SVG/PNG download buttons
- Obsidian preprocessor ([[links]], ![[img]], ==highlight==)

frontend/style.css

@@ -7616,6 +7616,97 @@ body.popup-mode .content-area {
 }
 .backup-manager-error { color: var(--danger); }
 
+/* ==========================================================================
+   Mermaid.js Diagrams
+   ========================================================================== */
+
+.mermaid-container {
+  position: relative;
+  margin: 12px 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg-secondary);
+}
+
+.mermaid-rendered {
+  padding: 16px;
+  overflow: hidden;
+  min-height: 80px;
+  display: flex;
+  justify-content: center;
+}
+
+.mermaid-rendered svg { max-width: 100%; height: auto; }
+
+.mermaid-controls {
+  position: absolute;
+  top: 6px; right: 6px;
+  display: flex; gap: 2px;
+  opacity: 0; transition: opacity 0.15s;
+}
+.mermaid-container:hover .mermaid-controls { opacity: 1; }
+
+.mermaid-btn {
+  width: 28px; height: 28px;
+  border: 1px solid var(--border); border-radius: 4px;
+  background: var(--bg-primary); color: var(--text-secondary);
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+}
+.mermaid-btn:hover { color: var(--accent); border-color: var(--accent); }
+
+.mermaid-error {
+  margin: 12px 0; padding: 12px 16px;
+  border: 1px solid rgba(239,68,68,0.3); border-radius: 6px;
+  background: rgba(239,68,68,0.08); color: var(--danger);
+  font-size: 0.8rem; line-height: 1.5;
+}
+.mermaid-error strong { display: block; margin-bottom: 4px; }
+
+.mermaid-fullscreen-overlay {
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 10000; background: rgba(0,0,0,0.85);
+  display: flex; align-items: center; justify-content: center;
+}
+.mermaid-fullscreen-close {
+  position: absolute; top: 16px; right: 16px;
+  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px; background: rgba(0,0,0,0.5); color: #fff;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  z-index: 1;
+}
+.mermaid-fullscreen-close:hover { background: rgba(255,255,255,0.1); }
+.mermaid-fullscreen-content { max-width: 95vw; max-height: 95vh; }
+
+.mermaid-focus-panel {
+  position: fixed; top: 0; right: 0; bottom: 0; width: 480px;
+  z-index: 9998; background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  box-shadow: -4px 0 24px rgba(0,0,0,0.3);
+  display: flex; flex-direction: column;
+}
+.mermaid-focus-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px; border-bottom: 1px solid var(--border);
+  font-size: 0.85rem; font-weight: 600;
+}
+.mermaid-focus-close {
+  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 4px;
+  background: transparent; color: var(--text-muted); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+}
+.mermaid-focus-close:hover { color: var(--accent); }
+.mermaid-focus-content { flex: 1; overflow: auto; padding: 16px; }
+
+/* Mermaid editor live preview panel */
+.mermaid-live-preview {
+  border-top: 1px solid var(--border);
+  background: var(--bg-secondary);
+  min-height: 100px; max-height: 300px;
+  overflow: auto; padding: 12px;
+}
+.mermaid-live-preview .mermaid-error { margin: 0; }
+
 /* Manager body: list + preview side panel */
 .backup-manager-body { display: flex; gap: 0; min-height: 400px; }