Preview Mermaid Diagrams On Mac

Press Space on a Markdown file and its diagrams are drawn, not shown as code

Mermaid turns text into flowcharts, sequence diagrams and more. GitHub draws them in READMEs, but on a Mac, Quick Look shows the Markdown file as plain text and the diagram as its source. spacebar draws it.

How It Works

Put the diagram in a fenced code block marked mermaid:

```mermaid
flowchart LR
  Finder --> QuickLook[Quick Look] --> spacebar --> Preview
```

Select the .md file in Finder and press Space. Mermaid is bundled with spacebar, so diagrams draw with no network connection.

Redraws As You Edit

Keep the preview open beside your editor. Each time you save, the panel redraws and keeps your place, so you can shape a diagram and see it change.

Math And Code Too

The same preview renders KaTeX math, $inline$ and $$block$$, and highlights code in 36 languages. Mermaid and math each have a switch in the Advanced settings.

Install

Free and open source for macOS 13 or later. See it first: open architecture.md in the demo on the home page.