Mermaid Markdown Viewer

Render diagrams and Markdown in one place

This viewer combines a Markdown editor with a live Mermaid diagram renderer. Write documentation, notes, or specs on the left and watch the formatted HTML plus any mermaid code blocks become real diagrams on the right.

What you can do

Wrap any diagram in a ```mermaid code fence to render it live
Use the view switcher to focus on the editor, the preview, or both side by side
Open an existing .md, .markdown, or .txt file via drag & drop or the Open button
Export the Markdown source or print the rendered page
Your content and preferred view are saved in your browser between visits

Example diagram

```mermaid
flowchart TD
    A[Start] --> B{Valid?}
    B -->|yes| C[Continue]
    B -->|no| D[Fix]
    C --> E[Done]
    D --> B
```

Tip

Charts render entirely in your browser — no external services, no uploads. Everything stays on this page.