spacebar Install

Preview Mermaid Diagrams On Mac

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

  • Works without the Space helper
  • Free and open source
  • macOS 13+

GitHub draws Mermaid diagrams; Quick Look on a Mac shows their source. spacebar draws them: put the diagram in a mermaid fence, select the file and press Space.

```mermaid
flowchart LR
  Finder --> QuickLook[Quick Look] --> spacebar --> Preview
```
The source, and the flowchart it describes. The drawing is an illustration in HTML, not Mermaid’s output.
architecture.md
Try it: the demo’s architecture.md, its Mermaid diagram drawn by spacebar’s own preview page in your browser.

A diagram that fails to draw shows the reason it failed.

Every File, Not Just Markdown

A free Quick Look replacement. With the optional Space helper, which needs Accessibility, Space opens PDFs, photos, CSV and nearly every other file in spacebar.

More: Markdown, Obsidian, Claude Code, QLMarkdown, compare.

Questions

Can Quick Look show Mermaid diagrams?

Not on its own: Apple’s Quick Look shows the diagram’s source. With spacebar, a mermaid fence in a Markdown file is drawn as a diagram when you press Space.

Does it need an internet connection?

No. Mermaid and KaTeX are bundled with spacebar, so diagrams and math draw offline.

What if a diagram doesn’t draw?

spacebar shows the reason it failed.

Does it redraw as I edit?

Yes. Each time the file is saved, the preview redraws and keeps your place.

Can I turn diagrams off?

Yes. "mermaid": false in settings.json turns diagrams off, and "math": false turns math off.

Install

Download for Mac

Or paste this in Terminal

curl -fsSL https://spacebar.patebryant.com/install.sh | sh

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