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:
@@ -7,6 +7,7 @@
|
||||
import Editor from './lib/components/Editor.svelte';
|
||||
import Preview from './lib/components/Preview.svelte';
|
||||
import GitPanel from './lib/components/GitPanel.svelte';
|
||||
import OptimizePanel from './lib/components/OptimizePanel.svelte';
|
||||
import Toasts from './lib/components/Toasts.svelte';
|
||||
|
||||
// Editor/preview split ratio (fraction taken by the editor).
|
||||
@@ -112,6 +113,9 @@
|
||||
<div class="faint">Pick one from the sidebar, or create a new diagram with +.</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if store.showOptimize}
|
||||
<OptimizePanel />
|
||||
{/if}
|
||||
{#if store.showGit}
|
||||
<GitPanel />
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user