feat(optimize): Diagram Doctor panel to declutter tangled flowcharts

Add an Optimize side panel that analyses the active flowchart and applies
one-click, reversible source rewrites to make dense graphs readable.

- optimize.ts: pure, label-aware flowchart parser + metrics, a 0-100
  readability score, and transforms — ELK layered layout, node/rank
  spacing + curved edges, de-emphasising cross-cutting hub edges
  (event bus / audit / cost-style fan-ins), duplicate-edge removal,
  direction toggle, and a non-destructive focus variant.
- mermaid.ts: register @mermaid-js/layout-elk so `layout: elk` renders.
- OptimizePanel.svelte + Toolbar toggle; panels are mutually exclusive.
- Preview: render the focus variant when a node is spotlighted, with a
  clear-focus pill.
- store/Editor: applySource() bumps a revision so programmatic rewrites
  re-sync CodeMirror and stay undoable with the editor's history.
This commit is contained in:
2026-05-22 20:11:49 +03:00
parent b648ee904d
commit bbc12ee4be
11 changed files with 1249 additions and 8 deletions

View File

@@ -20,6 +20,14 @@ TypeScript** frontend using **CodeMirror 6** and **Mermaid 11**.
- **Git version control built in** — view the working-tree status, write commit
messages, browse history, create branches and switch between them. Each branch
keeps its own set of diagrams, just like normal Git.
- **Optimize panel (Diagram Doctor)** — analyse a tangled flowchart and declutter
it in one click: a readability score and metrics (hubs, density, cross-group
edges), plus source rewrites for the **ELK layered layout**, extra
spacing/curved edges, **de-emphasising cross-cutting hub edges** (event bus,
audit, cost-style fan-ins), and removing duplicate edges. A non-destructive
**focus mode** spotlights any node and its neighbours so you can read a dense
graph without changing it. Every rewrite lands in the editor and is reversible
with ⌘Z.
- **Export** the current diagram to **SVG** or **PNG** (2× scale).
- **Project registry** — recently opened projects are remembered in a local
SQLite database so you can jump back in from the start screen.
@@ -35,9 +43,10 @@ Mermix/
│ ├─ lib/
│ │ ├─ api.ts # typed wrappers over Tauri commands
│ │ ├─ store.svelte.ts # central rune-based app state
│ │ ├─ mermaid.ts # render + error capture
│ │ ├─ mermaid.ts # render + error capture (registers ELK layout)
│ │ ├─ optimize.ts # flowchart analysis + declutter transforms (pure)
│ │ ├─ export.ts # SVG / PNG export via save dialog
│ │ └─ components/ # Sidebar, Editor, Preview, GitPanel, Toolbar, …
│ │ └─ components/ # Sidebar, Editor, Preview, GitPanel, OptimizePanel, …
│ └─ main.ts
└─ src-tauri/ # Rust backend
├─ src/