Skip to content

Conversation

@SethCalkins
Copy link

Summary

Adds support for rendering Mermaid diagrams in markdown files.

Changes

  • Add mermaid.min.js library (v11.x) to Resources
  • Detect mermaid code blocks (language-mermaid or class="mermaid")
  • Embed mermaid.js inline in HTML for compatibility with macOS 12+ data-based Quick Look preview
  • Enable JavaScript in WKWebView when inlineImageExtension OR unsafeHTMLOption is enabled (changed from AND to OR)

Why embed inline?

macOS 12+ uses data-based Quick Look preview (QLPreviewReply) which cannot access file:// URLs due to sandboxing. By embedding mermaid.js inline in the HTML, the diagrams render correctly regardless of the preview method used.

Supported syntax

Fenced code blocks:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[OK]
    B -->|No| D[Cancel]
```

HTML divs:

<div class="mermaid">
graph TD
    A --> B
</div>

Features

  • Automatic dark/light theme based on system preference
  • Supports all mermaid diagram types (flowcharts, sequence diagrams, class diagrams, etc.)
  • Only loads mermaid.js when mermaid blocks are detected in the markdown

Test Plan

  • Verify mermaid diagrams render in Quick Look preview
  • Test with both light and dark system themes
  • Test flowcharts, sequence diagrams
  • Test on different macOS versions (11, 12+)

Add support for rendering mermaid diagrams in markdown files.

Changes:
- Add mermaid.min.js library to Resources
- Detect mermaid code blocks (```mermaid or class="mermaid")
- Embed mermaid.js inline in HTML for compatibility with macOS 12+
  data-based Quick Look preview (which cannot access file:// URLs)
- Enable JavaScript in WKWebView when inlineImageExtension OR
  unsafeHTMLOption is enabled (changed from AND to OR) since
  mermaid.js is a bundled trusted library

Supported syntax:
- Fenced code blocks with "mermaid" language
- HTML divs with class="mermaid"

The mermaid library automatically adjusts theme based on system
dark/light mode preference.
@SethCalkins
Copy link
Author

@sbarex please review for merge

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant