Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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