Extend the Diagram Doctor beyond flowcharts to stateDiagram / stateDiagram-v2.
- New parseStateDiagram: states → nodes, transitions → edges in source order
(including `[*]` pseudo-transitions, so linkStyle indices stay aligned);
`[*]` itself is never a node. Composite states map to groups, notes are
skipped. A parseDiagram() dispatcher feeds analyze/transforms.
- Fixes are tailored per kind (verified empirically against Mermaid 11):
* ELK is flowchart-only (state diagrams reject `layout: elk`), so it's not
offered and the no-ELK score penalty is skipped for state diagrams.
* Spacing uses the `state` config key; direction is set via a `direction`
statement rather than the header.
* State diagrams can't style individual transitions — a `linkStyle` line
renders as a stray node — so the dim-hubs fix and focus mode fade the
busy *states* (e.g. CANCELLED) via classDef/class instead of dimming edges.
Flowcharts keep edge dimming via linkStyle.
- Panel notice now covers flowcharts & state diagrams.
Verified in-browser: state-diagram dim/focus render with zero junk nodes;
flowchart ELK + linkStyle dimming still intact.
Add a ☰ toolbar button (and ⌘/Ctrl+B shortcut) to show/hide the left sidebar
for a wider editing/preview area. The preview re-fits when the sidebar — or the
Optimize panel — toggles, so the diagram stays centred.
Add remote sync to the Git panel: set/edit an origin URL, then fetch, pull
(fast-forward) and push, with live ahead/behind counts against the
remote-tracking branch.
Backend:
- git_ops: remote_status (git2 ahead/behind + upstream), set_remote, and
fetch/pull/push that shell out to the system git CLI so they reuse the
user's existing credentials (SSH agent, keychain / credential helpers)
instead of reimplementing libgit2 credential callbacks. Pull is --ff-only
to avoid leaving a conflicted tree from the GUI; push uses --set-upstream.
- New commands git_remote_status/set_remote/fetch/pull/push, registered.
- Test: push to a bare local remote, then assert upstream + ahead/behind.
Frontend:
- RemoteStatus type, api wrappers, store state (remote, syncing) with
refreshRemote wired into refreshGit; pull reloads diagrams + open buffer.
- GitPanel remote section: URL, ahead/behind badges, Fetch/Pull/Push, and a
set-remote dialog.
cargo test (7 passing incl. roundtrip), svelte-check and build all green.
Add a "⧉ Copy" button that places the current diagram on the system clipboard
as a PNG via the async Clipboard API (ClipboardItem). The write is invoked
synchronously with the PNG handed over as a promise, so it stays inside the
click gesture WebKit requires.
PNG export and clipboard copy now re-render through renderRaster(), which
forces htmlLabels off via an injected init directive. Flowcharts otherwise emit
<foreignObject> HTML labels that taint the canvas and make toBlob()/clipboard
writes fail — this also fixes pre-existing flowchart PNG export. The live
preview and SVG export keep the richer foreignObject labels.
Verified end-to-end: renderRaster yields a foreignObject-free SVG, it
rasterizes without tainting, and clipboard.write resolves on a real click.
After pinning the SVG to its intrinsic size, the stage's layout box is often
wider than a narrow (split) canvas. CSS grid centring doesn't centre an
oversized item — it anchored the stage's left edge to the canvas, pushing the
transform-origin (and the scaled-down diagram) far to the right.
Centre the stage with absolute positioning at left/top 50% plus a
translate(-50%,-50%) prefix on the transform, so centring is independent of the
unscaled size. The grid still centres the empty/error messages. Verified the
diagram and the placeholder sit at offset 0 in a 691px split pane.
The previous fix only disabled useMaxWidth for flowcharts, so sequence (and
other) diagrams still rendered responsively and fit shrank them to a tiny
speck. Normalise every rendered SVG to its viewBox pixel size (stripping
width:100% / max-width) in the render path, so fit/zoom is exact regardless of
diagram type. Drops the now-redundant per-type flowchart flag.
- Pan no longer ghosts/stutters: drop the always-on transform transition
(it interpolated against every mousemove) in favour of will-change layer
promotion; a short transition is pulsed only for button zoom / fit.
- Trackpad zoom is now continuous and cursor-anchored: zoom factor is
exponential in wheel delta (clamped) instead of a fixed 10% per event, so
macOS pinch feels smooth; mouse-wheel deltas are tamed by the same curve.
Two-finger scroll now pans.
- Fit no longer ends up tiny on big diagrams: render flowcharts with
useMaxWidth:false so the SVG's laid-out size equals its viewBox, making the
fit/zoom maths exact (previously the SVG was shrunk responsively *and* again
by fit). Lower the zoom floor so very large diagrams can fit fully.
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.
- StreamLanguage tokenizer for Mermaid: diagram-type keywords, general
keywords, directions, arrows/links, strings, %% comments, init
directives and YAML frontmatter, with a dark-theme HighlightStyle
- live linter via mermaid.parse: maps parse errors to the right editor
line (accounting for the frontmatter lines mermaid strips), with wavy
underline, gutter marker and message tooltip
- autocomplete: Mermaid keyword/type/direction options plus starter
diagram snippets offered on the first line; bracket closing
- dark-themed completion + diagnostic tooltips
Adds @codemirror/lint, @codemirror/autocomplete and @lezer/highlight.
- CodeMirror 6 editor with a debounced Mermaid 11 preview (zoom, pan,
auto fit-to-view and inline error reporting)
- project start screen with recent projects, sidebar diagram explorer,
toolbar and a Git panel (status, commit, history, branches)
- SVG/PNG export, per-project theme switching, toasts
- rune-based central store orchestrating all backend calls
- view modes (Code / Split / Preview) plus a viewer mode with a
slide-in quick-edit drawer (Cmd/Ctrl+E)
- sqlx/SQLite registry of known projects + user settings (db.rs)
- project create/open with mermix.toml config and slugged paths (project.rs)
- diagram CRUD on .mmd files with frontmatter titles and path-traversal
guards (diagram.rs)
- git2-backed versioning: commit-all, history, branches, checkout,
working-tree status (git_ops.rs)
- Tauri command surface, shared state and unified error type
- headless tests covering project creation, diagram CRUD and branch
isolation (tests.rs)
Standard Tauri layout with a Svelte 5 + TypeScript + Vite frontend and a
Rust backend in src-tauri. Adds build tooling, app/window config,
capabilities, generated icons and the project README.
