nvim-markdown-preview icon indicating copy to clipboard operation
nvim-markdown-preview copied to clipboard

Add Mermaid diagram support

Open leeguooooo opened this issue 7 months ago • 0 comments

Summary

This PR adds comprehensive support for rendering Mermaid diagrams in markdown preview.

Features

  • ✅ Support for all Mermaid diagram types (flowcharts, sequence diagrams, Gantt charts, etc.)
  • ✅ Handles complex diagrams with emoji, Chinese characters, and special symbols
  • ✅ Automatic HTML entity decoding for proper diagram syntax
  • ✅ Manual initialization for reliable rendering

Implementation Details

  • Added Mermaid JavaScript initialization script (js/mermaid-init.js)
  • Modified Pandoc generation to include Mermaid library and initialization
  • Uses Mermaid CDN v10.6.1 for library loading
  • Configured with appropriate security and rendering settings

Testing

Create a markdown file with mermaid code blocks and run :MarkdownPreview

Simple example:

graph TD
    A[Start] --> B[Process]
    B --> C[End]

Complex example with emoji and Chinese:

flowchart TB
    subgraph "🌟 核心功能"
        A[⚡ 智能限流] --> A1[IP 分片架构]
        B[🎯 智能缓存] --> B1[版本控制]
    end
    style A fill:#ff9999
    style B fill:#99ccff

Commits

  • Add Mermaid diagram support
  • Fix Mermaid rendering for complex diagrams

leeguooooo avatar Sep 26 '25 04:09 leeguooooo