Skip to content
Open
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 22 additions & 2 deletions src/content/docs/terminal/more-features/markdown-viewer.mdx
Original file line number Diff line number Diff line change
@@ -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"
---
Expand Down Expand Up @@ -87,6 +87,26 @@ If the command contains any arguments using the curly brace `{{param}}` syntax,

<DemoVideo src="/assets/terminal/run-markdown-file-command.mp4" label="Demo of running two commands from a Markdown file in Warp" />

In addition, all shell and code blocks have a copy button to quickly copy the blocks 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]
```
````

<figure>
![A Mermaid flowchart rendered as an SVG diagram in Warp's Markdown Viewer](../../../../assets/terminal/markdown-viewer-mermaid-diagram.png)
<figcaption>A Mermaid diagram rendered in the Markdown Viewer.</figcaption>
</figure>

### 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.
Loading