Mermaid Render Anywhere

🤖 AI辅助的效率神器

💡 Vibe Coding 最佳实践
使用AI分析函数功能，自动生成Mermaid执行链路工作流图。开发者只需理解工作流逻辑，无需深入实现细节！

✨ 核心价值：让AI成为你的代码理解助手

• 🧠 自动分析：智能解析函数逻辑和执行流程
• 📊 可视化：自动生成直观的Mermaid工作流图
• ⚡ 高效开发：专注业务逻辑，减少代码阅读时间
• 🎯 快速理解：新手也能快速掌握复杂代码结构
• 🖼️ 高质量输出：支持高分辨率PNG导出，解决长图片像素低问题

在Python函数文档中渲染Mermaid工作流预览的VSCode扩展。支持多种Mermaid图表类型的实时预览，提供现代化的交互体验。

🖼️ 效果展示

动态标题编辑 & 自定义输出路径

✨ 功能特性

🎯 两种预览方式

📋 侧栏预览 vs 📑 页签预览

🔄 两步操作流程

1. 第一步 - 打开预览：

   • 单个图表：点击代码块上方的"📋 侧栏预览"或"📑 页签预览"按钮
   • 多个图表：右键菜单选择"在侧边栏显示Mermaid图表"或快捷键 Cmd+Shift+M

2. 第二步 - 大图预览：

   • 在已打开的预览中点击"预览大图"按钮
   • 侧栏模式：大图覆盖整个IDE界面
   • 页签模式：大图在当前页签内全屏显示

🎨 交互体验

• 拖拽移动: 点击并拖拽图表进行移动
• 鼠标滚轮缩放: 使用鼠标滚轮进行缩放操作
• 按钮缩放: 点击放大/缩小/重置按钮精确控制
• 美观界面: 现代化的卡片式设计，支持明暗主题
• 复制代码: 一键复制Mermaid代码到剪贴板
• 全屏预览: 支持全屏大图预览模式
• 🆕 智能标题编辑: 生成PNG图片时，智能检测标题和文件存在性，按需进行对话交互
• 🆕 自定义输出路径: 支持配置PNG文件的输出位置，可使用绝对路径或相对路径
• 🆕 高分辨率输出: 可配置PNG图片的缩放因子，支持1-8倍分辨率，解决长图片像素低的问题

📊 图表支持

• 流程图 (graph)
• 时序图 (sequenceDiagram)
• 类图 (classDiagram)
• 状态图 (stateDiagram)
• 甘特图 (gantt)
• 饼图 (pie)
• 用户旅程图 (journey)
• Git图 (gitgraph)

⚡ 智能特性

• 语言支持: Python, JavaScript, TypeScript, Java, Go
• 智能识别: 自动识别函数、方法、类中的Mermaid图表
• 实时渲染: 支持懒加载和智能重试机制
• 错误处理: 完善的错误提示和恢复机制

🚀 使用方法

📋 侧栏预览模式

1. 单个图表：在代码中的Mermaid代码块上方点击 "📋 侧栏预览" 按钮
2. 多个图表：右键菜单选择 "在侧边栏显示Mermaid图表" 或快捷键 Cmd+Shift+M
3. 图表将在左侧栏显示，可同时编辑代码
4. 点击预览中的"预览大图"按钮可全屏查看（覆盖整个IDE）

📑 页签预览模式

1. 单个图表：在代码中的Mermaid代码块上方点击 "📑 页签预览" 按钮
2. 多个图表：右键菜单选择 "提取所有Mermaid图表" 或快捷键 Cmd+R
3. 图表将在新页签中显示，提供更大的预览空间
4. 点击预览中的"预览大图"按钮可在页签内全屏查看

🎛️ 预览操作

• 拖拽移动: 鼠标拖拽图表
• 缩放操作: 鼠标滚轮或缩放按钮
• 全屏预览: 点击预览按钮查看大图
  • 📋 侧栏模式：覆盖整个IDE界面
  • 📑 页签模式：在当前页签内全屏
• 复制导出: 复制代码或导出SVG图片

🆕 智能标题编辑功能

在生成Mermaid预览图片时，您可以通过两种模式自定义流程图标题：

📝 标题编辑模式

🎯 使用方式

1. 配置编辑模式：在VSCode设置中将 mermaidRenderAnywhere.titleEditor.mode 设为 dialog
2. 点击预览PNG按钮：
   • 如果标题和PNG文件都存在 → 直接打开现有图片
   • 如果标题或PNG文件缺失 → 弹出对话框获取标题
3. 自定义标题：在对话框中输入标题（可为空）
4. 应用效果：自定义的标题会添加到代码中并显示在生成的图片文件名中

🆕 自定义PNG输出路径

您可以配置PNG文件的输出位置，支持灵活的路径配置：

📁 路径配置方式

🎯 智能路径处理

• 自动创建目录：如果指定的目录不存在，会自动创建
• 路径验证：检测绝对路径和相对路径，自动处理
• 回退机制：如果配置的路径无效，自动回退到当前文件目录

🆕 高分辨率PNG输出

为了解决 mermaid-cli 生成长图片像素低的问题，我们提供了可配置的缩放因子选项：

📊 分辨率配置

🎯 使用方式

1. 配置缩放因子：在VSCode设置中将 mermaidRenderAnywhere.pngScaleFactor 设为所需值（默认6）
2. 生成高分辨率图片：点击"🖼️ PNG预览"按钮
3. 查看效果：生成的PNG图片将具有更高的分辨率，特别适合长图片

💡 技术说明

• 问题解决：将原来的 -s 2 参数提升到 -s 6，显著改善图片质量
• 智能配置：支持1-8倍缩放，用户可根据需求调整
• 性能平衡：在图片质量和文件大小之间找到最佳平衡点

⌨️ 快捷键

⚙️ 配置选项

在VSCode设置中搜索 "Mermaid Render Anywhere" 可配置以下选项：

配置示例

在 settings.json 中添加：

{
  "mermaidRenderAnywhere.displayButton.sidebarAndTab": true,
  "mermaidRenderAnywhere.displayButton.saveAsPng": true,
  "mermaidRenderAnywhere.titleEditor.mode": "dialog",
  "mermaidRenderAnywhere.pngOutputPath": "assets/diagrams",
  "mermaidRenderAnywhere.pngScaleFactor": 6
}

💡 提示:

• 如果你只想使用预览功能，可以将 saveAsPng 设为 false 来隐藏保存PNG按钮
• 保存PNG功能需要全局安装 @mermaid-js/mermaid-cli：npm install -g @mermaid-js/mermaid-cli
• 🆕 智能标题编辑：设置 titleEditor.mode 为 dialog 可在生成图片时通过对话框自定义标题
• 🆕 自定义输出路径：设置 pngOutputPath 可指定PNG文件的生成位置，支持绝对路径和相对路径
• 🆕 高分辨率输出：设置 pngScaleFactor 可控制PNG图片的分辨率，数值越高图片越清晰但文件越大

🤝 贡献

欢迎提交Issue和Pull Request！

📄 许可证

本项目采用 MIT 许可证。

🔗 相关链接

• GitHub仓库
• Mermaid官方文档
• VSCode扩展开发指南