Add Raw/Rendered toggle for Mermaid notebook blocks by zachlloyd · Pull Request #10431 · warpdotdev/warp

zachlloyd · 2026-05-08T01:20:54Z

Description

Implements the GH549 Mermaid notebook behavior and updates the related specs.

This PR changes Mermaid-labeled notebook code blocks so users can choose between Raw source and Rendered diagram display on a per-block basis. Ordinary editable notebooks default Mermaid blocks to Raw so in-progress or invalid Mermaid source remains editable, while planning documents and rendered Markdown file views default Mermaid blocks to Rendered so diagrams are visible by default.

Key changes:

Adds a Raw/Rendered icon-button toggle for Mermaid notebook code blocks.
Keeps the toggle visible in both raw code-block mode and rendered diagram mode.
Preserves Mermaid source as the buffer source of truth regardless of display mode.
Shows rendered diagrams at full block width using SVG aspect-ratio sizing, with stable loading/error frames.
Defaults planning documents and rendered Markdown file views to rendered Mermaid diagrams.
Adds branded language icons and wider language dropdown treatment for notebook code blocks.
Updates specs/GH549/product.md and specs/GH549/tech.md to reflect the implemented behavior.

Screenshots / Videos

https://www.loom.com/share/89bb30f88a1d4d9d8006b65c5f7f7d4a

Testing

cargo check (run by Zach before this commit)
cargo fmt
cargo clippy --workspace --all-targets --all-features --tests -- -D warnings

Note: clippy completed successfully. During the run, command-signatures-v2 logged a non-fatal warning that it proceeded with stale generated command signatures JS.

Agent Mode

Warp Agent Mode - This PR was created via Warp's AI Agent Mode

Changelog Entries for Stable

CHANGELOG-IMPROVEMENT: Added Raw and Rendered display controls for Mermaid code blocks in notebooks, planning documents, and rendered Markdown views.

Agent artifacts:

Conversation: https://staging.warp.dev/conversation/7967da60-8ae2-4747-9db4-3bb49f727a32

Co-Authored-By: Oz oz-agent@warp.dev

…ng them as code Add product and tech specs describing the desired behavior: a notebook code block labeled as Mermaid should only switch into Mermaid-diagram rendering when its current contents are parseable as a Mermaid diagram, and should otherwise remain a normal code block until the contents become valid. Co-Authored-By: Oz <oz-agent@warp.dev> Co-Authored-By: Zach Lloyd <zachlloyd@users.noreply.github.com>

Selecting Mermaid on a notebook code block previously forced the block into diagram rendering regardless of the current contents, so ordinary notes or partially-written diagrams showed up as a broken diagram frame instead of staying editable as code. Gate the Mermaid layout path in LayoutTask::from_styled_block on the asset cache state for the block's Mermaid source. When the cached render has succeeded, the block lays out as BlockItem::MermaidDiagram. When the render has failed, is still loading, or the source is empty, the block falls through to the regular code-block layout and carries an optional pending Mermaid asset source so the notebook view can watch for the asset to resolve and rebuild the layout. The language dropdown and markdown round-trip keep reporting Mermaid regardless of the rendered mode. Also extend the notebook view's asset-load watcher to pick up Mermaid sources attached to code-view fallback blocks, so layout is retried once the async render completes. Add unit tests covering the empty, not-yet-loaded, failed, and loaded asset states. Co-Authored-By: Oz <oz-agent@warp.dev> Co-Authored-By: Safia Abdalla <captainsafia@users.noreply.github.com>

…ill format - product.md: rename User Experience → Behavior with 17 numbered invariants, remove Success Criteria and Validation sections (moved to tech spec), merge Goals/Non-goals, resolve inline open question per tech spec decision - tech.md: merge Problem + Relevant code + Current state into single Context section, update Testing and Validation to reference PRODUCT.md Behavior invariants by number Co-Authored-By: Oz <oz-agent@warp.dev>

- Update specs/GH549 to describe the new Raw/Rendered segmented control behavior (Raw is default, Rendered attempts SVG render, error frame on failure) - crates/editor: Add mermaid_render_offsets to RenderLayoutOptions for per-block rendering control; thread block_start into from_styled_block; show error message in RenderableMermaidDiagram when asset FailedToLoad - app/notebooks/model: Stop auto-rendering Mermaid (render_mermaid_diagrams_in_state returns false); add set_mermaid_render_mode to enable Rendered mode per block - app/notebooks/view: Add EditorViewAction::MermaidDisplayModeSelected and handler - app/notebooks/notebook_command: Add MermaidDisplayModeToggle view (wraps MarkdownToggleView, dispatches MermaidDisplayModeSelected); add mermaid_display_mode field and mermaid_toggle to NotebookCommand; show toggle in block footer for Mermaid blocks - Update tests to reflect new default-Raw behavior: add set_mermaid_render_mode setup to navigation/selection/view tests that require Rendered mode Co-Authored-By: Oz <oz-agent@warp.dev>

