Add Mermaid diagram preview

[monkeymars]

Summary

• Add a new mermaid_preview crate that renders live previews of Mermaid diagram files (.mmd, .mermaid) using mermaid-rs-renderer
• Support opening preview in the current pane, in a side split, or in a following mode that tracks the active editor
• Add keybindings on all platforms (Cmd/Ctrl+Shift+V for in-place, Cmd/Ctrl+K V for side-by-side)

Follows the same pattern as svg_preview and markdown_preview.

Test plan

• Open a .mmd or .mermaid file and verify the preview keybindings appear in the keymap
• Use Cmd+Shift+V (macOS) / Ctrl+Shift+V (Linux/Windows) to open an in-place preview
• Use Cmd+K V / Ctrl+K V to open a side-by-side preview
• Edit the Mermaid source and confirm the preview updates on edit and save
• Verify error messages display when the Mermaid syntax is invalid

🤖 Generated with Claude Code

[cla-bot]

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: Gery Wibowo.
This is most likely caused by a git client misconfiguration; please make sure to:

1. check if your git client is configured with an email to sign commits git config --list | grep email
2. If not, set it up using git config --global user.email email@example.com
3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

[cla-bot]

We require contributors to sign our Contributor License Agreement, and we don't have @monkeymars 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'.

[monkeymars]

@cla-bot check

[cla-bot]

The cla-bot has been summoned, and re-checked this pull request!

[monkeymars]

Screenshot preview .mermaid

[SomeoneToIgnore]

Looks like #49064 will be the way this is implemented, so I'll close this one optimistically.

[osiewicz]

@SomeoneToIgnore #49064 is about markdown support for mermaid blocks, whereas this seems to introduce an Item impl for displaying mermaid graphs; they seem related, but not fully overlapping to me.

[monkeymars]

Thanks for the pointer to #49064 , but I think this PR addresses a different use case that #49064 doesn't cover. #49064 adds Mermaid rendering inside Markdown files code blocks, whereas this PR introduces a dedicated mermaid_preview crate for previewing standalone .mmd/.mermaid files similar to how svg_preview works for .svg files. Could this be reconsidered or tracked separately?

[SomeoneToIgnore]

From what I recall, those bits are meant to be merged together in some form, but sure you can go ahead and ask in the other PR, as that person has the best context of us all.

[smitbarmase]

@monkeymars Hey, thanks for putting this together! The use case is valid, standalone .mmd/.mermaid file preview is something we should support.

That said, I'd rather not add a new crate for this. The mermaid_preview code here is almost identical to svg_preview the only real difference is the rendering step (mermaid text → SVG → image vs SVG → image). I'd prefer we generalize svg_preview into a unified file_preview crate that supports multiple formats. Then add mermaid as a second format.

We can tratify it all, have SVG and Mermaid describe its own file extensions, and rendering logic. That way whole workspace/pane etc boilerplate stays shared.

If you're interested in picking this up, happy to help guide the refactor.

[monkeymars]

That makes a lot of sense! A unified file_preview crate is way cleaner than duplicating the boilerplate. I'd love to pick this up. Would you be able to guide me through the refactor? Happy to start whenever you're ready

[monkeymars]

Hey @smitbarmase — I've picked up the refactor you suggested!

I've opened #49207 which introduces a unified file_preview crate that fully replaces both svg_preview and mermaid_preview. Here's a quick summary of what's in there:

• FilePreviewFormat trait — adding a new file type only requires implementing extensions() and render(), so the workspace/pane/toolbar boilerplate stays shared.
• svg_preview and mermaid_preview removed — all their functionality is covered by the new crate.
• Eye icon button in the quick action bar — appears when a .svg, .mmd, or .mermaid file is active, matching the existing Markdown preview button. Click for in-place preview, Alt+click for a side split.
• zed_actions — OpenPreview, OpenPreviewToTheSide, and OpenFollowingPreview actions registered for both svg and mermaid namespaces.

Would love your feedback on the design of the trait and how the toolbar integration fits in with the rest of the quick action bar. Happy to iterate!