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:
13
README.md
13
README.md
@@ -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/
|
||||
|
||||
Reference in New Issue
Block a user