- PRODUCT.md invariant 6: clarify the toggle must remain visible even when the Mermaid diagram is rendered (not just in code-block view) - TECH.md §8: document the root cause (MermaidDiagram arm in renderable_blocks didn't fetch runnable_command) and the fix - crates/editor/src/render/element/mermaid.rs: add footer: Box<dyn Element> field; accept model/editor_is_focused/ctx in new(); layout the footer at BLOCK_FOOTER_HEIGHT; paint it at content_rect.lower_right() in a higher z-index layer; delegate after_layout and dispatch_event to it - crates/editor/src/render/element/mod.rs: for BlockItem::MermaidDiagram, fetch runnable_command via parent.runnable_command_at and pass it to RenderableMermaidDiagram::new -- same pattern as RunnableCodeBlock COMMAND_SPACING already reserves BLOCK_FOOTER_HEIGHT as padding.bottom, so no layout dimension changes are needed. Co-Authored-By: Oz <oz-agent@warp.dev>

Co-Authored-By: Oz <oz-agent@warp.dev>

Refine the Mermaid Raw/Rendered footer toggle spacing and align the notebook language icons with the existing SVG rendering path. Co-Authored-By: Oz <oz-agent@warp.dev>

Co-Authored-By: Oz <oz-agent@warp.dev>

Remove an unused editor import and apply rustfmt wrapping in menu rendering code. Co-Authored-By: Oz <oz-agent@warp.dev>

oz-for-oss · 2026-05-08T01:21:07Z

@zachlloyd

I'm starting a first review of this pull request.

You can view the conversation on Warp.

I completed the review and no human review was requested for this pull request.

Comment /oz-review on this pull request to retrigger a review (up to 3 times on the same pull request).

Powered by Oz

oz-for-oss

Overview

This PR adds per-block Raw/Rendered controls for Mermaid notebook blocks, rendered defaults for planning/Markdown views, and supporting layout/icon changes.

Concerns

Changing a previously rendered Mermaid block to another language and then back to Mermaid reuses the existing command model without resetting its transient display mode, so explicit Mermaid conversions can default to Rendered instead of Raw.
Asset-load watching now scans every laid-out block rather than viewport items, which can trigger unnecessary offscreen Mermaid asset checks and relayout work in large documents.

Verdict

Found: 0 critical, 1 important, 1 suggestions

Request changes

Comment /oz-review on this pull request to retrigger a review (up to 3 times on the same pull request).

Powered by Oz

oz-for-oss · 2026-05-08T01:28:02Z

@@ -2972,6 +3042,20 @@ impl TypedActionView for RichTextEditorView {
            } => self.model.update(ctx, |model, ctx| {
                model.update_code_block_type_at_offset(code_block_type, start_anchor.clone(), ctx)


⚠️ [IMPORTANT] This language-change path does not reset the reused NotebookCommand's mermaid_display_mode. A block rendered as Mermaid, changed to another language, then changed back to Mermaid will still have Rendered mode and won't default to Raw as required for explicit conversions; reset the mode and resync offsets when selecting Mermaid in ordinary notebooks.

bnavetta

Nice!

Update Mermaid display mode changes to trigger relayout, consolidate code block icon selection, preserve eager diagram loading, and add a right-edge cursor affordance for rendered diagrams. Co-Authored-By: Oz <oz-agent@warp.dev>

Co-Authored-By: Oz <oz-agent@warp.dev>

## Description Implements the GH549 Mermaid notebook behavior and updates the related specs. This PR changes Mermaid-labeled notebook code blocks so users can choose between Raw source and Rendered diagram display on a per-block basis. Ordinary editable notebooks default Mermaid blocks to Raw so in-progress or invalid Mermaid source remains editable, while planning documents and rendered Markdown file views default Mermaid blocks to Rendered so diagrams are visible by default. Key changes: - Adds a Raw/Rendered icon-button toggle for Mermaid notebook code blocks. - Keeps the toggle visible in both raw code-block mode and rendered diagram mode. - Preserves Mermaid source as the buffer source of truth regardless of display mode. - Shows rendered diagrams at full block width using SVG aspect-ratio sizing, with stable loading/error frames. - Defaults planning documents and rendered Markdown file views to rendered Mermaid diagrams. - Adds branded language icons and wider language dropdown treatment for notebook code blocks. - Updates `specs/GH549/product.md` and `specs/GH549/tech.md` to reflect the implemented behavior. ## Screenshots / Videos https://www.loom.com/share/89bb30f88a1d4d9d8006b65c5f7f7d4a ## Testing - `cargo check` (run by Zach before this commit) - `cargo fmt` - `cargo clippy --workspace --all-targets --all-features --tests -- -D warnings` Note: clippy completed successfully. During the run, `command-signatures-v2` logged a non-fatal warning that it proceeded with stale generated command signatures JS. ## Agent Mode - [x] Warp Agent Mode - This PR was created via Warp's AI Agent Mode ## Changelog Entries for Stable CHANGELOG-IMPROVEMENT: Added Raw and Rendered display controls for Mermaid code blocks in notebooks, planning documents, and rendered Markdown views. Agent artifacts: - Conversation: https://staging.warp.dev/conversation/7967da60-8ae2-4747-9db4-3bb49f727a32 Co-Authored-By: Oz <oz-agent@warp.dev> --------- Co-authored-by: Oz <oz-agent@warp.dev> Co-authored-by: Safia Abdalla <captainsafia@users.noreply.github.com>

oz-agent and others added 13 commits May 7, 2026 18:05

cargo fmt

ea579e4

Co-Authored-By: Oz <oz-agent@warp.dev>

Polish Mermaid notebook toggle UI

8109592

Refine the Mermaid Raw/Rendered footer toggle spacing and align the notebook language icons with the existing SVG rendering path. Co-Authored-By: Oz <oz-agent@warp.dev>

Fix mermaid notebook raw/rendered editing behavior

640e632

Co-Authored-By: Oz <oz-agent@warp.dev>

Fix rendered mermaid notebook sizing

e6b11d2

Co-Authored-By: Oz <oz-agent@warp.dev>

Default planning Mermaid blocks to rendered

e68e144

Co-Authored-By: Oz <oz-agent@warp.dev>

Fix Mermaid planning diagram initial layout

c63918a

Co-Authored-By: Oz <oz-agent@warp.dev>

Render Mermaid by default in markdown file views

6004fc2

Co-Authored-By: Oz <oz-agent@warp.dev>

Clean up editor and menu code

0a3fddd

Remove an unused editor import and apply rustfmt wrapping in menu rendering code. Co-Authored-By: Oz <oz-agent@warp.dev>

cla-bot Bot added the cla-signed label May 8, 2026

oz-for-oss Bot reviewed May 8, 2026

View reviewed changes

Merge branch 'master' into oz-agent/spec-issue-549

937ece1

zachlloyd requested a review from bnavetta May 9, 2026 18:36

bnavetta approved these changes May 9, 2026

View reviewed changes

Comment thread app/src/notebooks/editor/model.rs Outdated

Comment thread app/src/notebooks/editor/notebook_command.rs Outdated

Comment thread app/src/notebooks/editor/view.rs

Comment thread specs/GH549/tech.md Outdated

zachlloyd and others added 2 commits May 9, 2026 18:53

Address Mermaid notebook review feedback

56fe163

Update Mermaid display mode changes to trigger relayout, consolidate code block icon selection, preserve eager diagram loading, and add a right-edge cursor affordance for rendered diagrams. Co-Authored-By: Oz <oz-agent@warp.dev>

Merge master into oz-agent/spec-issue-549

5995c08

Co-Authored-By: Oz <oz-agent@warp.dev>

zachlloyd enabled auto-merge (squash) May 10, 2026 01:35

zachlloyd merged commit 35cb40c into master May 10, 2026
24 of 25 checks passed

zachlloyd deleted the oz-agent/spec-issue-549 branch May 10, 2026 01:53

jasonkeung mentioned this pull request May 10, 2026

[SAL-55] Add orchestration launch modal with placeholders #10382

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Raw/Rendered toggle for Mermaid notebook blocks#10431

Add Raw/Rendered toggle for Mermaid notebook blocks#10431
zachlloyd merged 16 commits into
masterfrom
oz-agent/spec-issue-549

zachlloyd commented May 8, 2026 •

edited

Loading

Uh oh!

oz-for-oss Bot commented May 8, 2026 •

edited

Loading

Uh oh!

oz-for-oss Bot left a comment

Uh oh!

oz-for-oss Bot May 8, 2026

Uh oh!

Uh oh!

bnavetta left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -2972,6 +3042,20 @@ impl TypedActionView for RichTextEditorView {
		} => self.model.update(ctx, \|model, ctx\| {
		model.update_code_block_type_at_offset(code_block_type, start_anchor.clone(), ctx)

Conversation

zachlloyd commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots / Videos

Testing

Agent Mode

Changelog Entries for Stable

Uh oh!

oz-for-oss Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oz-for-oss Bot left a comment

Choose a reason for hiding this comment

Overview

Concerns

Verdict

Uh oh!

oz-for-oss Bot May 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bnavetta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

zachlloyd commented May 8, 2026 •

edited

Loading

oz-for-oss Bot commented May 8, 2026 •

edited

Loading