Add configurable Mermaid widths and alignment in Markdown Preview

[Fy1ng]

Summary

Mermaid blocks share the Markdown content-width constraint, so wide diagrams cannot be sized independently of the surrounding text. This adds optional width controls for top-level Mermaid blocks and configurable horizontal alignment in Markdown Preview.

Setting	Default	Behavior
Use Custom Mermaid Width (limit_mermaid_width)	false	Enables an independent width cap for top-level Mermaid blocks.
Maximum Width (mermaid_max_width)	800	Appears as a child of Use Custom Mermaid Width when enabled.
Mermaid Width Follows Diagram (mermaid_width_follows_diagram)	false	Uses the diagram's natural width, with enough room for its controls. Takes precedence over custom width.
Mermaid Alignment (mermaid_alignment)	center	Selects left, center, or right alignment independently of width.

All keys are under markdown_preview; the custom-width JSON keys remain unchanged.

• When Mermaid Width Follows Diagram is enabled, the custom-width switch and its expanded Maximum Width field are disabled, with an explanation that their saved values are currently inactive. Both values are preserved and become editable again when diagram-following is disabled. Reset actions and queued input callbacks also respect this state.
• Disabled number fields report the native AccessKit disabled state while retaining their accessible label, description, and value. The optional GPUI aria_disabled property leaves existing accessibility metadata unchanged when unset.
• Width precedence is diagram-following, then an enabled custom width cap, then the Markdown content-width constraint. Both width switches can remain saved as true.
• Upstream limit_content_width = true and max_width = 800, their descriptions, and their behavior remain unchanged. The original whole-document container is retained when no width override is active, including alignment-only changes. Disabling the document width limit does not impose an independent 800px Mermaid cap.
• Center alignment is an intentional default behavior change. Set alignment to left with both width switches disabled to retain upstream Mermaid layout. The generic Markdown renderer and nested diagrams retain their original defaults and parent constraints.
• Preserve natural image sizing and horizontal scrolling. Diagram-following reserves a measured minimum width for controls, allows the toolbar to wrap, and keeps the block's baseline width stable during zoom.
• Index the nested Maximum Width setting for search and route its deep link to the parent group without enabling the switch automatically.

Testing

Automated checks on Windows at f2f20442814845f533a7ec1796e89e96f12de559, based on upstream bda9c0bd43a8d235d82adb01ea5bc875b861ecfc:

• cargo test --locked -p gpui -p markdown -p markdown_preview -p settings_ui --lib: 611 passed (347 GPUI, 169 Markdown, 32 Markdown Preview, 63 Settings UI).
• Coverage includes width precedence, inactive caps, nested diagrams, alignment defaults and explicit choices, toolbar bounds and zoom, disabled settings and value preservation, stale input callbacks, and nested-setting search/navigation.
• Accessibility regressions cover unset, enabled, and disabled metadata, plus read/edit mode transitions that retain labels and values and remove/restore accessible actions. The NumberField regression was verified to fail with the old disabled renderer.
• cargo build --locked -p zed --bin zed: passed; Windows Debug executable reports product version 1.23.0+dev.f2f20442814845f533a7ec1796e89e96f12de559.
• target/debug/zed.exe --help: passed.
• Rustfmt checks for changed Rust files and git diff --check: passed.

Reviewer checks:

1. Preview a small diagram, an oversized diagram, and a diagram inside a list. Check the centered default and horizontal scrolling; select Left with both width switches off to compare with upstream layout.
2. Disable limit_content_width with both Mermaid width switches off; confirm there is no independent 800px cap.
3. Enable Use Custom Mermaid Width, enter a distinct Maximum Width, and then enable Mermaid Width Follows Diagram. Confirm the custom-width group is disabled and retains its values, Alignment stays editable, and disabling diagram-following restores editing.
4. Search for Maximum Width and follow its settings link while the parent switch is off. Check narrow panes, larger fonts, the Preview/Code tabs, zoom, and scrolling; nested diagrams should stay within their parent layout.

The author reports manual review passed. Automated validation was performed on Windows; macOS/Linux and the complete UI checklist have not been independently verified. The accessibility checks inspect rendered AccessKit metadata; a native screen-reader session has not been run. Native capture was unavailable, so no screenshot artifacts are attached.

Self-review

• The author confirmed manual review of the changes.
• The complete UI checklist is verified across supported platforms.
• Tests cover the new or changed behavior.

This implementation and these technical notes are AI-assisted and published at the author's request. The author's confirmation, translated into English:

Manual review passed, the CLA has been signed, update the PR.

Original author message:

人工审查通过，CLA 已签署，更新 PR

The README review marker remains because .rules reserves its removal for the human author.

Suggested .rules additions

For crates/markdown:

GPUI tests that assert VisualTestContext::debug_bounds should drive the window's root view: cx.draw does not publish rendered-frame debug bounds. Allow a subsequent frame to settle before asserting dimensions that depend on measured scrollbar bounds.

Release Notes:

• Added Mermaid width controls and horizontal alignment in Markdown Preview, with centered diagrams by default and custom-width controls that respect diagram-following mode.

[cla-bot]

We require contributors to sign our Contributor License Agreement, and we don't have @Fy1ng on file. You can sign our CLA at https://zed.dev/cla. Once you've signed, post a comment here that says '@cla-bot check'.

[Copilot]

Copilot review overview

🔵 Needs a closer look

The disabled number field exposes an editable spin-button role without disabled or read-only accessibility semantics.

Review effort: Lite
Findings: None

What changed in this PR

Adds configurable Mermaid widths, natural sizing, and alignment to Markdown Preview, with corresponding settings UI support.

Changes:

• Adds Mermaid width and alignment settings.
• Implements width precedence, sizing, scrolling, and toolbar behavior.
• Adds disabled-setting handling, search navigation, and layout tests.
• Requires an accessibility fix for the disabled number field’s spin-button semantics.

File	Description
README.md	Adds the review marker.
crates/​settings_ui/​src/​settings_ui.rs	Supports disabled fields and nested setting search.
crates/​settings_ui/​src/​pages/​mcp_servers_page.rs	Updates layout call sites.
crates/​settings_ui/​src/​pages/​external_agents_page.rs	Updates layout call sites.
crates/​settings_ui/​src/​page_data.rs	Defines Mermaid settings.
crates/​settings_ui/​src/​components/​number_field.rs	Adds disabled number-field rendering; accessibility semantics need correction.
crates/​settings_content/​src/​settings_content.rs	Adds persisted Mermaid configuration types.
crates/​markdown/​src/​mermaid.rs	Implements Mermaid sizing, alignment, controls, and tests.
crates/​markdown/​src/​markdown.rs	Applies top-level Mermaid layout overrides.
crates/​markdown_preview/​src/​markdown_preview_view.rs	Applies preview layout settings.
crates/​markdown_preview/​src/​markdown_preview_settings.rs	Maps persisted settings to renderer layout.
assets/​settings/​default.json	Documents and defaults the new settings.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.