diff --git a/src/assets/terminal/markdown-viewer-mermaid-diagram.png b/src/assets/terminal/markdown-viewer-mermaid-diagram.png new file mode 100644 index 000000000..430565dfb Binary files /dev/null and b/src/assets/terminal/markdown-viewer-mermaid-diagram.png differ diff --git a/src/content/docs/terminal/more-features/markdown-viewer.mdx b/src/content/docs/terminal/more-features/markdown-viewer.mdx index 58be53293..1c6d094cb 100644 --- a/src/content/docs/terminal/more-features/markdown-viewer.mdx +++ b/src/content/docs/terminal/more-features/markdown-viewer.mdx @@ -1,7 +1,7 @@ --- title: Markdown Viewer description: >- - Open Markdown files in your terminal and run commands. + Open Markdown files in your terminal, run shell commands, and view rendered Mermaid diagrams. sidebar: label: "Markdown viewer" --- @@ -87,6 +87,26 @@ If the command contains any arguments using the curly brace `{{param}}` syntax, -In addition, all shell and code blocks have a copy button to quickly copy the block’s text to the clipboard. +In addition, all shell and code blocks have a copy button to quickly copy the block's text to the clipboard. Code blocks without a set language, or one of the following languages, are treated as shell commands: `sh`, `shell`, `bash`, `fish`, `zsh`, `warp-runnable-command`. + +## Mermaid diagrams + +Warp renders [Mermaid](https://mermaid.js.org/) diagrams in the markdown viewer. Add a fenced code block with the `mermaid` language tag and Warp converts it to a rendered SVG diagram automatically. + +```` +```mermaid +graph LR + A[Start] --> B[End] +``` +```` + +
+![A Mermaid flowchart rendered as an SVG diagram in Warp's Markdown Viewer](../../../../assets/terminal/markdown-viewer-mermaid-diagram.png) +
A Mermaid diagram rendered in the Markdown Viewer.
+
+ +### Switching between raw and rendered + +Each Mermaid block includes a **Raw** and **Rendered** toggle. Use it to switch between the rendered diagram and the original Mermaid source without leaving the viewer.